代碼基于以下版本做修改獲得，因為公司的原因，并不是用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);}};

總結

以上是生活随笔為你收集整理的基于ol-plot的openlayers 5 的标绘地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。