an open-source JavaScript libraryfor mobile-friendly interactive maps
一个开放源代码的JavaScript库,用于移动友好的交互式地图
官方网站:leafletjs.com/reference-1…
- 是一个轻量级的地图服务支持
- 更适合定制的开发,
- 开源赋予了很多插件,使用更便捷
零 · 实践前的自述
实践简述
使用leafletjs在高德的地图上构建图层,包括打点、热力图渲染、AOI边界处理、地图对比及关联度等
实践用到的依赖和支持
- 用于交互式地图leafletjs:leafletjs.com/reference-1…
- 部分高德地理数据lbs:lbs.amap.com/api/webserv…
- 地理位置计算:turfjs.org/docs
相关知识了解
- 专业术语解释
- 图逻辑
壹 · 创建一个地图
-
创建div,并添加id
-
根据id创建地图实例
-
此处使用的是高德的地图瓦片,通过
L.tileLayer
创建瓦片 -
使用
addTo(GOD.LMap)
添加到创建的地图实例上
贰 · 创建一个点放到地图上
只创建一个点
L.marker([50.5, 30.5]).addTo(map);
复制代码
大量数据点
- 可以使用聚合点位的方式创建一个对象
- 把当前类型下的点添加给聚合点位的对象
效果展示
- 可以减少首屏点位加载时间,页面展示大量点位会造成页面卡顿
- 可以更加清晰的了解到各个点位的聚合信息,点击也可详细查看
数据劫持
- 添加数据劫持
- 对相应点位的控制
叁 · 创建一个热力添加到地图上
直接把热力瓦片的地址通过L.tileLayer
追加到地图上
肆 · 添加WKT
-
需要安装WKT格式转化依赖并引入
import WKT from 'terraformer-wkt-parser';
//wkt数据 MULTIPOLYGON (((121.40865097026608 31.236604810063966, 121.41074408027509 31.236532890380659, 121.41082780985562 31.238331389681946, 121.41292095044162 31.2382594304284, 121.41501409012824 31.238187439698606, 121.41509789974839 31.239985920114179, 121.41300471959221 31.24005791983717, 121.41091154033541 31.240129879990036, 121.40881835028665 31.240201809565917, 121.40873465038385 31.23840331026463, 121.40664149001282 31.238475200270329, 121.40655785036461 31.236676700069722, 121.40647420981702 31.234878189976541, 121.40639058006127 31.23307967988336, 121.40848361992323 31.233007799770178, 121.40856729014843 31.234806309863359, 121.40865097026608 31.236604810063966)))
-
使用WKT.parse(wkt)格式化后转一下经纬度(leafletjs和其他地图不同,经纬度传参是相反的)
- 使用
L.geoJson
追加到图层对象后追加到地图上
伍 · 多个地图的同步
使用Leaflet.Sync
插件
mapA.sync(mapB);
复制代码
使用此属性不支持页面飞走的监听需给地图设置inertia: false,防止页面飞走的监听,
陆 · 点位关联
效果展示
- 选择点,输入半径500,圆内无其他点,点位关联度为0
- 输入半径为3500,圆内有两个点(不算当前点),点位关联度为2
点位关联准备工作
- 标记多个点
- 选择一个点设置半径
- 根据地理位置turf计算出改点范围的点信息
绘制和计算
- 根据标题贰的方式画出点
-
画圆
-
根据输入半径和点击点的坐标绘制圆
L.circle(latLng, { radius: radius })
-
圆调用计算关联度方法
getWithInCirCleInfoByMarking
-
关联度方法
getWithInCirCleInfoByMarking
-
此处有数据补齐,可先提取关联度计算方法
getWithInCirCleInfo
-
绘制圆后可根据
turf.circle
获取圆的边界范围 -
使用turf是应特别注意数据实例,圆的边界需要进行数据处理
turf.polygon
,详细参加官方文档:turfjs.org/docs/#point… -
如果点在圆内根据
turf.pointsWithinPolygon
返回的features.length可知该点是否在圆内
柒 · 行政边界的绘制
效果展示
绘制
-
根据高德的API获取行政边界信息lbs.amap.com/api/webserv…
-
提取绘制行政边界方法
-
GOD为window的全局变量
-
如果需要同时展示多个行政边界去掉
GOD.districtByCityFeatureLayer.clearLayers()
-
行政边界存在多个封闭图形,需要进行截取和遍历成多个数组
-
调用该方法
drawMapDistrictByCity('上海市')
捌 · leaflet常用插件
定位当前位置
坐标转换插件(与缓冲区、测量配合使用)
空间位置分析(非常实用)
- (点是否在面内)github.com/kartena/Pro…
- (计算面积、距离)github.com/makinacorpu…
常用地图切换加载(osm、google、baidu、gaode、tianditu.etc)
webGL地图要素渲染(适用于三维要素绘制)
快速重新渲染地图要素,动态修改地图样式(适用于矢量切片)(不用二次发布服务)
- (颜色获取) github.com/frogcat/lea…
- (样式调整)github.com/hnrchrdl/le…
切片地图加载(wmts)
wms地图服务加载
要素图层组加载过程数据获取(支持FeatureGroup loading和load事件)
地图要素移除,动态重新渲染底图(动画效果,缓冲效果)
地图矢量切片服务加载和渲染(非常重要)
- (mapbox切片渲染)github.com/SpatialServ…
- (geojson格式渲染)github.com/mapbox/geoj…