浅谈地图可视化

前言

地图可视化在我们生活中无处不在，开车导航，寻找某个地方需要导航等，下面浅谈一下地图的一些知识及应用。

当前互联网地图的坐标系现状

• 地球坐标 (WGS84)

  • 国际标准，从专业GPS 设备中取出的数据的坐标系
  • 国际地图提供商使用的坐标系

• 火星坐标 (GCJ-02)也叫国测局坐标系

  • 中国标准，从国行移动设备中定位获取的坐标数据使用这个坐标系
  • 国家规定： 国内出版的各种地图系统（包括电子形式），必须至少采用GCJ-02对地理位置进行首次加密。

• 百度坐标 (BD-09)

  • 百度标准，百度SDK，百度地图，Geocoding使用(百度在火星坐标上来个二次加密)

经纬度的转换

• 百度地图
  • 转换WGS84地图点 BD-09 >> GCJ-02 >> WGS-84
  • 转换BD09地图点 WGS-84 >> GCJ-02 >> BD-09
• 高德地图
  • 转换WGS84地图点 GCJ-02 >> WGS-84
  • 转换GCJ-02地图点 WGS-84 >> GCJ-02

常用平台及库

• 百度地图API功能
• 高德地图API功能
• 四维图新mineData平台
• Mapbox GL JS
  Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

实时路况

// BMap版本
const map = new BMap.Map('mapContainer', { enableMapClick: false })
const traffic = new BMap.TrafficLayer()
map.addTileLayer(traffic) // 开启
map.removeTileLayer(traffic) // 关闭

// AMap版本
const map = new AMap.Map('mapContainer', {
  resizeEnable: true, // 是否监控地图容器尺寸变化
  zoom: 12 // 初始化地图层级
})
const traffic = new AMap.TileLayer.Traffic({ zIndex: 10 })
traffic.setMap(map)
traffic.show()
traffic.hide() // 关闭

新增地标

// BMap版本
// http//api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js
const mkrTool = new BMapLib.MarkerTool(map, {
   icon: './img/red.png',
   followText: '点击左键标记位置，Esc退出',
   autoClose: true
})
mkrTool.open()
mkrTool.close()
mkrTool.addEventListener('markend', function(e) {...})

// AMap版本
// 使用鼠标绘制工具实现
AMap.plugin([
  'AMap.MouseTool'
 ], function() {
 	// ...
 })
const drawingManager = new AMap.MouseTool(map)
drawingManager.on('draw', function(e) {....})

marker旋转及事件

// BMap版本
const marker = new BMap.Marker(new BMap.Point(114.02, 22.5), {
  icon: ’./img/marker.svg‘
})
marker.setRotation(direction)
marker.addEventListener('click', function(e) {...})
map.addOverlay(marker)
map.removeOverlay(marker)
map.clearOverlays() // 清除地图上所有的覆盖物

// AMap版本
const marker = new AMap.Marker({
  icon: ’./img/marker.svg‘,
  position: new AMap.LngLat(114.02, 22.5)
})
marker.setAngle(direction)
marker.on('click', function(e) {...})
map.add(marker)
map.remove(marker)
map.clearMap() // 清除地图上所有的覆盖物

设置视野

// 根据地图上添加的覆盖物分布情况设置视野
map.setViewport(pointArr) // BMap版本
map.setFitView(overlayListArr) // AMap版本

// 判断某个点是否在可视区域范围
map.getBounds().containsPoint(point) // BMap版本
map.getBounds().contains(point) // AMap版本