由于项目之前使用的是ol4,所以这里主要是在ol4中如何实现高亮显示和点击
主要是使用ol.interaction.Select
首先要初始化,指定要高亮显示和选择的图层,然后添加到地图上,添加高亮显示和点击事件
//初始化高亮显示和选择工具
initSelTool : function() {
this.selTool = new ol.interaction.Select({//选择工具
condition : ol.events.condition.click,
style : function(fea, res) {
return this_.styleFunction(fea, res);
},
layers : [ this.clusterLyr ]
});
this.hovTool = new ol.interaction.Select({//高亮显示工具
condition : ol.events.condition.pointerMove,
style : function(fea, res) {
return this_.styleFunction(fea, res, true);
},
layers : [ this.clusterLyr ]
});
var this_ = this;
//聚集点高亮显示事件
this.hovTool.on('select', function(e) {//高亮显示回调函数
var alert = map.getOverlayById(this_.alertId);
if (e.selected.length > 0) {// 移入,相邻元素之间的滑动
this_.inHover = true;
if (alert) {
var ele = alert.element;
if (ele) {
$(ele).addClass("alert_none");//添加预警样式
}
}
var feature = e.selected[0];
var id = feature.getId();
this_.hoverFlt(feature);
}
if (e.deselected.length > 0) {// 移出,相邻元素之间的滑动
this_.inHover = false;
if (alert) {
var ele = alert.element;
if (ele) {
$(ele).removeClass("alert_none");//移除预警样式
}
}
var feature = e.deselected[0];
var id = feature.getId();
this_.disHoverFlt(id);
}
});
//聚集点选中后列表仅显示该聚集点数据
this.selTool.on('select', function(e) {
if (e.selected.length > 0) {
var feature = e.selected[0];
var feas = feature.get("features");
if (feas.length > 0) {
var data = [];
for (var i = 0; i < feas.length; i+&#