SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务

本文主要是介绍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 链接

WMTS 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 没有。第零层的瓦片数量参考能力文档中 MatrixWidthMatrixHeight 即可,宽是 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 的设置:
错位效果1

2. tilingScheme 未设置或者设置错误

错位效果2

3. tilingScheme 类设置错误

注意地理坐标系如4490用 GeographicTilingScheme,投影坐标系如3857用 WebMercatorTilingScheme。
错位效果3

实用链接

  1. 将影像地图发布成 wmts 服务,并在客户端加载影像地图
  2. WebMapTileServiceImageryProvider API
  3. GeographicTilingScheme API
  4. WebMercatorTilingScheme API

这篇关于SuperMap iClient3D for WebGL 用 WebMapTileServiceImageryProvider 接口加载天地图 WMTS 服务的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/744978

相关文章

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

usb接口驱动异常问题常用解决方案

《usb接口驱动异常问题常用解决方案》当遇到USB接口驱动异常时,可以通过多种方法来解决,其中主要就包括重装USB控制器、禁用USB选择性暂停设置、更新或安装新的主板驱动等... usb接口驱动异常怎么办,USB接口驱动异常是常见问题,通常由驱动损坏、系统更新冲突、硬件故障或电源管理设置导致。以下是常用解决

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

Spring LDAP目录服务的使用示例

《SpringLDAP目录服务的使用示例》本文主要介绍了SpringLDAP目录服务的使用示例... 目录引言一、Spring LDAP基础二、LdapTemplate详解三、LDAP对象映射四、基本LDAP操作4.1 查询操作4.2 添加操作4.3 修改操作4.4 删除操作五、认证与授权六、高级特性与最佳

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口?2. 如何使用空接口?第一,第二,第三,3. 空接口几个要注意的坑坑1:坑2:坑3:接口-空接口1. 什么是空接

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringCloud之LoadBalancer负载均衡服务调用过程

《SpringCloud之LoadBalancer负载均衡服务调用过程》:本文主要介绍SpringCloud之LoadBalancer负载均衡服务调用过程,具有很好的参考价值,希望对大家有所帮助,... 目录前言一、LoadBalancer是什么?二、使用步骤1、启动consul2、客户端加入依赖3、以服务