193：vue+openlayers 多边形的绘制，编辑feature，删除所选feature和清空功能

已于 2024-05-09 14:09:20 修改
阅读量1.6k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # openlayers综合教程300+ 文章标签： openlayers 元素 openlayers示例 大剑师 openlayers openlayers教程
于 2023-01-04 18:29:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/128552537
本文由大剑师兰特撰写，介绍如何在Vue应用中结合OpenLayers实现多边形的绘制、编辑和删除功能。通过示例代码，开发者可以在2分钟内运行并体验效果。此外，文章还提供了相关配置和源代码供参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 193个示例

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+openlayer中使用select来选择feature元素，选中的元素可以编辑，也可以删除，同时可以删除整个图层的source内容。

直接复制下面的 vue+openlayers源代码，操作2分钟即可运行实现效果； 注意如果OpenStreetMap无法加载，请加载其他来练习

三、配置方式

了解本专栏 订阅专栏 解锁全文
Vue和OpenLayers实现多边形的绘制、编辑、删除和清空功能
laugh666的博客
08-15 706
我们使用Draw交互工具来实现多边形的绘制，Modify交互工具来实现多边形的编辑，Select交互工具来实现多边形的选择，Snap交互工具来实现多边形的捕捉。在本文中，我们将介绍如何使用Vue和OpenLayers库来实现多边形的绘制、编辑、删除和清空功能。现在，我们已经完成了使用Vue和OpenLayers实现多边形的绘制、编辑、删除和清空功能的代码编写。我们还添加了一个删除按钮和一个清空按钮的点击事件监听器，以实现删除所选多边形和清空所有多边形的功能。希望本文对你有所帮助！
192：vue+openlayers: 选择feature，弹窗操作，删除所选feature
大剑师兰特的GIS世界
01-04 1300
第192个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选择的过程中弹窗出现删除和关闭按钮，删除的内容是selected的feature，关闭的是功能浮窗。
在 OpenLayers 中清除数据
astak3的博客
10-31 5209
在OpenLayers中，各个概念的顺序是map->layer->source->feature->geometry->你要操作layer的话是在map上，操作source是在layer上，依次类推当数据变化时，就需要将之前的数据清除掉在OpenLayers方法是在source上，所以先要获取到source在react中，你可以将source保存为状态，就可以在页面中任意位置使用source，就不需要再通过方式获取方法是在map上，使用比较简单在react中要注意的，layer也要保存到状态中，否则。
049：vue+openlayers 鼠标pointermove显示城市名片
大剑师兰特的GIS世界
08-14 2418
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
Openlayers的交互功能（五）——删除图斑
m0_46410110的博客
09-19 909
本文对图斑的删除进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
199：vue+openlayers 添加删除修改feature信息，双向不同颜色指示互动
大剑师兰特的GIS世界
01-11 873
第199个本示例的目的是介绍如何在vue+openlayers项目中绘制多边形，每绘制一个，左侧输出一个feature指示标志，双向颜色互动指示。
200：vue+openlayers 添加删除多边形，modify feature，双向互动颜色显示
大剑师兰特的GIS世界
01-12 885
第200个本示例的目的是介绍如何在vue+openlayers项目中添加删除多边形，每绘制一个，左侧列表出一个信息。hover左侧文字，右边地图上红色显示图形，点击选中右侧地图上某feature，变成蓝色高亮，同时左侧也会蓝色显示，做到双向互动。高亮显示某feature，点击编辑所选，可以做图形的变化。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-26 620
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
201：vue+openlayers 加载geojson文件形成围栏，可添加、修改、删除feature，导出geojson
大剑师兰特的GIS世界
01-12 1313
第201个本示例的目的是介绍演示如何在vue+openlayers中实现围栏列表与图中feature双向互动功能。利用GeoJSON().readFeatures获得到features，通过转换在地图上形成图形，通过新增、修改、删除feature，可以更改整体的features关系。点击导出可以将修改后的features形成geojson文件导出来。
OpenLayers Layer删除Feature
Gary Leong
11-22 9484
var copyLayer = VectorLayer[i]; copyLayer.getSource().removeFeature(feature); map.removeLayer(VectorLayer[i]); delete (VectorLayer[i]); VectorLayer[i] = copyLayer; map.addLayer(VectorLayer[i]); map.up...
Geoserver+openlayer+postGis要素增删改查
02-18
此代码主要是编写了通过geoServer发布数据服务，postGis作为空间数据的数据库，通过openlayer完成几个数据的增加，修改，删除，查询，包括属性查询，并且提供元数据测试。
openlayer怎么删除固定的feature
Littlegirlha的博客
10-23 456
删除固定feature的方法, 删除多个Feature可以循环遍历这个方法。
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
xcymorningsun的专栏
11-30 2918
目录 一、引言 二、WFS要素删除实现 三、WFS要素删除原理 1、请求xml 2、postman使用 3、要素删除 4、返回xml 四、openlayers中feature的坐标信息获取 五、总结   一、引言          前两篇文章介绍了以openlayers为工具通过WFS添加和修改要素，最后我们将介绍如何删除一个要素，修改的话比较简单，主要是id对应就可以。...
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
qq_37967853的博客
02-10 4174
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
FeatureCollection中Feature的某个属性剔除
最新发布
Quick_Boy_crunch的博客
05-27 271
最近这段时间为了构建一个好的样本集(FeatureCollection)，反反复复加各种特征，有时候不想要了某个特征，怎么办呢？
vue3 + openlayers---绘制Feature（Point）
QDxin_xyz的博客
05-17 228
【代码】vue3 + openlayers---绘制Feature（Point）
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
非科班Java出身GISer的博客
06-05 4993
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
Vue+Openlayers实现在地图上绘制多边形Polygon,坐标数组三层赋值，否则不显示
BADAO_LIUMANG_QIZHI的博客
04-01 5347
场景 Vue+Openlayers实现地图上绘制线： Vue+Openlayers实现地图上绘制线_霸道流氓气质的博客-优快云博客 上面实现添加点和线，怎么实现添加面/多边形Polygon 注： 博客：霸道流氓气质的博客_优快云博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、引入所需模块 //导入基本模块 import "ol/ol.css"; import Map from "ol/Map.
OpenLayers开发：增加删除控件
u013925989的博客
07-14 2351
openlayers简单使用，感谢丁少
049:vue+openlayers鼠标pointermove显示城市名片(示例代码)
06-06
Vue OpenLayers 是一种基于 Vue.js 的开源地图库，结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中，鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中，我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码： ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里，我们为指针移动事件添加了一个监听器，该监听器会调用 displayCityCard 方法。 接下来，我们需要实现 displayCityCard 方法，该方法会在指针移动时显示城市名片。代码如下： ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里，我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素，则从中取出城市名，并将其赋值给 city。同时，我们将 showCityCard 属性设置为 true，以显示城市名片。如果没有要素，则将 showCityCard 设置为 false，以隐藏城市名片。 最后，我们需要在模板中添加一个 div 元素，用于显示城市名片： ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里，我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true，则显示该元素，并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数，我们可以更加便捷地在地图上查看城市信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值