干货!layerGroup在LeafLet中的实战

简介: 需求场景:boss想针对分子公司进行统一展示,有可能在地图上统一添加、移除、统一调整图标等操作。常规做法可以采用遍历法,去循环所有的marker,批量操作。此时,可以采用layerGroup的方式,将所有分子公司存放在一个layer中,通过分组,可以批量操作存放在layerGroup中

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

    官方描述:

image.png

 一、定义map操作对象

varmymap=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: newL.Transformation(1/180, 1, -1/180, 0.5),
scale: function (zoom) {
return256*Math.pow(2, zoom-1);
    }
  });

二、创建layerGroup

varcities=L.layerGroup();

   自定义marker图标

varflagIcon=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添加到地图上

varoverlays= {
"分公司": cities    };
L.control.layers([],overlays).addTo(mymap);

四、综合展示

image.png

默认首页

image.png显示分公司

五、总结

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

目录
相关文章
|
定位技术 开发工具 Android开发
Leaflet开发入门
Leaflet开发入门
256 0
|
25天前
|
JSON JavaScript 前端开发
Highcharts 教程
Highcharts 教程
27 2
|
1月前
|
前端开发 JavaScript 定位技术
React 地图组件 Mapbox 入门指南
Mapbox 是一个强大的地图平台,提供丰富的地图数据和工具,支持多种开发语言和框架。本文介绍如何在 React 项目中使用 Mapbox,涵盖基础概念、安装配置、基本用法、常见问题及解决方法、高级用法等内容,并通过代码示例详细说明,帮助开发者提升地图应用的开发效率和用户体验。
94 2
|
2月前
|
移动开发 JavaScript 前端开发
ThreeJs简介
这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。
56 1
|
JavaScript 定位技术 异构计算
WebGis——从零开始vue使用cesium添加点线(四)
WebGis——从零开始vue使用cesium添加点线(四)
|
自然语言处理 JavaScript 前端开发
Element+Vue+OpenLayers webgis实战
Element+Vue+OpenLayers webgis实战
187 0
|
移动开发 资源调度 JavaScript
【Three.js】入门教程
【Three.js】入门教程
284 0
|
存储 JSON 数据可视化
Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法
Echarts实战案例代码(12):Highcharts与Echarts地图geoJSON的比较及使用方法
223 0
|
前端开发 搜索推荐 JavaScript
ECharts:百度开源的纯 Javascript 图表库
ECharts(Enterprise Charts 商业产品图表库) 是基于Canvas的,纯Javascript 的图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
774 0
ECharts:百度开源的纯 Javascript 图表库
|
定位技术
leaflet实用插件整理
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gisdoer/article/details/82796650 leaflet实用插件整理 leafletjs地图框架,在地图这块功能还是强大,而且支持插件扩展和自定义开发。
1472 0

热门文章

最新文章