ArcGIS JS API 加载 TMS 地图瓦片


简介

  • 对比 TMS 地图瓦片和 Google/OSM/Bing/ESRI 地图瓦片编号的区别
  • 实现 ArcGIS API for JS 加载 TMS 地图瓦片

1. TMS 地图瓦片

TMS(Tile Map Service) 是 OSGeo (开源地理基金会) 提出的一种地图瓦片服务。额外补充一句,WMTS、WMS、WFS这些是 OGC(开放地理空间信息联盟)提出的。

TMS 瓦片编号示意图

TMS 地图瓦片有如下特点:

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

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

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 地图瓦片,有两种方案:

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

  1. 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
});

4. 加载结果

TMS 加载结果

原文首发于 ArcGIS JS API 加载 TMS 地图瓦片 · 语雀 (yuque.com)

你可能感兴趣的:(ArcGIS JS API 加载 TMS 地图瓦片)