基于ol-plot的openlayers 5 的标绘地图

代码基于以下版本做修改获得，因为公司的原因，并不是用vue.js开发，用的是jquery，别问为什么，问就是公司技术不肯革新，公司小，没成本和人力做新技术的引进和研发。
https://github.com/sakitam-fdd/ol-plot/tree/master
https://sakitam-fdd.github.io/ol-plot/
据说一下版本支持ol6
https://github.com/worlddai/plot_ol

因为原本支持的是ol3跟ol4，然后再ol5版本存在一些问题，具体的问题在于。

1.this.map is not defined

ol4中map.on 允许你传入对象，该对象对应this

但是在ol5中 map.on 取消了this的指向修改，即this指的是map对象

同理map.un也存在这样的问题
所以在ol5下源码中的 this.map.on 绑定的mapFirstClickHandler 方法中调用this.map 或提示map不存在


解决办法是：

function changeMapOnThisTo(map, listener, func, thisobj) {
    if (map.on && "function" == typeof map.on && func && listener) {
        var r = function (e) {
            func.call(thisobj || null, e)
        };
        return map.on(listener, r), r
    }
}


function removeMapInteraction(map, listener, func, thisobj) {
    map.un && "function" == typeof map.un && func && listener && map.un(listener, func)
}

利用changeMapOnThisTo，以及removeMapInteraction替换原先的代码中的map.on 和map.un动作例如

this._ls_mapFirstClickHandler=changeMapOnThisTo(this.map,'click', this.mapFirstClickHandler, this);
removeMapInteraction(this.map,'click',this._ls_mapFirstClickHandler);

2.控制点选中不了，导致无法修改控制点的位置

造成这个的原因是因为ol-plot图层先加载，我自己又通过flash-marker.js 加载闪烁点，导致闪烁点的canvas 层级在ol-plot控制点的overlayer之上，导致无法选中控制点。因为有个需求是允许通过ol-plot标绘的点变成闪烁点，所以作死修改了ol-plot的代码，把flashMarker也加到了ol-plot对象中，于是canvas怎么都比控制点所对应的overlayer层级高，一怒之下直接调整ol.css

修改.ol-overlay-container 添加z-index:100,别问为什么100，问就是之前有些图层zIndex属性设置了50多，担心后续会出现更大的zIndex属性，于是就索性调整成100.

3. 拖动控制点到某个div上时，松开了鼠标，然后怎么都不能让控制点mousemove动作结束

修改PlotEdit.prototype.controlPointMouseDownHandler代码为

PlotEdit.prototype.controlPointMouseDownHandler = function controlPointMouseDownHandler(e) {
            this.activeControlPointId = e.target.id;
            try{
                removeMapInteraction(this.map,'pointermove', this._ls_controlPointMouseMoveHandler);
            }catch(e){}
            this._ls_controlPointMouseMoveHandler = changeMapOnThisTo(this.map,'pointermove', this.controlPointMouseMoveHandler, this);
            on(this.mapViewport, 'mouseup', this.controlPointMouseUpHandler.bind(this));
        };

加了 removeMapInteraction(this.map,‘pointermove’, this._ls_controlPointMouseMoveHandler);意思是在这个方法被调用时，不管之前mousemove有没有结束，我都强制先结束，再执行后续的方法。

现在可以开心的用ol-plot做标绘地图了。
调用

let zxplot = new olPlot(map, {
        zoomToExtent: true
    });//创建对象
 zxplot.plotDraw.active(“要绘制的类型”);//详细的可以参考github上的博客
 zxplot.plotDraw.on('drawEnd', function (evt) {
            console.log(this);
            console.log(evt);
        }, this)
zxplot.plotEdit.activate(feature);//初始化编辑
zxplot.plotEdit.deactivate();//结束编辑
zxplot.plotUtils.getFeatures();//获取全部的绘制元素，返回geojson格式的对象
zxplot.plotUtils.addFeatures(geojsonObj);//将getFeatures的对象传入，即可展示标绘的数据
zxplot.plotUtils.removeAllFeatures();//移除全部绘制的对象
zxplot.plotUtils.removeFeature(currentPlotFeature);//删除单个对象，这个是自己写的，代码如下。
PlotUtils.prototype.removeFeature = function removeFeature(feature,overlay) {

            if(!!feature){
                var _this2 = this;
                var layer = this.getLayerByLayerName(this.layerName);
                if (layer) {
                    var source = layer.getSource();
                    source.removeFeature(feature);
                }
            }

            if(!!overlay){
                this.map.removeOverlay(overlay);
            }

        };