085：vue+leaflet 删除所有的marker图层，保留其他图层

已于 2024-05-10 21:06:37 修改
阅读量2k 收藏 12
点赞数 15
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： javascript vue.js 前端 leaflet清除图层
于 2023-02-21 10:21:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/129137613
本文由高级前端工程师分享，讲解在Vue+Leaflet项目中如何删除所有Marker图层而不影响其他图层。通过示例源代码和配置说明，2分钟即可实现效果。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet项目中清除所有的marker图层，保留其他图层，详情请参考源代码。这里面主要用到了(layer instanceof L.Marker ，注意 L.Marker中Marker首字母要大写。

直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果

三、配置方式

了解本专栏 订阅专栏 解锁全文
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3526
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
131：vue+leaflet实现波动的marker效果
大剑师兰特的GIS世界
04-07 1675
第131个本示例的目的是介绍如何在vue+leaflet中显示波动的marker效果。
25.（leaflet篇）leaflet删除所有图层（不含地图）.zip
07-20
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/118935608
leaflet清除图层
GuAng
01-21 5658
1.单个清除 let polygon = L.polygon(res, { color: 'rgb(51, 136, 255)', fillColor: 'rgb(51, 136, 255)', weight: 1 }).addTo(map); map.removeLayer(polygon ); 2.批量清除 map.on("pm:create", e => { suoyouArr.push(e); // 在添加图层时,将其添加在数组 }) // 循
Leaflet清除图层
最新发布
weixin_39716013的博客
06-04 189
【代码】Leaflet清除图层。
leaflet 删除指定图层、删除Divicon图层
qq_37550440的博客
02-22 2796
leaflet 删除指定图层、删除Divicon图层
leaflet清除图层（vue）
黄-小智的博客
09-08 2622
leaflet绘制多边形： // An highlighted block var latlngs = [ [22.484293166666666, 114.47875890877452], [22.504293166666666, 114.46875890877452], [22.514293166666666, 114.66875890877452], [22.784293166666666, 114.60875890877452] ]; L.po
leaflet移除除底图外的所有图层
zcylyzhi4的博客
08-21 2965
map.eachLayer(function (layer) { if (!layer._container || ('' + jQuery(layer._container).attr('class')).replace(/\s/g, '') != 'leaflet-layer') { layer.remove(); } }); 原博客链接
066：vue+leaflet 设置多个marker，导出为一个geojson文件
大剑师兰特的GIS世界
02-15 602
第066个本示例的目的是介绍演示如何在vue+leaflet中使用L.marker设置多个markers， 通过数据重组，导出为geojson文件。这里面是一个很重要的判断条件，可以灵活地去运用。
077：vue+leaflet 一个marker的世界旅行动画
大剑师兰特的GIS世界
02-16 684
第077个本示例的目的是介绍演示如何在vue+leaflet中动态的设置marker，这里起个美丽的名字就叫做一个marker的世界旅行。
075：vue+leaflet 设置一个图层或者多个图层的透明度
大剑师兰特的GIS世界
02-16 986
第075个本示例的目的是介绍演示如何在vue+leaflet中如何设置一个图层或者多个图层的透明度，利用了layer的setOpacity方法。
Leaflet-CanvasMarker:HTML5 画布上的动画标记
07-06
Leaflet-CanvasMarker HTML5 画布上的动画标记。 还不是很实用。 放大太多时会中断;-) 这个项目基本上只是一个实验，没有在任何地方使用。
071：vue+leaflet 设置marker，并可以任意拖动每一个marker
大剑师兰特的GIS世界
02-16 1028
第071个本示例的目的是介绍演示如何在vue+leaflet中通过L.marker来添加marker，通过设置其属性，可以让marker在地图上任意的拖动。
leaflet加载接入高德、openstreetmap、google地图（leaflet篇.3）
地图之家
05-17 8103
完整代码文件在文章末尾处提供 对接效果图如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
删除所有的标记图层，保留其他图层
laugh666的博客
09-03 587
当我们使用Leaflet创建地图时，有时我们可能需要删除特定的图层，例如标记图层，同时保留其他图层。在上面的示例中，我们首先初始化了一个地图，并添加了一个OpenStreetMap图层。然后，我们创建了三个标记图层和一个圆形图层，并将它们添加到地图上。通过运行上述代码，您将删除所有的标记图层，同时保留其他图层。在上面的示例中，我们引入Leaflet的CSS样式表和JavaScript文件，并创建了一个ID为"map"的。接下来，我们将创建一个地图容器，并在其中添加一些标记图层和其他图层。
使用JavaScript清除地图上除底图以外的所有图层
laugh666的博客
09-13 393
然而，在某些情况下，我们可能希望清除除了底图以外的所有图层，以便获得更干净的地图显示。通过使用Leaflet.js库和编写简单的JavaScript代码，我们可以轻松地控制地图上的图层显示。在这个例子中，我们创建一个地图对象，并将其设置为显示在给定的纬度（51.505）和经度（-0.09）的位置，缩放级别设置为13。但是，如果我们想要清除除了底图以外的所有图层，我们需要编写更多的JavaScript代码。通过使用类似的方法，你可以根据自己的需求定制地图显示内容，并具有更好的用户体验。
leaflet清除所有图层_5分钟学会Photoshop：图层（图层复合）
weixin_42579969的博客
01-20 1059
图层复合是“图层”面板状态的快照（类似于“历史记录”面板中的快照），它记录了当前文档中图层的可见性、位置和外观（包括图层的不透明度、混合模式以及图层样式等），通过图层复合可以快速地在文档中切换不同版面的显示状态。该功能适合用来展示多种设计方案，图下图所示。1、图层复合面板“图层复合”面板用来创建、编辑、显示和删除图层复合，如下图所示为面板菜单。应用图层复合：显示该图标的图层复合为当前使用的图层复合...
【leaflet】 leaflet移除地图上所有marker(layers)
zl15145428的博客
06-29 4959
文章原地址：https://blog.csdn.net/huangsheng_blog/article/details/77855890eaflet批量移除地图上的marker可采用分组的方式，然后用分组批量清除，如下所示:批量生成markervar layers=[];for(var i = 0;i&lt; result.length;i++){ var layer = new L.mar...
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值