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

相关文章

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、以服务

使用Folium在Python中进行地图可视化的操作指南

《使用Folium在Python中进行地图可视化的操作指南》在数据分析和可视化领域,地图可视化是一项非常重要的技能,它能够帮助我们更直观地理解和展示地理空间数据,Folium是一个基于Python的地... 目录引言一、Folium简介与安装1. Folium简介2. 安装Folium二、基础使用1. 创建

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》:本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析

《MyBatis-Plus中Service接口的lambdaUpdate用法及实例分析》本文将详细讲解MyBatis-Plus中的lambdaUpdate用法,并提供丰富的案例来帮助读者更好地理解和应... 目录深入探索MyBATis-Plus中Service接口的lambdaUpdate用法及示例案例背景

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D