场景

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

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

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

Spring Boot 2中的功能切换
无论您是否喜欢,软件开发都是一项协作活动. 整合工作一直被妖魔化,并被视为必不可少的邪恶. 有几种方法可以解决有效集成的挑战. 功能切换开关属于该组. 在本文中,您将在实践中看到如何在Spring B ...
macf键与功能键切换_功能切换（功能开关或功能标志）与功能分支
macf键与功能键切换功能分支如果使用分支,则表示不进行持续集成/部署/交付 ! 您可能具有很好的单元测试代码覆盖率 ,可能正在执行TDD ,可能已经以BDD格式编写了功能和集成测试,并且可能在 ...
Vue+Openlayers+el-radio实现切换地图显示
场景 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏: Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏_BADAO_LIUMANG_ ...
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
WebGIS实战：Vue+Openlayers实现网络地图的加载与切换
目录前言 1.效果图 2.实现步骤 3.下一步计划相关Web GIS实战信息: 上一篇博客:WebGIS实战:Web GIS开发环境配置下一篇博客:WebGIS实战:Vue+Openlayers ...
vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
个人建议：设置Alt+S快捷键来控制VSCode自动保存切换功能
经常要修改配置文件或者组件Vue,但是自动保存如果设置了就会导致还没输入完成一个完整代码行,就自动格式化(当时这种情况真的想骂人),但平时编辑Vue页面文件又不想每次都去Ctrl+S保存(毕竟键盘死的 ...

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

场景

实现

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

最新文章

热门文章