请选择 进入手机版 | 继续访问电脑版
分享
首页 资讯 技术分享 查看内容

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

发表于 2022-7-1 17:29
zzv_icon81 zzr_icon0
摘要: 最主流的地图瓦片(切片)服务有两种:1.OGC标准的 WMTS 地图瓦片服务2.OSGeo标准的 TMS 地图瓦片服务04WMTS地图服务案例WMTS再次回到ArcGIS的服务地址。可以发现这里有个WMTS。这就说明ArcGIS也能发布WMTS地图服务 ...

最主流的地图瓦片(切片)服务有两种:

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

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

04

WMTS地图服务

案例


WMTS

再次回到ArcGIS的服务地址。

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

可以发现这里有个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);});

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

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

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

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

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

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

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

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

那我们就先替换这俩:

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 的样式。

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

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

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 ,发现有两个:

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

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

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

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

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

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

所以就可以替换了,因此对于这个具体例子来说,这里有两个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}.jpghttps://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即以键-值对作为参数)。也可以在地图服务的“元数据”中找到。

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

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

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

例如:

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?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的风格,一般来说都行。

代码如下:

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

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

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

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

总结:

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

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




工具推荐



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

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

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

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

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

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

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

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

相关文章