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

Dear 丶 2023-09-30 12:23 11阅读 0赞

## 场景 ##

Vue+Openlayer使用Draw实现交互式绘制线段：

[Vue+Openlayer使用Draw实现交互式绘制线段\_霸道流氓气质的博客-CSDN博客][Vue_Openlayer_Draw_-CSDN]

Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积:

[Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积\_霸道流氓气质的博客-CSDN博客][Vue_Openlayer_Draw_-CSDN 1]

如果需要将绘制点、线、面集成在一个页面中并且可以实现切换画笔样式。

![2bcd593c08bd44bfbc5b72560e2b473c.gif][]

注：

博客：  
[霸道流氓气质的博客\_CSDN博客-C\#,架构之路,SpringBoot领域博主][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,//画笔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;
                    }                          
                },

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

[Vue_Openlayer_Draw_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121287934
[Vue_Openlayer_Draw_-CSDN 1]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121300723
[2bcd593c08bd44bfbc5b72560e2b473c.gif]: https://img-blog.csdnimg.cn/2bcd593c08bd44bfbc5b72560e2b473c.gif
[CSDN_-C_SpringBoot]: https://blog.csdn.net/badao_liumang_qizhi