Vue+Openlayers+Draw实现画笔切换功能，切换画笔为点、线、面

场景

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',
                             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;
                }                          
            },

根据当前选中的画笔类型，初始化画笔为对应的类型。