場景

Vue+Openlayer使用Draw實現交互式繪制線段：

Vue+Openlayer使用Draw實現交互式繪制線段_霸道流氓氣質的博客-CSDN博客

Vue+Openlayer使用Draw實現交互式繪制多邊形并獲取面積:

Vue+Openlayer使用Draw實現交互式繪制多邊形并獲取面積_霸道流氓氣質的博客-CSDN博客

如果需要將繪制點、線、面集成在一個頁面中并且可以實現切換畫筆樣式。

?

注：

博客：
霸道流氓氣質的博客_CSDN博客-C#,架構之路,SpringBoot領域博主
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

1、頁面上添加el-radio-group用來選擇切換畫筆

??????????? <el-radio-group v-model="radio" @change="toolChange"><el-radio? label="1">普通鼠標</el-radio><el-radio? label="2">繪制線</el-radio><el-radio? label="3">繪制區域</el-radio>?????<el-radio? label="4">繪制點</el-radio>?????</el-radio-group>

2、綁定的model值聲明

??????? data() {return {?????????radio: '1',selectedStyle:null,//畫筆stylecurrentTool:null,};

3、頁面mounted中初始化地圖時設置坐標的選中樣式等。

??????? methods: {????//初始化地圖init() {let self = this;// 獲取點擊地圖的坐標(選中樣式)self.selectedStyle = new Style({fill: new Fill({color: 'rgba(1, 210, 241, 0.2)'}),stroke: new Stroke({color: 'yellow',width: 4})});// 選擇線的工具類this.selectTool = new Select({multi: true,hitTolerance: 10, // 誤差style: this.selectedStyle // 選中要素的樣式})

4、改變畫筆的change事件

??????????? //改變畫筆toolChange(val){let self = this;//移除交互self.map.removeInteraction(self.selectTool);self.coordinate = []//清空交互的圖層self.drawLineLayer.getSource().clear()self.removeDraw();//添加交互self.map.addInteraction(self.selectTool)switch(val){????????????case '2'://調用繪圖工具并傳遞類型為線，其他類型有Point,LineString,Polygon,Circleself.onAddInteraction('LineString')self.currentTool = "LineString";break;case '3'://調用繪圖工具并傳遞類型為線，其他類型有Point,LineString,Polygon,Circleself.onAddInteraction('Polygon')self.currentTool = "Polygon";break;case '4'://調用繪圖工具并傳遞類型為線，其他類型有Point,LineString,Polygon,Circleself.onAddInteraction('Point')self.currentTool = "Point";break;}},

重新移除交互并清空圖層與點位數據存儲點，然后調用添加繪圖工具的方法并傳遞不同的參數類型，并將選中的畫筆類型記錄下來。

添加繪圖工具的方法實現

??????????? // 繪圖工具onAddInteraction(type) {let self = this//勾繪矢量圖形的類this.draw = new Draw({//source代表勾繪的要素屬于的數據集source: self.drawLineSource,//type 表示勾繪的要素包含的 geometry 類型type: type})//繪制結束時觸發的事件this.draw.on('drawend', function(e) {?????????????const geometry = e.feature.getGeometry()let pointArr = geometry.getCoordinates()debugger//限制只繪制一個多邊形self.removeDraw()switch(self.currentTool){????????????case 'LineString':self.pointArr = pointArr;//調用接口保存線let param = {pointList:self.pointArr}insertLineRequest(param).then((response) => {self.msgSuccess("新增成功");//刷新監測點數據self.getPointList();//成功之后刪除線self.drawLineLayer.getSource().clear()});break;case 'Polygon'://只獲取第一個多邊形的坐標???self.pointArr = pointArr[0];self.dialogVisible = true;break;case 'Point'://調用新增點的接口self.pointArr = pointArr;break;}????????????????????????????})self.map.addInteraction(this.draw)},

這樣就可以根據不同的畫筆類型在繪制結束時進行不同的業務處理

其中刪除draw的方法

??????????? //刪除交互removeDraw() {this.map.removeInteraction(this.draw)},

5、頁面上添加重新繪制按鈕，其點擊事件中

??????????? //重新繪制clear() {this.coordinate = []this.drawLineLayer.getSource().clear()//添加交互this.map.addInteraction(this.selectTool)switch(this.currentTool){????????????case 'LineString':this.onAddInteraction('LineString')break;case 'Polygon':this.onAddInteraction('Polygon')break;case 'Point':this.onAddInteraction('Point')break;}??????????????????????????},

根據當前選中的畫筆類型，初始化畫筆為對應的類型。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Vue+Openlayers+Draw实现画笔切换功能，切换画笔为点、线、面的全部內容，希望文章能夠幫你解決所遇到的問題。

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