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

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

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

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

WMTS地图服务

再次回到ArcGIS的服务地址。

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

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

代码如下：

var app = new THING.App();app.background = [0, 0, 0];THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {    // 新建一个地图    var map = app.create({        type: 'Map'    });    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';    // 新建一个瓦片图层    var tileLayer1 = app.create({        type: 'TileLayer',        id: 'tileLayer1',        url,    });    map.addLayer(tileLayer1);});

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

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

那我们就先替换这俩：

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

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可用。

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​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

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

例如：

等价于：

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

代码如下：

var app = new THING.App();app.background = [0, 0, 0];THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {    var map = app.create({        type: 'Map'    });    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',        url,    });    map.addLayer(tileLayer1);});

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

总结：

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

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

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

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

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

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

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

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