移动端地图技术

前言

介绍地图之前我们首先了解它的基本组成。相信大家都了解拼图游戏的原理，把一张大图切割成若干小块，然后按照一定的规则拼接起来。地图的原理也是一样。我搜罗的目前移动端比较常见的绘制地图的方法，与大家分享。

背景

互联网地图服务商的在线地图都通过瓦片的方式提供，称为瓦片地图服务。最常见的地图瓦片是图片格式的，现在有的地图服务商也提供了矢量的瓦片数据，然后在用户端使用Canvas渲染成图片，如node-canvas实现百度地图个性化底图绘制。
在进行地图开发时，为获取特定经纬度所在区域的瓦片和获取瓦片上像素点对应的经纬度，经常需要进行经纬度坐标与瓦片坐标、像素坐标的相互转换。

主要经纬度坐标系

国际标准的经纬度坐标是WGS84，Open Street Map、外国版的Google Map都是采用WGS84；高德地图使用的坐标系是GCJ-02；百度地图使用的坐标系是BD-09。高德地图和百度地图都提供了在线的单向坐标转换接口，将其他坐标系换化到自己的坐标系，但这种转换受限于http url请求字段长度和网络请求延迟，批量处理并不实用。离线相互转换可以通过开源JavaScript库coordtransform实现，误差在10米左右。
虽然各地图服务商经纬度坐标系不同，但某一互联网地图的经纬度坐标与瓦片坐标相互转换只与该地图商的墨卡托投影和瓦片编号的定义有关，跟地图商采用的大地坐标系标准无关。

瓦片切割和瓦片坐标

地图瓦片具有以下特点：

1. 具有唯一的瓦片等级（Level）和瓦片坐标编号（tileX, tileY）。
1. 瓦片分辨率为256 $\times$ 256。
1. 最小的地图等级是0，此时世界地图只由一张瓦片组成。
1. 瓦片等级越高，组成世界地图的瓦片数越多，可以展示的地图越详细。
1. 某一瓦片等级地图的瓦片是由低一级的各瓦片切割成的4个瓦片组成，形成了瓦片金字塔。

瓦片坐标和经纬度坐标之间存在关系，而这层关系是通过后端接口加密处理并且一一映射后的，有自己的计算公式

坐标转换图解
[图片上传失败...(image-5b8538-1618472263075)]

瓦片地图等级范围

瓦片地图等级范围反映了地图可缩放的程度。
虽然最小的瓦片等级是0，但是部分地图并不提供0级或其他较小瓦片等级的地图，因为此时的世界地图将会很小，不能铺满用户设备窗口。
经过实际测试，各地图服务商的瓦片等级和测试链接如下：

百度图片瓦片的层级是[3~18] http://online1.map.bdimg.com/onlinelabel/?qt=tile&x=49310&y=10242&z=18
百度主页的层级是[3~19] http://map.baidu.com/
高德图片瓦片的层级是[1~19] http://wprd03.is.autonavi.com/appmaptile?style=7&x=427289&y=227618&z=19
高德地图官网介绍的高德地图层级：
获取当前地图缩放级别,在PC上，默认取值范围为[3,18]；在移动设备上，默认取值范围为[3-19]
谷歌地图瓦片层级是[0~21] http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=1709157&y=910472&z=21&s=Galil

下图是百度地图的一个瓦片图片展示：

[图片上传失败...(image-ce75b9-1618472263075)]

瓦片等级由2的次方来划分的，即1到4，4到16，16到
如图示意：
[图片上传失败...(image-fb329e-1618472263075)]

需要注意的问题

瓦片像素坐标的起始点

高德地图、谷歌地图的瓦片坐标起点在左上角，像素坐标（pixelX, pixelY）在瓦片中的起点为左上角。
百度地图中，像素坐标（pixelX, pixelY）的起点为左下角。

百度地图技术介绍

简单介绍一个地图的底图的相关知识吧，我们眼中看到的丰富的地图信息，其中组成地图的主要元素，莫过于地图的一张张底图瓦片了。如下图所示，

一般我们打开了一个地图，其实际上可能会像上图一样，由一堆瓦片组成。1，2，3，4表示不同的瓦片。而某一张瓦片如下图所示
在线地址：http://developer.baidu.com/map/custom/

百度地图底图绘制技术现状

要想绘制上面所示的底图，目前现在主要有两类技术

栅格： 也就是传意义的图片技术，在server端把图片画好。浏览器使用node-canvas实现百度地图个性化底图绘制标签拼出来
矢量：在浏览器使用canvas技术，将矢量的数据，在浏览器完成渲染。它最大的问题在于：只支持高端浏览器

百度地图，目前两种技术都已经实现，如果大家使用的是mapapi,在高端浏览器下打开，你会发现，他是使用canvas绘制的。
其中的地图底图在IE678等浏览器下，就是使用node-canvas在后端绘制出来的,获取当前绘制经纬度，之后通过接口调用瓦片，
经纬度坐标与瓦片坐标、像素坐标的相互转换，以平面坐标为中间量进行转换。主要代码为

// Bmap为百度JavaScript API V2.0的地图对象
  lnglatToPoint(longitude, latitude) {
    let projection = new BMap.MercatorProjection();
    let lnglat = new BMap.Point(longitude, latitude);
    let point = projection.lngLatToPoint(lnglat);
    return {
      pointX: point.x,
      pointY: point.y
    };
  }

  pointToLnglat(pointX, pointY) {
    let projection = new BMap.MercatorProjection();
    let point = new BMap.Pixel(pointX, pointY);
    let lnglat = projection.pointToLngLat(point);
    return {
      lng: lnglat.lng,
      lat: lnglat.lat
    };
  }

http://developer.baidu.com/map/jsdemo.htm#a1_2

有兴趣可以使用不同的浏览器打开看看就可以看出来。

如图所示

[图片上传失败...(image-809df1-1618472263075)]

canvas绘制图片的优点

1.它允许我们使用canvas的语法和接口写成的js代码，放在server跑。
2.减少大量的DOM操作可以大大提升性能。

如介绍

var Canvas = require('canvas')
  , canvas = new Canvas(200,200)
  , ctx = canvas.getContext('2d');

ctx.font = '30px Impact';
ctx.rotate(.1);
ctx.fillText("Awesome!", 50, 100);

var te = ctx.measureText('Awesome!');
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.beginPath();
ctx.lineTo(50, 102);
ctx.lineTo(50 + te.width, 102);
ctx.stroke();

console.log('node-canvas实现百度地图个性化底图绘制');

目前使用canvas的原因有以下几点：

百度地图已经很好的实现使用canvas技术在浏览器完成渲染。

并有不错的展现效果和性能，在移动端体验更好。因为矢量的数据比请求图片的体积要小的多

在canvas的方案下，已经实现个性化底图的绘制效果

底图绘制由样式+矢量数据组成。只要修改替换样式文件，就可以实现个性化地图的渲染。

低端浏览器如IE6-8等浏览器，是不支持canvas功能的。

展现地图底图，必须使用栅格图实现。需要有后端技术来生成底图

由于不样的样式要求得到不同的底图。就需要图片是实时绘制的，而且要求性能必须好

在线地址：http://api.map.baidu.com/customimage/tile?x=788&y=293&z=12&customid=midnight
可以看的出来，速度是很快的。
[图片上传失败...(image-b5a7e5-1618472263075)]
(9个瓦片生成的大图)

参考资料

https://yolkpie.net/2021/03/30/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%9C%B0%E5%9B%BE%E6%8A%80%E6%9C%AF/