openlayers地图显示中心图标

openlayers地图显示中心位置，类似微信发送位置

地图使用中，显示中心位置很常见，有时候我们需要拖动地图调整地图中心位置怎么做呢？

误区

说到中心位置，第一时间想到创建点，地图拖动时移除原来的点，根据拖动后的中心位置添加新的点，心里感觉有点不符合常理，但不跳一下怎么知道是不是坑呢？
直接上代码

var currentMarker,currentFeature
// 创建地图
var map=new ol.Map({
	layers: that.baseLayer,
	view:new ol.View({center:[106.20,39.56],zoom:8,minZoom:6,maxZoom:12}),target:'map'});
	})
	let source = new ol.source.Vector();
	let currentMarker = new ol.layer.Vector({
	  source:source,
	  zIndex:9
	});
	map.addLayer(currentMarker);
//地图添加拖动事件
map.on("pointerdrag", function(e) {
     var center = that.map.getView().getCenter();
     //删除当前位置feature
     if(currentFeature){
       currentMarker.getSource().removeFeature(currentFeature)
      };
      // 重新创建feature
     currentFeature = new ol.Feature({
        geometry: new ol.geom.Point(center),
      });
      currentFeature.setStyle(new ol.style.Style({
        image: new ol.style.Icon({
        scale: 1,
        src: '../image/currentPoint.png'
        })
       }));
       currentMarker.getSource().addFeature(currentFeature)
});

结果拖动地图时中心图标不显示，拖动结束后，中心图标显示，类似僵尸跳的感觉，毕竟是坑么，不跳没法走啊，怎么办呢？秉着一切以客户就是上帝的原则，继续找问题，最后发现开始走错方向了，使用Overlay覆盖层会不会好一些呢？然后再开始避坑环节。

使用Overlay拖动地图，中心图标随地图移动而移动

废话不多说，直接上代码，创建map代码同上，只换地图触发事件

//地图添加拖动事件
map.on("pointerdrag", function(e) {
	var center = that.map.getView().getCenter();
	var popup  = new ol.Overlay({
		//获取id为popup的element，需要提前设置好，可以是图标或文字
	   element: document.getElementById('popup'),
	   offset: [0, -15],
	   positioning: 'bottom-center'
	 });
	 popup.setPosition(center);
	 that.map.addOverlay(popup);
 }

这时候拖动地图，会神奇的发现，中心点随着拖动地图平缓的移动，没有出现僵尸跳，不过这样每次拖动都创建一个overlay感觉还是不妥当。不过体验效果还可以，这个小坑以后再处理吧。

总结

虽然废话不多说，但也没少说，主要就是使用Overlay替换layer。感谢大家阅读，如有问题欢迎指正。