干货!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进行分组批量管理,可以提供一种可行的统一管理机制,并提供了完整的操作效果示意图和关键代码。

目录
相关文章
|
9月前
|
定位技术 开发工具 Android开发
Leaflet开发入门
Leaflet开发入门
138 0
|
9月前
|
存储 前端开发 JavaScript
GIS前端编程-Leaflet插件发布
GIS前端编程-Leaflet插件发布
65 0
|
2月前
|
JavaScript 开发工具 git
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
Three.js封装了WebGL的底层细节,是一款运行在浏览器中的 3D 引擎,可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,目前在Git上已经拥有90k+的star。
45 0
Three.js第1篇,Three.js新手教学,如何在项目中使用Three.js(three.js使用流程详细,three.js的使用方式,three.js创建3d物体)
|
11月前
|
移动开发 资源调度 JavaScript
【Three.js】入门教程
【Three.js】入门教程
180 0
|
JavaScript 前端开发 定位技术
OpenLayers入门(一)
OpenLayers入门(一)
629 0
OpenLayers入门(一)
Threejs学习笔记-三
精灵例子和精灵贴图的简单使用
Threejs学习笔记-三
|
JavaScript 前端开发 API
Three.js学习笔记 一
在react中快速实现三维模型的创建
Three.js学习笔记   一
|
前端开发 vr&ar
Threejs学习笔记 二
在我第一集的笔记中,我们实现了在react中创建简单三维模型,接下来,我们在此基础上学习材质贴图,并实现一个简单的vr看房。
Threejs学习笔记 二
|
移动开发 JavaScript 前端开发
Three.js 入门指南
Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。
540 0
Three.js 入门指南
|
JSON 数据可视化 前端开发
带你入门three.js——从0到1实现一个3d可视化地图(二)
可视化地图——three.js实现 场景的搭建 我先不管地图不地图的,地图的这些形状肯定是放置到场景中的。跟着我的脚步一步一步去搭建一个场景。场景的搭建就照相机,渲染器。我用一个map类来表示代码如下: class chinaMap { constructor() { this.init() } init() { // 第一步新建一个场景 this.scene = new THREE.Scene() this.setCamera() this.setRenderer() } // 新建透视相机
带你入门three.js——从0到1实现一个3d可视化地图(二)