【森城市】GIS数据漫谈（十）— 地图瓦片（切片）服务

最主流的地图瓦片（切片）服务有两种：

1.OGC标准的 WMTS 地图瓦片服务

2.OSGeo标准的 TMS 地图瓦片服务

04

WMTS地图服务

案例

WMTS

再次回到ArcGIS的服务地址。

可以发现这里有个WMTS。这就说明ArcGIS也能发布WMTS地图服务。

那低代码能不能加载WMTS地图服务呢？当然可以！

代码如下：

1. var app = new THING.App();
   
2. app.background = [0, 0, 0];THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {    // 新建一个地图
   
3.     var map = app.create({        type: 'Map'
   
4.     });    var url = 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/default028mm/{z}/{y}/{x}.jpg';    // 新建一个瓦片图层
   
5.     var tileLayer1 = app.create({        type: 'TileLayer',        id: 'tileLayer1',
   
6.         url,
   
7.     });
   
8.     map.addLayer(tileLayer1);
   
9. });

复制代码

怎样知道这个WMTS的请求地址是什么呢？我们可以打开看看这个WMTS地图服务的“元数据”（Metadata）。

在Layer中找到它对应的地图服务的URL"模版"（template）。

能够这和uearth里加载瓦片地图的url地址很像。只是uearth里可能是{x}、{y}、{z}，但这里面又好像不太一样{Style}、{TileMatrixSet}、{TileMatrix}、{TileRow}、{TileCol}，“名字”不一样。

其实{}就是个“占位符”，那具体里面怎么填呢？

我们就来做“填空题”，从WMTS标准的定义来看 TileCol 其实就代表瓦片的X索引，TileRow 其实就代表瓦片的Y索引。

那我们就先替换这俩：

1. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/{Style}/{TileMatrixSet}/{TileMatrix}/{y}/{x}.jpg

复制代码

还剩下 {Style}、{TileMatrixSet}、{TileMatrix} 该填什么呢？{Style}是这个地图服务的样式的“占位符”，还是在Layer中找，可能有一个，也可能有多个。在这个例子里找到只有一个 default 的样式。

所以又可以填上一个空了：

1. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/{TileMatrixSet}/{TileMatrix}/{y}/{x}.jpg

复制代码

然后再去找 TileMatrixSet ，发现有两个：

可以简单理解为每个 TileMatrixSet 定义了一种切片方案 ，然后再去对应的 TileMatrixSet 里去找具体的参数信息。Identifier 定义了切片方案的 ID，SupportedCRS 定义了切片方案的空间坐标系（注意这个示例中的两个 TileMatrixSet 都是Web墨卡托投影坐标系），TileMatrix 定义了各级别切片的细节，比如级别ID、比例尺除数、原点（左上角）坐标、单张瓦片的尺寸等等。

比如示例中  default028mm  这个 TileMatrixSet 定义了0-23级切片的具体细节。

GoogleMapsCompatible  这个 TileMatrixSet 定义了0-18级切片的具体细节。

所以就可以替换了，因此对于这个具体例子来说，这里有两个url可用。

1. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/default028mm/{z}/{y}/{x}.jpg
   
2. ​
   
3. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/GoogleMapsCompatible/{z}/{y}/{x}.jpg

复制代码

对于这个例子而言，由于两个url对应的TileMatrixSet区别不大，所以我们在ThingJS在线开发随便用哪个都行。

在WMTS标准中，获取瓦片图（GetTile）。除了用上面RESTful的方式请求服务地址外，还可以用KVP的方式来请求（key-value pair即以键-值对作为参数）。也可以在地图服务的“元数据”中找到。

具体需要请求参数的如下：

例如：

1. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS/tile/1.0.0/World_Topo_Map/default/default028mm/{z}/{y}/{x}.jpg

复制代码

等价于：

1. https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS?Service=WMTS&Request=GetTile&Version=1.0.0&Layer=World_Topo_Map&Style=default&Format=jpg&TileMatrixSet=default028mm&TileMatrix={z}&TileRow={y}&TileCol={x}

复制代码

所以在 低代码中给瓦片图层（TileLayer）设置的 url 是用RESTful的风格，还是用KVP的风格，一般来说都行。

代码如下：

1. var app = new THING.App();
   
2. app.background = [0, 0, 0];THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {    var map = app.create({        type: 'Map'
   
3.     });    var url = 'https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/WMTS?Service=WMTS&Request=GetTile&Version=1.0.0&Layer=World_Topo_Map&Style=default&Format=jpg&TileMatrixSet=default028mm&TileMatrix={z}&TileRow={y}&TileCol={x}';    var tileLayer1 = app.create({        type: 'TileLayer',        id: 'tileLayer1',
   
4.         url,
   
5.     });
   
6.     map.addLayer(tileLayer1);
   
7. });

复制代码

当然具体还得看WTMS的“元数据”中，GetTile 提供了哪些访问方式比如下面就只提供了KVP的方式。

总结：

1.我们支持对接OGC标准的WMTS地图瓦片服务

2.WMTS地图瓦片服务的坐标系目前支持Web墨卡托投影坐标系（EPSG:3857/900913）

工具推荐

森城市：一键生成3D城市，内置多种模板，自由编辑

• 森城市目前提供全国范围内110多个城市的标准三维场景的构建服务，使城市三维场景的构建速度提升至分钟级。

• 森城市支持不同类型城市数据的插入和自动融合，并提供友好而强大的场景编辑能力和性能处理能力，无需具备GIS、建模等专业技能，就可以轻松DIY自己的酷炫城市三维场景。

• 森城市具备开放的城市场景输出能力，无需担心场景后续使用的兼容问题。

低代码ThingJS：低代码灵活开发数字孪生可视化应用

• 低代码ThingJS提供了丰富的3D开发API、完善的开发文档和视频教程，熟悉基础的JavaScript前端知识即可上手数字孪生3D可视化应用开发

• 低代码ThingJS是纯H5的WebGL架构，可在各类主流网页浏览器中自如运行，包括可在移动端直接访问运行。

• 低代码ThingJS提供全生命周期的开发组件，大大提升数字孪生可视化项目开发效率。