分享
查看: 2078|回复: 0

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

[复制链接]

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

发表于 2022-7-19 16:30:26 来自 分享 阅读模式 倒序浏览
zzv_icon2078 zzr_icon0 查看全部
05
TMS地图服务
在OGC发布WMTS标准之前,更早一些的一种地图瓦片标准是OSGeo发布的 TMS 标准。它与WMTS标准最大的不同就是瓦片索引的组织方式。
前面我们看到了 WMTS是:
Z 表示缩放层级,XY 的原点在左上角,X 从左向右,Y 从上向下。
【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务
而 TMS是:
Z 表示缩放层级,XY 的原点在左下角,X 从左向右,Y 从下向上
【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务
以Web墨卡托投影的TMS服务具体举例就是:
【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务
可见TMS切片的Y轴正好与WMTS的Y轴“相反”。因此在API 中,之前用 {y} 的“占位符”就要变成 {reverseY}。
【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务

在 QGIS 中加载 XYZTiles 如果是 TMS 标准的瓦片也是用的 {-y} 作为“占位符”。
案例

TMS以用GeoServer发布的TMS服务为例,同样可以查看他的元数据。这里面还是关注坐标系信息,同样需要是Web墨卡托投影坐标系。
【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务
然后就可以根据 TileSet 中的信息拼出 url。
  1. http://10.100.42.51:8080/geoserver/gwc/service/tms/1.0.0/myTest:simpleWorld@EPSG:900913@png/{z}/{x}/{reverseY}.png
复制代码

在 ThingJS 在线开发中加载,代码如下:
  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 = 'http://10.100.42.51:8080/geoserver/gwc/service/tms/1.0.0/myTest:simpleWorld@EPSG:900913@png/{z}/{x}/{reverseY}.png';    // 新建一个瓦片图层
  5.     var tileLayer1 = app.create({        type: 'TileLayer',        id: 'tileLayer1',
  6.         url,
  7.     });
  8.     map.addLayer(tileLayer1);
  9. });
复制代码

【森城市】GIS数据漫谈(十一)— 地图瓦片(切片)服务
总结:
1.我们支持对接OSGeo标准的TMS地图瓦片服务。
2.TMS地图瓦片服务的坐标系支持Web墨卡托投影坐标系(EPSG:3857/900913)。



工具推荐


森城市:一键生成3D城市,内置多种模板,自由编辑
• 森城市目前提供全国范围内110多个城市的标准三维场景的构建服务,使城市三维场景的构建速度提升至分钟级。
• 森城市支持不同类型城市数据的插入和自动融合,并提供友好而强大的场景编辑能力和性能处理能力,无需具备GIS、建模等专业技能,就可以轻松DIY自己的酷炫城市三维场景。
• 森城市具备开放的城市场景输出能力,无需担心场景后续使用的兼容问题。
低代码ThingJS:低代码灵活开发数字孪生可视化应用
• 低代码ThingJS提供了丰富的3D开发API、完善的开发文档和视频教程,熟悉基础的JavaScript前端知识即可上手数字孪生3D可视化应用开发
• 低代码ThingJS是纯H5的WebGL架构,可在各类主流网页浏览器中自如运行,包括可在移动端直接访问运行。
• 低代码ThingJS提供全生命周期的开发组件,大大提升数字孪生可视化项目开发效率。

avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t