|
最主流的地图瓦片（切片）服务有两种： 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);
- });
怎样知道这个WMTS的请求地址是什么呢？我们可以打开看看这个WMTS地图服务的“元数据”（Metadata）。在Layer中找到它对应的地图服务的URL"模版"（template）。 能够这和uearth里加载瓦片地图的url地址很像。只是uearth里可能是{x}、{y}、{z}，但这里面又好像不太一样{Style}、{TileMatrixSet}、{TileMatrix}、{TileRow}、{TileCol}，“名字”不一样。其实{}就是个“占位符”，那具体里面怎么填呢？ 我们就来做“填空题”，从WMTS标准的定义来看 TileCol 其实就代表瓦片的X索引，TileRow 其实就代表瓦片的Y索引。那我们就先替换这俩： - 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
所以又可以填上一个空了： - 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
对于这个例子而言，由于两个url对应的TileMatrixSet区别不大，所以我们在ThingJS在线开发随便用哪个都行。 在WMTS标准中，获取瓦片图（GetTile）。除了用上面RESTful的方式请求服务地址外，还可以用KVP的方式来请求（key-value pair即以键-值对作为参数）。也可以在地图服务的“元数据”中找到。 具体需要请求参数的如下： 例如： - 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);
- });
当然具体还得看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提供全生命周期的开发组件，大大提升数字孪生可视化项目开发效率。
| 
1984
0
