背景：
接上一篇博客，如何渲染图层，渲染不同颜色的图层？
一个图层创建好了，接下来我们要做的是，如何通过鼠标点击打开点击对象的详情弹框？鼠标点击的是layer图层里的featrue要素，这些要素包括的数据信息就是创建图层的那些数据。接着拿到这些数据信息，我们可以接着做之下的这些功能：
1.在创建的地图对象监听'singleclick'鼠标的单击事件，通过点击对象可以拿到这个点击的像素块上的featrue要素。
2.拿到的要素传递给一个封装好的方法，在这个方法内，主要做的事情是：根据鼠标点击的不同的图层，通过判断自定义的字段layerType，进行不同的操作。
3.点击要素弹出一个详情弹框。在这个弹框里我们可以做的操作，主要有如下几点：在打开的详情弹框，对接口返回的结果做了一个list数据展示，有一个按钮，通过点击按钮，按钮呈现选中状态且图层对应要素的高亮。通过重新绘制图层达到效果
效果展示：
核心代码：
1.图层点击事件
2.打开测量时间图层——>对应的测量时间的弹框
这是一个封装好的方法。在这个方法里，做了这几种逻辑：
1.turf.js(一个类库)拿到当前点击对象的geom，之后有用到，一个网络请求的参数。
2.点击的这一个要素，选中状态，对应图层高亮样式。通过重新绘制图层达到效果
3.通过geom参数发起网络请求，根据接口设计，可以查询到当前geom的所有水深测量时间的数据。需要前端做的工作：对结果进行处理，按照图层控件绑定的事件，判断notCreate变量判断是否选中；然后判断接口返回数据res不同时间差，添加年份筛选。
4.对筛选后的数据，判断当前点击的要素是查询结果中的某一条，添加上isChoose = true，代表被选中，并设置为选中状态(通过选中样式体现)。
5.打开点击要素的详情弹框。
6.详情弹框点击查询结果的某一条，点击按钮添加高亮样式；且对应图层高亮样式。通过重新绘制图层达到效果
/**
* 测量时间面弹窗
* @param {number} id 航标的id
* @param {Array} offset 弹窗位置
*/
MeasuringTimePlanePop: function (id, offset,e) {
const point = turf.point(ol.proj.toLonLat(e.coordinate));
var geometry=`POINT(${point.geometry.coordinates[0]} ${point.geometry.coordinates[1]})`;
let formattedDate = moment().format('YYYY-MM-DD HH:mm:ss');
confDetails = CONFIG.initLayer.find(function (itme) { return itme.title === '测量时间' })
MAPutils.redrawMeasuringTimePlane(id)
$.post("enavapi/data/basedata/getWaterDepthMeasurementLayer", { 'param': JSON.stringify({
geometry:geometry,
}) }, function (data) {
var res = data.data;
var a = moment(formattedDate);
var b
var timeDiff
var cLength= confDetails.children.filter(function(item){return item.notCreate == false})
//添加年份筛选
if(cLength && cLength.length !== 0){
var filteredRes = res.filter(function (v) {
b = moment(v.surend);
timeDiff = a.diff(b, 'years', true);
return cLength.some(function(range) {
return _.inRange(timeDiff, range.minVal, range.maxVal);
});
});
res = filteredRes
}else{
return;
}
if (res &&res.length>0) {
var timehtml=""
var isChoose = false
$.each(res,function(i,v){
if(v.guid === id){
isChoose = true
}else{
isChoose = false
}
timehtml +=` <tr style="height:30px" ${isChoose == true ? "class=measurTimeactive" : ""}><td style="width: 110px;">水深复核时间:</td><td>${v.surend ? moment(v.surend).format('YYYY-MM-DD'):""}</td><td style="width: 70px;"> <a class="layui-btn layui-btn-xs mtp_locate" guid=${v.guid}>${$.cookie("currentLanguage")=="cn"?"高亮":"hightLight"}</a></td> </tr>`
})
var str = `<style>
#measuringTimePlane_table td{
text-align: center;
}
</style>
<div style="padding:5px 0;font-size: 15px;" id="MeasuringTimePlanePage">
<table style="width: 100%;height:100%;table-layout: fixed;" id="measuringTimePlane_table" borderColor="#dddddd" cellSpacing="0" cellPadding="0" border="1">
<tbody>
${timehtml}
</tbody>
</table>
</div>`;
layer.close(MAPutils.DialogIndex);
debounce(function () {
MAPutils.DialogIndex = layer.open({
type: 1,
shade: 0,
shift: MAPutils.getLayerAnim(),
title: "<B i18n-text='tc_MeasuringTimePlane'>测量时间</B>",
// area: ['500px', '300px'],
offset: offset,
content: str,
maxmin: true,
resize: false,
success: function (layero, index) {
I18n.language($(".lang-selected").attr('lang'))
$(layero).css('height', '')
$(layero).find(".mtp_locate").on("click",function(e){
var element = $(this);
var parentDom = element.parent().parent();
var guid= element.attr("guid");
//点击添加上高亮样式
if(!parentDom.hasClass("measurTimeactive")){
parentDom.siblings().removeClass("measurTimeactive").end().addClass("measurTimeactive");
}
MAPutils.redrawMeasuringTimePlane(guid)
})
}
})
})
} else {
layer.msg("暂无数据", { icon: 5, anim: 6 });
}
});
},3.其它
以上调用到的方法，如下：
/**
* 重新绘制
*/
redrawMeasuringTimePlane: function (_key) {
var rootLayer = MAPutils.getLayerByTitle("测量时间");
rootLayer.getSource().clear();
var oldDataList = MAPutils.measureTimeAllData
var newDataList = oldDataList.filter(function (item,index) {
return item.guid !== _key
})
let myFilterData = oldDataList.filter(item => item.guid == _key);
$.each(newDataList, function (index, item) {
if(item.isBoolean == true) {
var v = item
MAPutils.drawVectorFeature(rootLayer, {
geom: v.geom,
id: v.guid,
kv: {
// markType: "shoalWaterLayer",
data: v,
layerType: 'MeasuringTimePlaneLayer'
},
style: new ol.style.Style({
fill: new ol.style.Fill({
color: [200, 200, 200,0.4]
}),
stroke: new ol.style.Stroke({
color: v.color,
width:3
}),
}),
});
}
});
$.each(myFilterData, function (index, item) {
if(item.isBoolean == true) {
var v = item
MAPutils.drawVectorFeature(rootLayer, {
geom: v.geom,
id: v.guid,
kv: {
// markType: "shoalWaterLayer",
data: v,
layerType: 'MeasuringTimePlaneLayer'
},
style: new ol.style.Style({
fill: new ol.style.Fill({
color: [78, 117, 227,0.6]
}),
stroke: new ol.style.Stroke({
color: [78, 117, 227],
width: 3
}),
}),
});
}
});
},测量时间
测量时间功能的录屏展示，如上
