leaflet中通过创建LayerGroup图层组添加marker时问题记录

最新推荐文章于 2023-07-25 11:25:35 发布
最新推荐文章于 2023-07-25 11:25:35 发布
阅读量282 收藏
点赞数
文章标签： leaflet gis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u_ZJL_FFF/article/details/131276411
版权

在leaflet中通过创建LayerGroup图层组添加marker时，切记需要先将创建的layergroup添加道map中，之后在去给layergroup中添加marker，顺序不能反，否则将不能移除添加的marker，导致地图缩放时，会执行_animateZoom此方法，但是此时marker中的_map对象已经清空，导致报错。

正确示例：

错误示例：

 

 

 

恋上南山
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
leaflet中文文档-api
03-02
Map：Leaflet的核心组件，负责在页面中创建地图并操纵地图。Map对象可以通过构造函数`L.map()`或`new L.Map()`创建，需要传入一个div元素的ID和可选的地图选项对象。 构造函数：`L.Map( |String> id, <Map options>...
leaflet.marker.highlight:L.marker 的突出表现
08-04
npm install leaflet.marker.highlight --save 用法 暂时高亮 当您将鼠标悬停在标记上时，会出现高光效果。 您可以在初始化标记时设置它。 var marker1 = L.marker([51.5, -0.09], {highlight: 'temporary'})....
layerGroup在LeafLet中的实战
热门推荐
夜郎King的博客
10-06 4万+
需求场景：boss想针对分子公司进行统一展示，有可能在地图上统一添加、移除、统一调整图标等操作。常规做法可以采用遍历法，去循环所有的marker，批量操作。此时，可以采用layerGroup的方式，将所有分子公司存放在一个layer中，通过分组，可以批量操作存放在layerGroup中的所有元素，本文将重点阐述如何在Leaflet中使用layerGroup进行统一管理。 官方描述： 一、定义map操作对象 var mymap = L.map('mapid'......
Leaflet中使用layerGroup图层组实现图层切换
BADAO_LIUMANG_QIZHI的博客
01-05 6024
场景 Vue+Leaflet实现加载OSM显示地图： Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Vue+Leaflet实现加载Stamen显示地图： Vue+Leaflet实现加载Stamen显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 参考上面实现的效果，如果要实现切换地图图层，以及控制标记图层整个所有标记的marker显示与隐藏怎么弄。 leaflet官方提供了组件与教程，可以通过LayerGroup去存
leaflet 单个或者多个marker图标切换清除
xgs736214763的博客
12-14 1万+
小谢博客地址https://xgs888.top/post/view?id=74 leaflet.js中清除marker图标，切换marker位置查看官方文档 单个marker点的位置切换直接使用 marker.setLatLng([ajaxarr[0], ajaxarr[1]]); 多个图标实时位置的切换需要先把图层清除，之前是直接是addTo(mymap)的
【WebGIS】leaflet入门-图层组和和图层控件
paperperson的博客
05-06 1757
本教程包括如何将多个图层组合成一个，以及如何使用图层控件十分方便的切换地图上的图层。
leaflet 缩放动画 （自定义弹窗）
weiweiweb888的博客
07-25 399
zoomstart 与 zoomend事件搭配css过渡实现；// 自定义覆盖物类 var CustomOverlay = L . Layer . extend({});});} });
77.（leaflet篇）leaflet图层显示与隐藏.zip
03-29
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/123814322
25.（leaflet篇）leaflet删除所有图层（不含地图）.zip
07-20
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/118935608
Leaflet.CanvasLayer.Field:在Leaflet中加载和设置栅格文件样式（geotiff和asciigrid）
05-06
IH.Leaflet.CanvasLayer.Field 的插件，可添加图层以可视化ASCIIGrid或GeoTIFF文件（EPSG：4326）中的字段（ aka Rasters ）。警告！ npm安装的新网址npm install ih-leaflet-canvaslayer-field 这包括： L.Canvas...
LeafletJS 简单使用1 - 地图标点 L.marker()、清除标点 layerGroup.clearLayers() 【SuperMap iClient for Leaflet】超图的使用
工作中遇到问题记录
12-13 3191
【1】超图的使用、SuperMap 超图 vue.config.js 打包配置（ES6语法转换）。 【2】Uncaught SyntaxError: Unexpected token ... 报错：语法错误；Cannot assign to read only property 'export' of object '报错：babel.config.js配置sourceType；SyntaxError: Unexpected token , in JSON at position 10报错：内网配置参数错误
Leaflet 自定义Popup弹窗
Banterise的博客
03-11 8987
首先感谢 Leaflet - 自定义弹出框（popup）提供的扩展 但是实际结合组件化的使用过程中，对于弹窗内元素的高宽存在不确定性（即初始化时不传入容器的宽高），所以需要进一步对Popup组件进行拓展，以便适应更自由的窗体组件 稍微解读了下Leaflet对于popup组件的源代码，其实popup对于整体的地图容器来说，也只是地图上根据像素位置定位的元素之一，因此对其的控制也和其它图层一样，对初始...
Leaflet源码解析
nmj2008的博客
03-29 1484
Map.js import * as Util from '../core/Util'; import {Evented} from '../core/Events'; import {EPSG3857} from '../geo/crs/CRS.EPSG3857'; import {Point, toPoint} from '../geometry/Point'; import {Bounds, toBounds} from '../geometry/Bounds'; import {LatLng..
leaflet：入门基础（二）之加载图层
Puzzle的博客
07-09 1万+
前言 上一篇 leaflet 入门基础 讲了如何使用leaflet，包括加载地图、绘制图层等。 这一篇将讲解如何加载多种图层，以及如何寻找底图。 底图资源 这里提供一个底图资源网站：open whatever map 打开网址，就可以看到丰富的底图资源 点击喜欢的底图，会弹出一个信息框，把提供的网址复制下来 加载底图 leaflet有两种类型的图层： （1）base layer：互斥的图...
leaflet 批量加载、清除marker
写代码脑子疼
11-22 3870
leaflet 批量加载、清除marker
全网最佳设置leaflet 图层层级的方式
qq_37550440的博客
04-14 2220
全网最佳设置leaflet 图层的方式 其他不同类型的图层都默认有个窗格pane并且还有值，z-index越大就越在上方
leaflet中Layer Groups和Layers Control用法
每天写一点，进步一点点
12-14 1万+
本文用于介绍如何将多个layers组合成一个以及如果使用layers control让用户轻松的在地图上切换不同的图层。 Layer Group 假设你有一些想要合并为一组的layers，在代码中统一处理这些layers： var littleton = L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
【leaflet】 leaflet移除地图上所有marker(layers)
学习笔记
09-05 2万+
leaflet批量移除地图上的marker可采用分组的方式，然后用分组批量清除，如下所示: 批量生成marker var layers=[]; for(var i = 0;i< result.length;i++){ var layer = new L.marker([ result[i].lat, result[i].lng ]); layers.push(layer); }
Leaflet 加载Mapbox studio pbf格式矢量切片（二）
做GIS梦的人
09-24 3094
关于使用加载加载Mapbox studio pbf格式矢量切片，还有一种方案，使用leaflet-mapbox-gl。 这个插件的本质是在leaflet上添加一个div图层，把这个div给mapbox作为容器进行渲染。可以简单的理解为两个div的叠加，当你移动地图时，两个地图同步移动。注意把Mapbox的地图背景设置成透明的MapboxGL设置地图背景透明，否则永远看不到leaflet图层。 ...
leaflet图层树
最新发布
09-09
3. 在 JavaScript 中，使用 Leaflet 创建地图，并添加图层。 ```javascript // 创建地图实例 var map = L.map('map').setView([51.505, -0.09], 13); // 添加底图图层 var baseLayer = L.tileLayer('...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值