場景

Vue+Openlayer使用Draw實現互動式繪製線段：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121287934

Vue+Openlayer使用Draw實現互動式繪製多邊形並獲取面積:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121300723

如果需要將繪製點、線、面整合在一個頁面中並且可以實現切換畫筆樣式。

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

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,//畫筆style
                currentTool: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,Circle
                        self.onAddInteraction('LineString')
                        self.currentTool = "LineString";
                        break;
                    case '3':
                        //呼叫繪圖工具並傳遞型別為線，其他型別有Point,LineString,Polygon,Circle
                        self.onAddInteraction('Polygon')
                        self.currentTool = "Polygon";
                        break;
                    case '4':
                        //呼叫繪圖工具並傳遞型別為線，其他型別有Point,LineString,Polygon,Circle
                        self.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;
                }                          
            },

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