layerGroup在LeafLet中的实战

需求场景：boss想针对分子公司进行统一展示，有可能在地图上统一添加、移除、统一调整图标等操作。常规做法可以采用遍历法，去循环所有的marker，批量操作。此时，可以采用layerGroup的方式，将所有分子公司存放在一个layer中，通过分组，可以批量操作存放在layerGroup中的所有元素，本文将重点阐述如何在Leaflet中使用layerGroup进行统一管理。

官方描述：

一、定义map操作对象

var mymap = L.map('mapid',{crs:L.CRS.CustomEPSG4326}).setView([30.673828, 113.554688], 5);

其中，投影方式具体转换可参考

L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {    code: 'EPSG:4326',    projection: L.Projection.LonLat,    transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),    scale: function (zoom) {      return 256 * Math.pow(2, zoom - 1);    }  });

二、创建layerGroup

var cities = L.layerGroup();

自定义marker图标

var flagIcon = L.icon({    iconUrl: 'images/flag.png',    iconSize: [25, 25],    iconAnchor: [25, 25],    popupAnchor: [-13, -26]  });

将marker添加到layerGroup

L.marker([35.947266, 118.212891],{icon:flagIcon,title:'山东分公司'}).bindPopup('山东分公司').addTo(cities),L.marker([35.925293, 103.842773],{icon:flagIcon,title:'甘肃分公司'}).bindPopup('甘肃分公司').addTo(cities),L.marker([26.564941, 106.699219],{icon:flagIcon,title:'贵阳分公司'}).bindPopup('贵阳分公司').addTo(cities),L.marker([36.606445, 109.522705],{icon:flagIcon,title:'延安分公司'}).bindPopup('延安分公司').addTo(cities);

三、将layerGroup添加到地图上

var overlays = {      "分公司": cities    };

L.control.layers([],overlays).addTo(mymap);

四、综合展示

在地图中展示了底图和标签底图，展示页面右上角将分子公司作为一个layerGroup进行统一展示，通过勾选分子公司复选框，可以在地图上统一显示，不勾选可以统一隐藏分子公司，以此达到批量操作的效果。操作交互示意图如下所示：

默认首页

显示分公司

五、总结

通过本文可学习在LeafLet中如何对marker进行分组批量管理，可以提供一种可行的统一管理机制，并提供了完整的操作效果示意图和关键代码。

layerGroup在LeafLet中的实战相关推荐

Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中通过setZIndex实现图层层级控制
场景 Leaflet中使用layerGroup图层组实现图层切换: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/12232650 ...
BERT在小米NLP业务中的实战探索
1 . 引言近年来,预训练模型在自然语言处理(Natural Language Processing, NLP)领域大放异彩,其中最重要的工作之一就是Google于2018年发布的BERT预训练模型 ...
python处理excel表格数据-利用Python处理和分析Excel表中数据实战.doc
利用Python处理和分析Excel表中数据实战 [利用python进行数据分析--基础篇]利用Python处理和分析Excel表中数据实战原创 2017年06月28日 15:09:32 标签: p ...
Leaflet中使用Leaflet.draw插件实现图形交互绘制和编辑(修改图形坐标点)
场景 Leaflet中使用Leaflet.Pin插件实现图层要素编辑效果: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1224 ...
Leaflet中通过leaflet-measure插件实现测距测面效果
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Leaflet中原生方式实现测量面积: Leaflet中原生方式 ...
Leaflet中原生方式实现测量面积
场景 Leaflet中原生方式实现测距: Leaflet中原生方式实现测距_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面实现测量距离的基础上,实现测量面积效果如下注: 博客: ...
Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
Leaflet中使用markerCluster实现点聚合效果
场景 Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标: Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...

layerGroup在LeafLet中的实战

layerGroup在LeafLet中的实战相关推荐

最新文章

热门文章