openlayers 删除上一个图形

最新推荐文章于 2023-06-09 10:56:15 发布
最新推荐文章于 2023-06-09 10:56:15 发布
阅读量4.8k 收藏 6
点赞数 2
分类专栏： map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/staHuri/article/details/88825509
版权

起因

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

需求

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

思路

  • 创建多个point—style

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

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

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

效果

本文源码

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

在这里插入图片描述

<!DOCTYPE html>
<
了解本专栏 订阅专栏 解锁全文 超级会员免费看
staHuri
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
订阅专栏
14-openlayers销毁创建好的地图容器
fxshy的博客
05-15 200
14-openlayers销毁创建好的地图容器
192：vue+openlayers: 选择feature，弹窗操作，删除所选feature
大剑师兰特的GIS世界
01-04 908
第192个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选择的过程中弹窗出现删除和关闭按钮，删除的内容是selected的feature，关闭的是功能浮窗。
OpenLayers Draw绘制时操作结束绘制
Gary Leong
05-13 3978
this.draw.finishDrawing() Stop drawing and add the sketch feature to the target layer. The module:ol/interaction/Draw~DrawEventType.DRAWEND event is dispatched before inserting the feature. 使用方法： 可以通过键盘快捷键操作，结束draw绘制，将当前绘制的图形添加到目标图层中。 ...
vue中使用OpenLayers（二）：绘制 和 删除 点 线 圆
weixin_43960269的博客
11-20 4708
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 1087
对draw进行监听，绘制结束后清空图层要素。但是实际上并没有达到想要的效果，这是因为监听事件是一个异步的过程，在draw没有完成之前，就已经执行了clear操作。clear设置为异步操作后，会和监听事件一起作为异步事件进行异步队列排队。并且监听事件优于clear操作，这样即使设置的延迟时间为0，绘制结束后也会清空图层要素。对图层添加要素事件进行监听，等待添加要素完成之后再执行操作。解决方案一：将clear设置为异步代码。
实现在openlayer中绘制多边形，编辑，删除等
weixin_58350627的博客
06-09 1802
实现在openlayer中绘制多边形，编辑，删除等
cesium 矢量图 编辑_openlayers添加、删除矢量图，多边形
weixin_35862131的博客
03-03 648
最近在学习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...
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
openlayers3画线功能例子
01-03
OpenLayers 3 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式的地图应用。它提供了丰富的地图操作、图层管理、数据可视化等功能。在这个"openlayers3画线功能例子"中，我们将深入探讨如何利用...
openlayers demo.zip
07-30
OpenLayers 是一个强大的开源JavaScript库，专门用于在Web上创建交互式地图应用。这个"openlayers demo.zip"压缩包提供了一系列的代码示例，旨在帮助新手理解和掌握如何使用OpenLayers进行GIS（地理信息系统）开发。...
openlayers
07-03
OpenLayers 是一个强大的开源JavaScript库，专为在Web上创建交互式地图应用而设计。它支持多种地图数据源，包括WMS、WFS、TMS、KML、GeoJSON等，使得开发者能够轻松地将地理信息系统（GIS）功能集成到网页中。...
openlayers 哔哔哩哩胡灏讲课的源码
10-19
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS、TMS等，并且能够处理多种数据格式，如GeoJSON、KML、GPX等。胡灏老师的课程通过哔哔哩哩平台分享...
193：vue+openlayers 多边形的绘制，编辑feature，删除所选feature和清空功能
大剑师兰特的GIS世界
01-04 1370
第193个本示例的目的是介绍如何在vue+openlayer中使用select来选择feature元素，选中的元素可以编辑，也可以删除，同时可以删除整个图层的source内容。
openlayers聚合图层批量删除点位
layman
01-13 2425
openlayers聚合图层批量删除点位： 最近在做项目的时候，遇到一个大坑，就是openlayers聚合图层下，批量移除点位的时候，会造成严重卡顿，极度影响用户体验感，必须把这个坑记住，以防下次再犯 利用openlayers 的removeFeature（）方法批量移除： 当我们再图层上移除批量点位的时候，一般大部门的开发者应该都跟我一样，会选着用这种方法： tempSbSource.forEachFeature(function(e){ if(e.values_.obj.sbl
openlayers测试图层删加点
weixin_45728126的博客
07-08 721
openlayers测试点集要素图层删后加点
Vue + OpenLayers 动态增加和删除标记
大鱼的博客
08-21 5961
一个简单的示例，用于动态向 Openlayers 地图添加标记。
openlayers 删除点 ol/source/Vector.js.VectorSource.removeFeature解决方案
@必意玲
03-11 9464
背景：openlayers 实现地图打点，根据数据的变化修改点的位置 data // 点的经纬度 coordinates: [ // { x: 37.12638163, y: 15.1353712537 }, // { x: 82.56253054272383, y: 42.63299560546875 }, // { x: 87.52801179885864, y: 44.1595512628...
openlayers绘制自定义点线面样式,带清除功能Vue版
qq_39804689的博客
05-20 6576
openlayers绘制自定义点线面样式,带清除功能 初学openlayers 有不足之处还望轻喷,多谢 项目用的是vue,elementUI,以及scss 啊…本来点线面都录制了一个gif图,因为某些原因 只剩下一个线的了,将就看着吧 在画线和面的时候,双击地图为停止绘制,也可以通过切换绘制属性手动停止绘制,具体内容注释里有 <template> <div id="ma...
openlayers删除矢量图层上的图形
weixin_45728126的博客
07-06 1558
openlayers删除矢量图层上的图形——必须先删除clear掉layer的source，再remove掉layer。
删除openlayers地图上的标点
最新发布
06-12
下面是一个示例代码片段，演示如何删除地图上的要素： ```javascript // 获取图层 var layer = map.getLayers().getArray()[0]; // 获取要素 var feature = layer.getSource().getFeatureById(featureId); // ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值