初次接触GIS离线地图项目踩坑

最近做了一个地图项目，第一次接触踩了很多坑所以想着写出来能让大家也避一避
先说下我们项目大致要求：
拿到车队的北斗GPS定位在地图上撒点显示，历史轨迹查看，电子围栏规划与显示 等功能 并且需要离线（内网运行）

第一坑 坐标系

常用地图的坐标系：

坐标系	地图	介绍
GCJ-02	谷歌矢量地图 高德地图 …(国内地图)	火星坐标系 国家测绘局出品规定国内地图都要用此坐标系，目前网上广泛流传的算法可以实现 0 偏差
BD09	百度地图	百度地图独有通过对GCJ-02坐标系二次加密产生
WGS84	谷歌卫星地图 谷歌地球 OpenStreetMap 天地图	GPS坐标 大地坐标系 EPSG4326 国际上广泛使用的
墨卡托投影	天地图	WEB投影坐标系 EPSG3857 坐标很好辨认值都比较大[13523111.584418062,3668754.246812698]

比如 上海博物馆坐标121.470849, 31.230327（WGS84）在不同坐标系地图下位置都会出现偏差，使用时必须先转成对应地图的坐标系
各个坐标系的转换算法网上有很多 可以自行去GitHub上搜索 转换后精度失误一般都在分米级别内
如： https://github.com/wandergis/coordtransform

讽刺的是作为官方规定的加密算法GCJ-02
网上传播的转换算法误差基本在分米级别内，更离谱的是作为作为官方地图平台的天地图居然不用GCJ-02 （ 不说百度高德了
谷歌这样的外企进入中国也被要求使用的GCJ-02）

第二坑 地图瓦片选择与离线瓦片的下载

地图的类型分为：
矢量地图 与 卫星影像地图 。 矢量地图就是咱们平时最常见的导航地图 瓦片的类型有两种： 图片瓦片 矢量数据瓦片。 卫星影像地图的瓦片只能是图片。
图片类型的缺点都知道会糊 矢量数据对电脑的性能有一定要求（一般都没问题 政府项目的老电脑要先测试下） 并且 矢量数据地图 可以实现 主题样式修改 3D效果 更多的地图交互 等等。

选择地图的时候一定要慎重， 要考虑 格式 地图风格 地图是否精细准确 是否是国内的 还有坐标系。

常用的切片地址：

1. 天地图： （天地图官网: http://lbs.tianditu.gov.cn/server/MapService.html ）

详见官网 （需要注册申请key 申请后免费下载）
底图：https://t5.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=YouTK

标签点位：https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=YouTK
卫星地图：https://t1.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=

2. 高德地图：

普通：http://wprd0{1,4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7
卫星：https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
卫星带道路：http://wprd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8

4. google地图：

普通： http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}
卫星：https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}

5. MapBoX地图（需要注册申请key 申请后免费下载）：

矢量数据： https://api.mapbox.com/v4/mapbox.mapbox-terrain-v2,mapbox.mapbox-bathymetry-v2,mapbox.mapbox-streets-v8/{z}/{x}/{y}.vector.pbf?sku=101Asds1IWRgC&access_token=You token
卫星： https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.webp?sku=1011GQt4HlNGF&access_token=You token

GitHub上挺多免费的下载项目可以使用，也推下我写的一个工具 https://gitee.com/houlaidelu/map-tiles-downloader_node

第三坑 地图js框架的选择

目前常用的框架有： MapBoxJS / MapBoxGLJS Openlayers Leaflet ArcGIS API for JS Cesium BMapGL(百度) 高德 。
高德 百度 框架只能用于加载自己的地图瓦片，

名称	是否开源	是否支持其他瓦片	特点	缺点
MapBoxGL	是	是	流畅的矢量地图瓦片加载 动态地图样式修改 地球 3D 动画效果多	离线地图时稍微麻烦点 ，坐标系不支持GCJ-02需要自己转换
Openlayers	是	是	简单易用 图层操作更加简便 切换其他地图时比较方便（官方也提供更多加载类） 对于不同坐标系地图加载有良好的适配（支持自定义projection）	暂不支持3D 加载MapBox矢量瓦片会出现卡顿
百度地图BMapGL	否	否	国产中文API例子多教程多 支持3D矢量瓦片 有大量应用场景例子与配套服务	不支持离线地图(需要手动将源码修改为本地) 并且因为使用BD09坐标系需要进行转换

根据不同的使用场景选择最适合你的框架 很重要