ArcGIS JS API 加载 TMS 地图瓦片

iseeyu3年前 (2024-02-21)推广151

TMS 瓦片编号示意图

TMS 地图瓦片有如下特点：

瓦片编号从左下角开始，x轴为 -85.0511° 纬线，y轴为 180° 经线，第一个瓦片编号为 (0, 0)；
x 轴编号（行号）从左到右依次递增，y 轴编号（列号）从下到上依次递增；
单个地图瓦片为 256×256 大小的正方形图片。

此外，地图缩放等级 z 和每列（或每行）瓦片的数量(记为 n )有如下关系：

$n = 2^{z}$ $n = 2^{z}$

TMS 的优点是地图瓦片可存放在本地，类似于静态文件，可使用 Nginx 等 Web 服务器直接代理，然后通过一定规则进行访问，便于地图瓦片服务离线化部署。

TMS 通常采用类似于如下 url 进行访问：

http://xxx/xxx/{z}/{x}/{y}.png

z, x, y 分别代表缩放级别、行号、列号，后缀根据图片格式而定，可以是 png ，也可以是 jpg，jpeg，pbf 等。

2. Google/Bing/OSM/ESRI 地图瓦片

这种地图瓦片的组织方式为：原点在左上角，x轴在 85.0511° 纬线，y轴为 180° 经线；y轴编号从上到下递增，其他特点和 TMS 无异。简单说就是 y 轴方向和 TMS 相反。也正是这一差别，我最初在使用 ArcGIS JS API 加载本地 TMS 地图瓦片时发现瓦片在竖直方向的顺序一直是反的。Google, Bing, OSM 以及 ESRI 都是这种编号方式（有人将其误称为 TMS ），至于为何这样编号，历史问题，不去探究。

Google Map 地图瓦片编号

如若使用 ArcGIS JS API 加载 TMS 地图瓦片，有两种方案：

预先将所有瓦片的 y 轴编号转置一下，然后再加载，转置公式如下：

TMS 瓦片数据不变，前端基于 ArcGIS JS API 直接定义 TMSLayer。

方案1确实可行，但有时离线地图服务不仅仅是给 ArcGIS JS API 使用的。比如 Cesium 要调用 TMS 离线地图，而本地的离线地图服务 y 轴编号经过了转置，这样又不能正确加载地图了（当然，可以做两套瓦片，但没必要）。

接下来着重介绍下方案2。

3. 定义 TMSLayer

ArcGIS JS API 本身不带有 TMSLayer 对象，但可以使用 BaseTileLayer 的 createSubclass 方法定义一个 TMSLayer 。我们需要给 TMSLayer 定义一个 urlTemplate 属性并重写getTileUrl方法。
核心在于：在重写 getTileUrl 方法时，对 y 轴编号做转置处理。通过这一步告知 ArcGIS API 请求瓦片时，哪个才是正确的瓦片编号。
代码如下：

let TMSLayer = BaseTileLayer.createSubclass({
  properties: {
    urlTemplate: null
  },

  getTileUrl: function (z, y, x) {
    // 这里对y轴瓦片编号进行转置
    let y2 = Math.pow(2, z) - y - 1;
    return this.urlTemplate
      .replace("{z}", z)
      .replace("{x}", x)
      .replace("{y}", y2);
  },
});

加载TMS地图：

let tmsLayer = new TMSLayer({
  urlTemplate: "http:localhost:8090/12/{z}/{x}/{y}.png"
});

let map = new Map({
  layers: [tmsLayer]
});

let view = new SceneView({
  container: "viewDiv",
  map: map,
  center: [120, 30],
  zoom: 8
});