openlayers高亮显示和点击（包含去除默认高亮显示样式）

由于项目之前使用的是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++) {
						var fea = feas[i];
						var obj = fea.getProperties();
						delete obj.geometry;
						data.push(obj);
					}
					this_.setBoxData({
						rows : data,
						total : data.length
					})

				} else {
					if (this.box) {
						this.box.close();
					}
				}
			}
			if (e.deselected.length > 0) {//不选中事件
				/*this_.inHover = true;*/
				var feature = e.deselected[0];
				var id = feature.getId();
				this_.disHoverFlt(id);
			}
		});
		map.addInteraction(this_.hovTool);
		map.addInteraction(this_.selTool);
		/*map.addInteraction(selTool);*/
	},
	
	/**
	 * 
	 * 功能：高亮显示移除时hover信息框也移除
	 * 参数：@param {string}  id feature的id
	 * @returns
	 */
	disHoverFlt : function(id) {
		map.getViewport().style.cursor = "default";
		$(".ncp_poi").remove();
		if (map.getOverlayById("click_" + id) != undefined) {
			var overlay = map.getOverlayById("click_" + id);
			map.removeOverlay(overlay);
		}
	},
	/**
	 * 
	 * 功能：高亮显示时hover信息框显示航班的基本信息
	 * 参数：@param {feature}  feature 航班要素
	 * @returns
	 */
	hoverFlt : function(feature) {
		var id = feature.getId();
		id = "ncp_hover";
		if (map.getOverlayById(id) != undefined) {
			// 改航班在点击之前hover显示框存在时，则只更新位置
			var overlay = map.getOverlayById(id);
			overlay.setPosition(ol.extent.getCenter(feature.getGeometry().getExtent()));
			overlay.setOffset([ 0, -10 ]);
		} else {
			var url = "", check = "--"
			var ill = feature.get("ill");
			if (this.types["ill"].checked && ill && (ill > 0)) {
				url = this.imgurl + '/' + this.types["ill"].rstimg;
				checkLabel = "有新冠肺炎"
			} else if (this.types["ill"].checked || this.types["ok"].checked || this.types["cold"].checked) {
				var isplace = feature.get('isplace', isplace);
				var cold = feature.get("cold");
				if (cold && cold > 0) {
					url = this.imgurl + '/' + this.types["cold"].rstimg;
					checkLabel = "有感冒人员"
				} else if (isplace > 0) {
					url = this.imgurl + '/' + this.otherTypes["isplace"].rstimg;
					checkLabel = "有重点地区人员"
				} else {
					url = this.imgurl + '/' + this.types["ok"].rstimg;
					checkLabel = "无风险"
				}
			}
			/* var url=this.imgurl+'/'+this.types[type].rstimg;*/
			var str2 = '
' + '' + '' + '' + ''
					+ '' + '' + ''
					+ '' + '' + '' + '' + '
  
' + checkLabel + '
'
					+ '
' + '' + '';

			var str3 = "";

			var isplace = feature.get("isplace") ? feature.get("isplace") : 0;
			var sum = feature.get("sum") ? feature.get("sum") : 0;
			str3 += '';
			str3 += '' + '';
			str3 += '';
			str3 += '';
			str3 += '' + '';
			str3 += '';
			for ( var type in this.types) {
				str3 += '';
				str3 += '';
				if (this.types[type].checked) {
					var val = feature.get(type) ? feature.get(type) : 0;
					str3 += '';
				} else {
					str3 += '';
				}
				str3 += '';
			}

			str2 += str3 + '' + '
总检测
' + sum + '
重点地区
' + isplace + '
' + this.types[type].label + '
' + val + '
--
' + '
';
			var html = '
' + '
' + '
' + ''
					+ '
检测结果
' + '
' + '
' + '' + '' + '' + '' + '' + '' + '
' + '
'
					+ str2 + '
' + '
' + '' + '' + '' + '' + '' + ''
					+ '' + '
' + '
'
			'
';
			var pos = feature.getGeometry().getCoordinates();
			var scrPt = map.getPixelFromCoordinate(pos);
			labelDiv = $("
").addClass("ncp_poi").css({
				"top" : scrPt[1] + "px",
				"left" : scrPt[0] + 6 + 2 + "px"
			});
			labelDiv.html(html);
			map.getViewport().style.cursor = "pointer";
			$(".ncp_poi").remove();
			map.getViewport().appendChild(labelDiv[0]);
		}
	},
	

ol.interaction.Select 默认有选中的样式，网上上将style：false可以去除默认的圆点样式（针对点状图层），但实际上无效，可以在其select的监听事件中去除当前选中的要素 this.getFeatures().clear()，如下图红色标记