amap-tianditu-layer

高德地图天地图图层插件，由于高德地图使用 GCJ-02 坐标，天地图使用 CGCS2000，当在高德地图中混合使用天地图时会有偏移问题。本插件借助高德 API 提供的 CustomLayer 接口，自定义瓦片计算过程渲染天地图，修正偏移。

注意目前该插件只在高德 API v1.4.15 做了测试。

本插件的工作原理：

高德回调 CustomLayer 的 render
    ↓↓
获取当前经纬度中心点(GCJ-02)
    ↓↓
转换中心点为 WGS84 坐标点
    ↓↓
使用 WGS84 中心点投影变幻计算当前需要加载的瓦片
    ↓↓
渲染瓦片

为什么中心点坐标是转为 WGS84，而不是转为 CGCS2000 ？主要是因为有现成的 GCJ-02 => WGS84 转换工具 gcoord ，而且 WGS84 和 CGCS2000 误差极小（非高精度基本可忽略），所以就这样处理了。

如何使用

npm 方式

npm i amap-tianditu-layer -S

// typescript 使用需要安装 @amap/amap-jsapi-types

import AMapTianDiTuLayer from "amap-tianditu-layer";

const map = new AMap.Map("container", {
  center: [112.936419, 28.18356],
  zoom: 3,
});

const tianDiTuLayer = AMapTianDiTuLayer({
  map: map,
  url:
    "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=你的key",
  zIndex: 2,
});

map.add(tianDiTuLayer);

cdn 方式

<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/amap-tianditu-layer.umd.js"></script>

<script>
  var map = new AMap.Map("container", {
    center: [117.000923, 36.675807],
  });
  var tianDiTuLayer = AMapTianDiTuLayer({
    map: map,
    url:
      "http://t{0,1,2,3}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX=[z]&TILEROW=[y]&TILECOL=[x]&tk=你的key",
    zIndex: 2,
  });

  map.add(tianDiTuLayer);
</script>

配置项

属性	类型	说明
url	string	天地图地址
map	Amap.Map	高德地图实例
renderType	'canvas' | 'dom'	渲染方式，默认为 dom
cacheSize	number	渲染方式为 canvas 时支持，内存中缓存图片的个数, 默认 50

另外 Amap.Customlayer 构造函数支持的配置项也通过该配置对象传入，AMapTianDiTuLayer 函数的返回值为 Amap.Customlayer 的实例。

Amap.Customlayer 可配置项及其实例方法见高德 Customlayer 的文档 https://lbs.amap.com/api/javascript-api/reference/self-own-layers#customlayer

url 的配置说明：

• 支持 http://t{0,1,2,3}.tianditu.gov.cn 方式配置子域名，花括号中的子域名将随机获取
• x , y, z 延续高德的解析风格，使用 [x] 中括号形式占位。

致谢

1. gcoord ，该库提供了坐标系转换算法。
2. leafletjs ，本插件的渲染过程，思路完全借鉴 leafletjs。
3. 以及网络上众多 GIS 技术相关的博客，不一一列举了。