场景

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实现画笔切换功能，切换画笔为点、线、面的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。