leafletjs可视化地理位置(更新地图同步)

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插件

github.com/jieter/Leaf…

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常用插件

定位当前位置