openlayers 实现鼠标移动要矢量要素上高亮显示

一、鼠标移动到矢量要素上实现高亮显示的思路

（1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。

（2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变量，并且改变选种要素的样式，当鼠标移除后利用浅拷贝的对象改变样式，间接进行要素样式的恢复

二、实现高亮

1、建立高亮图层实现的代码

（1）高亮样式设置

var hightStyle = new ol.style.Style({
			 //填充色
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#FF0000',
                width: 5
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
		}) 

（2） 默认样式的设置

 var lineDedalut = new ol.style.Style({
			 //填充色
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            //边线颜色
            stroke: new ol.style.Stroke({
                color: '#1E90FF',
                width: 5
            }),
            //形状
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
		})

（3） 建立高亮图层

	 //高亮风格的图层：
	var featureOverlay = new ol.layer.Vector({
		source: new ol.source.Vector(),
		style: hightStyle
	});
	// 设置图层名称用于点击查询显示
	featureOverlay.layerId  ="lines" 
	map.addLayer(featureOverlay)
	// 设置高亮要素变量
	var highlight;

（4） 鼠标移动进行要素高亮显示

map.on('pointermove', function(evt) {
	   var features = map.forEachFeatureAtPixel(evt.pixel, function(feature,layer) {
		 // console.log(feature);
		 return {
			feature:feature,
			layer:layer
		 };
	   });
		 //在图层外面的时候，feature和highlight都是null，不执行
	   //如果有feature没有hightlight，就添加feature到图层，并且给highlight赋值。
	   //如果feature发生改变，就移除highlight并添加新的feature到图层，然后给highlight改变值。
       if(features&&features.layer.layerId == "lines"){
		    if (features.feature !== highlight) {
		    		 if (highlight) {
		    		   featureOverlay.getSource().removeFeature(highlight);
		    		 }
		    		 if (features.feature) {
		    		   featureOverlay.getSource().addFeature(features.feature);
		    		 }
		    		 highlight = features.feature;
		    }
	   }
	})

（5） 效果图

2、利用js浅拷贝原理实现要素高亮

（1）高亮样式（同上）

（2）默认样式（同上）

（3）建立要素变量来存储高亮要素

	var highFeature = null;

（4） 鼠标移入进行高亮显示

map.on('pointermove', function(evt) {
	   var features = map.forEachFeatureAtPixel(evt.pixel, function(feature,layer) {
		 // console.log(feature);
		 return {
			feature:feature,
			layer:layer
		 };
	   });
	   
	   if(features){
		   highFeature = features.feature;
		   features.feature.setStyle(hightStyle)
	   }else{
		   if(highFeature)
		   highFeature.setStyle(lineDedalut)
	   }
	})

（5）效果图