关于Openlayers中自定义鼠标的移出事件

才来新公司没几天，公司是做WebGis开发的，来公司之后学习了OpenLayers，在遇到自定义事件的时候，发现只有鼠标移入的自定义事件。
比如下面这样，之前的黄色的圆下面是红色的圆，鼠标放进去之后是编程绿色的圆，这里用的是鼠标移入的自定义事件，但是鼠标移出之后再变回原来的事件却没有。![鼠标放进去的时候圆变成绿色](https://img-blog.csdnimg.cn/20181203151053178.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmdsb25nenVv,size_16,color_FFFFFF,t_70)
在网上查了很多，也没有找到相关的满意的答案，后怒查API，终于给我找到了，下面是鼠标移出之后绿色的圆又变回了红色的圆

下面不废话直接上代码：
var feature1 = new ol.Feature({
geometry:new ol.geom.Point([104,30])
});

feature1.setStyle(new ol.style.Style({
	image:new ol.style.Circle({
		radius:100,
		fill:new ol.style.Fill({
			color:'red'	
		})	
	})
}));

var feature2 = new ol.Feature({
	geometry:new ol.geom.Point([5000104,5000030])
});

feature2.setStyle(new ol.style.Style({
	image:new ol.style.Circle({
		radius:100,
		fill:new ol.style.Fill({
			color:'yellow'	
		})
	})
}));


var map = new ol.Map({
	interactions:ol.interaction.defaults({
		doubleClickZoom:false,
		mouseWheelZoom:false,
		shiftDragZoom:false
	}),
	layers:[
		new ol.layer.Tile({
			source:new ol.source.OSM()	
		}),
		
		new ol.layer.Vector({
			source:new ol.source.Vector({
				features:[feature1,feature2]
			})
		})
	],	
	
	view:new ol.View({
		//center:[104,30],
		//projection:'EPSG:4326',
		center:[104,30],
		zoom:2
	}),
	target:'map'
});

  map.on('pointermove', function(event){
        if( map.hasFeatureAtPixel(event.pixel)){
			//如果相交，返回相交的图层，并且触发方法
		map.forEachFeatureAtPixel(event.pixel, function(feature){
          // 为移动到的feature发送自定义的mousemove消息
		  feature.dispatchEvent({type: 'mousein', event: event});
     		});
		}else{
			feature1.setStyle(new ol.style.Style({
				image:new ol.style.Circle({
					radius:100,
					fill:new ol.style.Fill({
						color:'red'
					})	
				})	
			}))	
		}
  });
  //为feature1注册自定义的监听事件
  feature1.on('mousein',function(event){
	  this.setStyle(new ol.style.Style({
		image:new ol.style.Circle({
			radius:100,
			fill:new ol.style.Fill({
				color:'green'	
			})
		})	  
	}))
});
不难发现，在这里 if( map.hasFeatureAtPixel(event.pixel)){
			//如果相交，返回相交的图层，并且触发方法
	map.forEachFeatureAtPixel(event.pixel, function(feature)
这两句代码起了很重要的作用，翻阅API我发现，hasFeatureAtPixel这个方法是检测要素是否与视口上的像素相交，之后用forEachLayerAtPixel这个方法检测视口上像素的颜色值的图层，并对每个匹配图层执行回调。之后再派发自定义事件函数，这样就实现了鼠标放入是圆变色，鼠标移出使圆变回原来的颜色的自定义事件，当然这里的鼠标移动回去因为里面设置的style和之前的一样，如果设置成其他的颜色就就变成你自己自定义的颜色。
新手第一次发帖，如有错误恳请大家指正，欢迎大家的批评指正。

转载自：https://blog.csdn.net/longlongzuo/article/details/84766523