本文主要是介绍SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务
- 申请天地图开发者 token
- 读懂能力文档和 WMTS 接口参数
- 1. WebGL 接口 API
- 2. 天地图能力文档
- 3. 对照能力文档填写 WMTS 参数
- 完整代码和加载效果
- 不能正常加载的情况
- 1. tileMatrixLabels 未设置或者设置错误
- 2. tilingScheme 未设置或者设置错误
- 3. tilingScheme 类设置错误
- 实用链接
作者:jjz
在GIS三维前端项目中,很多人有使用天地图 WMTS 服务作为底图的需求,但是超图 WebGL 中没有用到 WMTS 接口的示例,天地图的层级和其他 WMTS 服务也略有区别,常常导致加载错误。本文针对以上问题,提供在三维球上加载天地图地图瓦片服务的示例,并详细阐释加载 WMTS 的注意事项,帮助大家在 Cesium 或者 WebGL 中正确加载天地图。
申请天地图开发者 token
这一部分已经在 iDesktop 加载天地图教程中详细说明,注意行业选择其他,应用类型选择浏览器端即可。包括验证服务url的可用性,以及不可用时的解决办法,也在这篇教程中。各位务必按照步骤进行检查,确保服务可用。
读懂能力文档和 WMTS 接口参数
1. WebGL 接口 API
首先提供接口的总体图片,如果图片看不清,下文有详细解释。橙色为必填,黄色为建议填写。其他内容请查看接口的 API 链接。
2. 天地图能力文档
这一部分的填写需要对照天地图能力文档,例如:
https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token&request=GetCapabilities
3. 对照能力文档填写 WMTS 参数
接口属性的详细说明如下:
- url: 服务的地址
https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token
- format: 瓦片的格式
对应能力文档中Format
标签,此例中是 tiles。 - layer: 图层名
对应Layer
标签,此例中图层名为 vec。 - style: 样式或者风格
对应Style
标签,本例中是 default. - tileMatrixSetID: 瓦片集的唯一标识符
对应TileMatrixSet
标签中的Identifier
,本例中是 c。 - tileMatrixLabel: 层级的集合
对应TileMatrix
中的Identifier
,一般重点查看开始层级,天地图中是1;大部分服务是从0开始,注意区别。
let matrixIds = [];
for (let i = 0; i < 19; i++) {// 此处天地图为 i + 1,因为开始层级为 1;开始层级为 0 的写 i 即可matrixIds[i] = i + 1;
}
- tilingScheme: 几何图形在椭球表面的平铺方式
以天地图为例,vec_c 服务的 EPSG 是4490,所以椭球体要设置为 CGCS2000,一般默认是 WGS1984 的椭球体,Cesium.Ellipsoid.CGCS2000 这个参数是超图WebGL自己定义的,原生 Cesium 没有。第零层的瓦片数量参考能力文档中MatrixWidth
和MatrixHeight
即可,宽是 X,长是 Y。
tilingScheme: new Cesium.GeographicTilingScheme({ellipsoid: Cesium.Ellipsoid.CGCS2000,numberOfLevelZeroTilesX: 2,numberOfLevelZeroTilesY: 1
})
示例的 vec_c 是地理坐标系的服务,所以用 GeographicTilingScheme,如果是 vec_w 这样的投影坐标系服务,需要用 WebMercatorTilingScheme,参数填写是一样的。
- maximumLevel: 显示的最大层级
天地图服务最大层级为19,更大的级别没有图,如果不设置最大层级,到了20层后就加载不出来了。
完整代码和加载效果
这里贴上这个功能的完整代码
let viewer = new Cesium.Viewer('cesiumContainer');
let matrixIds = [];
for (let i = 0; i < 19; i++) {matrixIds[i] = i + 1;
}let wmtsImageryProvider = new Cesium.WebMapTileServiceImageryProvider({url: 'https://t0.tianditu.gov.cn/vec_c/wmts?service=wmts&tk=您的token',layer: 'vec',style: 'default',format: 'tiles',tileMatrixSetID: 'c',tileMatrixLabels: matrixIds,tilingScheme: new Cesium.GeographicTilingScheme({ellipsoid: Cesium.Ellipsoid.CGCS2000,numberOfLevelZeroTilesX: 2,numberOfLevelZeroTilesY: 1}),
});let tdtLayer = viewer.imageryLayers.addImageryProvider(wmtsImageryProvider);
// 设置叠加天地图图层的透明度,方便观察偏移情况
tdtLayer.alpha = 0.5;
加载的效果:
局部放大(天地图图层设置了透明度):
不能正常加载的情况
如果遇到以下错误的加载效果,请仔细对照前文进行修改。如果完全加载不出来,可能不止一个参数填写错误,或者 url 当前无法访问。
1. tileMatrixLabels 未设置或者设置错误
如果出现类似下图的情况,需要注意 tileMatrixLabels 的设置:
2. tilingScheme 未设置或者设置错误
3. tilingScheme 类设置错误
注意地理坐标系如4490用 GeographicTilingScheme,投影坐标系如3857用 WebMercatorTilingScheme。
实用链接
- 将影像地图发布成 wmts 服务,并在客户端加载影像地图
- WebMapTileServiceImageryProvider API
- GeographicTilingScheme API
- WebMercatorTilingScheme API
这篇关于SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!