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

Vue与OpenLayers结合：多边形绘制与编辑
已于 2024-05-09 14:09:20 修改
阅读量1.7k 收藏 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.csdn.net/cuclife/article/details/128552537
本文由大剑师兰特撰写，介绍如何在Vue应用中结合OpenLayers实现多边形的绘制、编辑和删除功能。通过示例代码，开发者可以在2分钟内运行并体验效果。此外，文章还提供了相关配置和源代码供参考。

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

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

文章目录

一、示例效果图

二、示例简介

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

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

三、配置方式

1）查看基础设置：https://xiaozhuanlan.com/topic/1378924560
或者同样查看：https://blog.csdn.net/cuclife/article/details/126195754
2）将上述的源代码，粘贴到src/views/Home.vue中，npm run serve 运行即可。

四、示例源代码（共147行）
了解本专栏 订阅专栏 解锁全文
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-26 770
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
Vue和OpenLayers实现多边形的绘制、编辑、删除和清空功能
laugh666的博客
08-15 745
我们使用Draw交互工具来实现多边形的绘制，Modify交互工具来实现多边形的编辑，Select交互工具来实现多边形的选择，Snap交互工具来实现多边形的捕捉。在本文中，我们将介绍如何使用Vue和OpenLayers库来实现多边形的绘制、编辑、删除和清空功能。现在，我们已经完成了使用Vue和OpenLayers实现多边形的绘制、编辑、删除和清空功能的代码编写。我们还添加了一个删除按钮和一个清空按钮的点击事件监听器，以实现删除所选多边形和清空所有多边形的功能。希望本文对你有所帮助！
178.在vue3中使用OpenLayers实现删除选中的feature
最新发布
小彭的博客
10-14 218
摘要：本文介绍了在Vue3+OpenLayers项目中实现地图要素删除功能的方法。通过Select交互选择要素，使用removeFeature()方法删除选中的矢量要素，并添加确认提示防止误操作。文章包含完整代码示例，核心原理分析，常见问题解答以及扩展思路，适合直接应用于生产项目或作为学习参考。技术栈采用Vue3+CompositionAPI、OpenLayers v10+和ElementPlus，通过GeoJSON格式数据进行演示。
192：vue+openlayers: 选择feature，弹窗操作，删除所选feature
大剑师兰特的GIS世界
01-04 1351
第192个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选择的过程中弹窗出现删除和关闭按钮，删除的内容是selected的feature，关闭的是功能浮窗。
使用Vue和OpenLayers绘制各种图形并获取要素信息的JavaScript
ByteZenith的博客
09-19 198
在本篇文章中，我们将介绍如何使用Vue和OpenLayers库来绘制各种图形并获取要素信息。我们将使用JavaScript编写代码，并结合实例来说明每个步骤。让我们开始吧！
在 OpenLayers 中清除数据
astak3的博客
10-31 5364
在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 2665
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
qq_37967853的博客
02-10 4313
openlayers中根据id获取指定layer并删除该layer中的指定的feature要素
199：vue+openlayers 添加删除修改feature信息，双向不同颜色指示互动
大剑师兰特的GIS世界
01-11 1020
第199个本示例的目的是介绍如何在vue+openlayers项目中绘制多边形，每绘制一个，左侧输出一个feature指示标志，双向颜色互动指示。
200：vue+openlayers 添加删除多边形，modify feature，双向互动颜色显示
大剑师兰特的GIS世界
01-12 941
第200个本示例的目的是介绍如何在vue+openlayers项目中添加删除多边形，每绘制一个，左侧列表出一个信息。hover左侧文字，右边地图上红色显示图形，点击选中右侧地图上某feature，变成蓝色高亮，同时左侧也会蓝色显示，做到双向互动。高亮显示某feature，点击编辑所选，可以做图形的变化。
WebGL--vue+openlayers实现绘制多边形并且计算出多边形内的物体数量
Yan9_9的博客
12-09 322
上面用了两种方法来计算点是否在多边形内。
Geoserver+openlayer+postGis要素增删改查
02-18
此代码主要是编写了通过geoServer发布数据服务，postGis作为空间数据的数据库，通过openlayer完成几个数据的增加，修改，删除，查询，包括属性查询，并且提供元数据测试。
Openlayers的交互功能（五）——删除图斑
m0_46410110的博客
09-19 1019
本文对图斑的删除进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
OpenLayers Layer删除Feature
Gary Leong
11-22 9535
var copyLayer = VectorLayer[i]; copyLayer.getSource().removeFeature(feature); map.removeLayer(VectorLayer[i]); delete (VectorLayer[i]); VectorLayer[i] = copyLayer; map.addLayer(VectorLayer[i]); map.up...
openlayer怎么删除固定的feature
Littlegirlha的博客
10-23 530
删除固定feature的方法, 删除多个Feature可以循环遍历这个方法。
开源GIS（十五）——openlayers通过geoserver中WFS删除要素
xcymorningsun的专栏
11-30 2955
目录 一、引言 二、WFS要素删除实现 三、WFS要素删除原理 1、请求xml 2、postman使用 3、要素删除 4、返回xml 四、openlayers中feature的坐标信息获取 五、总结   一、引言          前两篇文章介绍了以openlayers为工具通过WFS添加和修改要素，最后我们将介绍如何删除一个要素，修改的话比较简单，主要是id对应就可以。...
FeatureCollection中Feature的某个属性剔除
Quick_Boy_crunch的博客
05-27 335
最近这段时间为了构建一个好的样本集(FeatureCollection)，反反复复加各种特征，有时候不想要了某个特征，怎么办呢？
实现在openlayer中绘制多边形，编辑，删除等
weixin_58350627的博客
06-09 2542
实现在openlayer中绘制多边形，编辑，删除等
vue3 + openlayers---绘制Feature（Point）
QDxin_xyz的博客
05-17 290
【代码】vue3 + openlayers---绘制Feature（Point）
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、付费专栏及课程。

余额充值