openlayers 删除上一个图形

最新推荐文章于 2024-05-27 23:06:17 发布
最新推荐文章于 2024-05-27 23:06:17 发布
阅读量4.8k 收藏 6
点赞数 2
分类专栏： map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/staHuri/article/details/88825509
版权
本文介绍了如何在OpenLayers中删除已绘制的图形。通过创建不同的点样式，将绘制的图形存储到列表中，并提供根据图层索引删除图形的实现方式。文章提供了具体的删除操作示例代码。
摘要由CSDN通过智能技术生成

起因

近几日群里经常有人问如何删除一个绘制的图形(openlayers 中) ， 顾有此文

需求

  • 在openlayers中绘制图形，并且分为不同的样式
  • 删除上一个绘制的图形

思路

  • 创建多个point—style

  • 构造一个列表存放当前绘制的

    • 本文只有三个图层，使用了一个数组包装 :[图层索引,freature]

  • 删除
    根据图层索引删除
    jiankongLayerVector.getSource().removeFeature(pop1);

效果

本文源码

如果对你有帮助，请给一个star,fork 源码

了解本专栏 订阅专栏 解锁全文 超级会员免费看
staHuri
关注
专栏目录
订阅专栏
192：vue+openlayers: 选择feature，弹窗操作，删除所选feature
大剑师兰特的GIS世界
01-04 1035
第192个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选择的过程中弹窗出现删除和关闭按钮，删除的内容是selected的feature，关闭的是功能浮窗。
193：vue+openlayers 多边形的绘制，编辑feature，删除所选feature和清空功能
大剑师兰特的GIS世界
01-04 1456
第193个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选中的元素可以编辑，也可以删除，同时可以删除整个图层的source内容。
vue中使用OpenLayers（二）：绘制 和 删除 点 线 圆
weixin_43960269的博客
11-20 4785
vue中使用OpenLayers（二）：绘制 和 删除 点 线 圆 第一步 所有的引入都要引入完全 import "ol/ol.css"; import Map from "ol/Map"; import Feature from "ol/Feature"; import View from "ol/View"; import XYZ from "ol/source/XYZ";...
openlayers绘制图形后清空图形要素失败
technician_ing的博客
03-21 1180
对draw进行监听，绘制结束后清空图层要素。但是实际上并没有达到想要的效果，这是因为监听事件是一个异步的过程，在draw没有完成之前，就已经执行了clear操作。clear设置为异步操作后，会和监听事件一起作为异步事件进行异步队列排队。并且监听事件优于clear操作，这样即使设置的延迟时间为0，绘制结束后也会清空图层要素。对图层添加要素事件进行监听，等待添加要素完成之后再执行操作。解决方案一：将clear设置为异步代码。
实现在openlayer中绘制多边形，编辑，删除等
weixin_58350627的博客
06-09 1968
实现在openlayer中绘制多边形，编辑，删除等
cesium 矢量图 编辑_openlayers添加、删除矢量图，多边形
weixin_35862131的博客
03-03 665
最近在学习openlayer，也遇到很多问题，解决很多问题，欢迎交流// Layersvar layers = [new ol.layer.Tile({name: “Natural Earth”,minResolution: 306,source: new ol.source.XYZ({ url: ‘https://{a-d}.tiles.mapbox.com/v3/mapbox.natur...
OpenLayers6入门，OpenLayers实现在地图上拖拽编辑修改绘制图形
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-27 270
OpenLayers6入门，OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形》，那么本章将在此基础上实现图形的拖拽编辑功能，方便我们对绘制后的图形进行修改操作。
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
linzi19900517的博客
06-05 4729
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
Vue+OpenLayers7入门到实战：OpenLayers图形绘制功能，OpenLayers实现在地图上绘制线段、圆形和多边形
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-26 361
本章介绍如何使用OpenLayers7在地图上实现图形绘制功能，OpenLayers地图实现在地图上绘制线段、圆形和多边形等基本图形。注意：本章需要用到Element-UI组件，可能需要额外安装依赖，这里跳过不详述，具体可参考Element-UI官方文档。
openlayers聚合图层批量删除点位
layman
01-13 2581
openlayers聚合图层批量删除点位： 最近在做项目的时候，遇到一个大坑，就是openlayers聚合图层下，批量移除点位的时候，会造成严重卡顿，极度影响用户体验感，必须把这个坑记住，以防下次再犯 利用openlayers 的removeFeature（）方法批量移除： 当我们再图层上移除批量点位的时候，一般大部门的开发者应该都跟我一样，会选着用这种方法： tempSbSource.forEachFeature(function(e){ if(e.values_.obj.sbl
openlayers测试图层删加点
weixin_45728126的博客
07-08 757
openlayers测试点集要素图层删后加点
Vue + OpenLayers 动态增加和删除标记
大鱼的博客
08-21 6221
一个简单的示例，用于动态向 Openlayers 地图添加标记。
openlayers 删除点 ol/source/Vector.js.VectorSource.removeFeature解决方案
@必意玲
03-11 9677
背景：openlayers 实现地图打点，根据数据的变化修改点的位置 data // 点的经纬度 coordinates: [ // { x: 37.12638163, y: 15.1353712537 }, // { x: 82.56253054272383, y: 42.63299560546875 }, // { x: 87.52801179885864, y: 44.1595512628...
openlayers操作分享：如何从容的在vue中食用openlayers6
林恒的博客
11-19 2630
这篇文章，分享下我对openlayers的一些经验和理解，会夹杂大量搜索出来得文档，是我正式使用时可以实现的，废话不多说，我们从下载开始 一，openlayers安装且初始化地图 创建vue项目就省略了，OpenLayers通过NPM 安装 npm install ol -S Vue页面 　　OpenLayers 加载地图可以加载离线地图，也可以下载离线瓦片地图加载， 地图相关配置，我放在...
vue openlayer不能彻底删除图层_基于openlayer开发webgis
weixin_39689506的博客
11-25 639
1、 快速搭建1. 引入npm下载openlayers：npm i -S ol在.vue文件里引入相关文件此demo引入bootstrap和jquery和popper，npm分别为：npm install --save bootstrapnpm install --save jquerynpm install --save popper,popper是弹出框插件2. 初始化map在config文件...
openlayers绘制自定义点线面样式,带清除功能Vue版
qq_39804689的博客
05-20 6705
openlayers绘制自定义点线面样式,带清除功能 初学openlayers 有不足之处还望轻喷,多谢 项目用的是vue,elementUI,以及scss 啊…本来点线面都录制了一个gif图,因为某些原因 只剩下一个线的了,将就看着吧 在画线和面的时候,双击地图为停止绘制,也可以通过切换绘制属性手动停止绘制,具体内容注释里有 <template> <div id="ma...
openlayers删除矢量图层上的图形
weixin_45728126的博客
07-06 1600
openlayers删除矢量图层上的图形——必须先删除clear掉layer的source，再remove掉layer。
TRICK系列：Openlayers 中实现Draw通过键盘按键取消全部绘制、取消上一步绘制
weixin_44519342的博客
04-26 1460
TRICK系列：Openlayers 中实现Draw通过键盘按键取消全部绘制、取消上一步绘制
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值