当前位置： 首页 > article >正文

SuperMap iClient3D for WebGL 如何加载WMTS服务

article 2026/1/18 5:58:52

在 SuperMap iClient3D for WebGL 中加载WMTS服务时，参数配置很关键！下面我们详细介绍如何正确填写参数，确保影像服务完美加载。

一、数据制作

对于上述视频中的地图制作，此处不做讲述，如有需要可访问：Online 开发者中心

可视化案例中提供了详细的代码、数据下载链接及数据制作过程。

二、相关参数对应详解

三、相关参数说明
参数值说明
url
’http://localhost:8090/iserver/services/map-HeNan/wmts100‘		WMTS服务的URL地址，指向本地iServer发布的河南省地图服务
layer'河南省地形图'WMTS服务中要加载的图层名称
style'default'图层的样式，通常使用默认样式
format'image/png'瓦片图像的格式，这里使用PNG格式
tileMatrixSetID'CUSTOM_河南省地形图'瓦片矩阵集的ID，标识特定的瓦片切割方案
tileMatrixLabels['0', '1', '2', '3']瓦片矩阵级别的标签，对应不同的缩放级别
tilingSchemeSuperMap3D.GeographicTilingScheme对象定义瓦片切割方案的地理参考系统
numberOfLevelZeroTilesX3零级(最顶层)X方向的瓦片数量
numberOfLevelZeroTilesY2零级(最顶层)Y方向的瓦片数量
ellipsoidSuperMap3D.Ellipsoid.CGCS2000使用CGCS2000椭球体(中国大地坐标系2000)
rectangleSuperMap3D.Rectangle.fromDegrees(...)定义地图范围的矩形区域(经度110.19°-116.81°，纬度31.25°-36.51°)
scaleDenominators[4367830.187724358, ...]各级别的比例尺分母，用于计算地图比例尺
customDPISuperMap3D.Cartesian2(90.714..., 90.714...)自定义DPI(每英寸点数)设置，X和Y方向的值

四、示例完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加载 WMTS 服务</title><link href="../../Build/SuperMap3D/Widgets/widgets.css" rel="stylesheet"><link href="./css/pretty.css" rel="stylesheet"><script src="./js/jquery.min.js"></script><script src="./js/spectrum.js"></script><script src="./js/config.js"></script><script src="./js/tooltip.js"></script><script type="text/javascript" src="../../Build/SuperMap3D/SuperMap3D.js"></script>
</head><body><div id="Container"></div><div id='loadingbar' class="spinner"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div><script>// 页面加载完成后执行的函数，初始化 SuperMap3D 地图function onload(SuperMap3D) {// 通过 config.js 中的 getEngineType 函数，获取引擎类型（EngineType），用于设置启动方式let EngineType = getEngineType();// 创建一个 SuperMap3D 的 Viewer 实例，将其显示在 id 为 'Container' 的容器中let viewer = new SuperMap3D.Viewer('Container', {contextOptions: {// 设置 WebGL 上下文类型，Webgl2 对应值为 2，WebGPU 对应值为 3contextType: Number(EngineType),}});// 当场景加载完成后，调用 init 函数进行初始化操作viewer.scenePromise.then(function (scene) {init(SuperMap3D, scene, viewer);});}// 初始化地图场景的函数function init(SuperMap3D, scene, viewer) {// 设置地图的分辨率比例，根据设备的像素比进行调整viewer.resolutionScale = window.devicePixelRatio;$('#loadingbar').remove();// 添加 WMTS 服务let HeNanWMTS = viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapTileServiceImageryProvider({url: 'http://localhost:8090/iserver/services/map-HeNan/wmts100',layer: '河南省地形图',style: 'default',format: "image/png",tileMatrixSetID: "CUSTOM_河南省地形图",tileMatrixLabels: ['0', '1', '2', '3'],tilingScheme: new SuperMap3D.GeographicTilingScheme({numberOfLevelZeroTilesX: 3,numberOfLevelZeroTilesY: 2,ellipsoid: SuperMap3D.Ellipsoid.CGCS2000,rectangle: SuperMap3D.Rectangle.fromDegrees(110.19027419392319, 31.249054325714976, 116.8093213381059, 36.50948320842994),scaleDenominators: [4367830.187724358, 2183915.093862179, 1091957.5469310896, 545978.7734655448],customDPI: new SuperMap3D.Cartesian2(90.7142857142857, 90.7142857142857),}),}));viewer.flyTo(HeNanWMTS);}// 检查 SuperMap3D 是否已经定义，如果已经定义则调用 onload 函数进行初始化if (typeof SuperMap3D !== 'undefined') {onload(SuperMap3D);}</script>
</body></html>

相关文章：

SuperMap iClient3D for WebGL 如何加载WMTS服务

在 SuperMap iClient3D for WebGL 中加载WMTS服务时&#xff0c;参数配置很关键&#xff01;下面我们详细介绍如何正确填写参数&#xff0c;确保影像服务完美加载。 一、数据制作 对于上述视频中的地图制作&#xff0c;此处不做讲述&#xff0c;如有需要可访问&#xff1a;Onl…...

编程日记 2026/1/12 14:45:16

组件自身如何向外暴露一个子组件

最近在开发是遇到一个问题，原本是在组件内的一个功能被ui设计稿给搞到了外面，产品也不同意放在子组件内。于是一个问题就来，抽出来放到外面的部分依赖的也是组件内部的数据和逻辑，所以如果外面再重写这一部分，显然浪费感情，并且又要把依赖关系挪出去，也不划算。 于是，…...

编程日记 2026/1/15 9:35:35

《软件设计师》复习笔记（11.4）——处理流程设计、系统设计、人机界面设计

目录 一、业务流程建模 二、流程设计工具 三、业务流程重组&#xff08;BPR&#xff09; 四、业务流程管理&#xff08;BPM&#xff09; 真题示例&#xff1a; 五、系统设计 1. 主要目的 2. 设计方法 3. 主要内容 4. 设计原则 真题示例&#xff1a; 六、人机界面设…...

编程日记 2026/1/11 4:57:06

深入解析B站androidApp接口：从bilibili.api.ticket.v1.Ticket/GetTicket到SendMsg的技术分析

前言 最近一段时间&#xff0c;我对B站的App接口进行了深入分析&#xff0c;特别是关注了认证机制和私信功能的实现。通过逆向工程和网络抓包&#xff0c;发现了B站移动端API的底层工作原理&#xff0c;包括设备标识生成机制、认证流程和消息传输协议。本文将分享这些研究成果…...

编程日记 2026/1/17 16:34:30

#去除知乎中“盐选”付费故事

添加油猴脚本&#xff0c;去除知乎中“盐选”付费故事 // UserScript // name 盐选内容隐藏脚本 // namespace http://tampermonkey.net/ // version 0.2 // description 自动隐藏含有“盐选专栏”或“盐选”文字的回答卡片 // author YourName // mat…...

编程日记 2025/12/6 15:50:48

MATLAB脚本实现了一个转子系统的参数扫描和分岔分析

% 参数扫描范围 clc; clear; close all;S_values 500:200:20000; % 转速范围% 定义系统参数 N 5; % 质量点数量 num_nodes N; % 节点数 num_dofs_per_node 4; % 每个节点的自由度数 num_elements num_nodes-1; % 单元数 total_dofs num_nodes * num_dofs_per_node; % 总自…...

编程日记 2026/1/8 12:00:37

UWP发展历程

通用Windows平台(UWP)发展历程 引言 通用Windows平台(Universal Windows Platform, UWP)是微软为实现"一次编写&#xff0c;处处运行"的愿景而打造的现代应用程序平台。作为微软统一Windows生态系统的核心战略组成部分&#xff0c;UWP代表了从传统Win32应用向现代应…...

编程日记 2026/1/12 14:47:36

数据库相关概念，关系型数据库的核心要素，MySQL（特点，安装，环境变量配置，启动，停止，客户端连接），数据模型

目录 数据库相关概念 MySQL&#xff08;特点&#xff0c;安装&#xff0c;环境变量配置&#xff0c;启动和停止&#xff0c;客户端连接&#xff09; MySQL数据库的特点 Windows下安装MySQL MySQL 8.0.36&#xff08;安装版&#xff09; MySQL安装 配置Path环境变量 MySQ…...

编程日记 2026/1/16 19:36:55

Facebook隐私保护：从技术到伦理的探索

在这个数字化时代&#xff0c;隐私保护已成为公众关注的焦点。Facebook&#xff0c;作为全球最大的社交媒体平台之一&#xff0c;其用户隐私保护问题更是引起了广泛的讨论。本文将从技术层面和伦理层面探讨 Facebook 在隐私保护方面的努力和挑战。 技术层面的隐私保护 在技术…...

编程日记 2026/1/15 8:11:36

三维点拟合平面ransac c++

理论 平面的一般定义 在三维空间中&#xff0c;一个平面可以由两个要素唯一确定&#xff1a; 法向量 n(a,b,c)&#xff1a;垂直于平面的方向 平面上一点 平面上任意一点 p(x,y,z) 满足&#xff1a; ( p − p 0 ) ∗ n 0 (p - p0) * n 0 (p−p0)∗n0 即 a ( x − x 0 ) …...

编程日记 2025/11/22 22:36:38

香港服务器CPU对比：Intel E3与E5系列核心区别与使用场景

香港服务器的 CPU 配置(核心数与主频)直接决定了其并发处理能力和数据运算效率&#xff0c;例如高频多核处理器可显著提升多线程任务响应速度。在实际业务场景中&#xff0c;不同负载需求对 CPU 架构的要求存在显著差异——以 Intel E3 和 E5 系列为例&#xff0c;由于两者在性…...

编程日记 2026/1/11 4:56:57

ChatGPT-o3辅助学术大纲效果如何？

目录 1 引言 2 背景综述 2.1 自动驾驶雷达感知 2.2 生成模型演进&#xff1a;从 GAN 到 Diffusion 3 相关工作 3.1 雷达点云增强与超分辨率 3.2 扩散模型在数据增广中的应用 4 方法论 4.1 问题定义与总览 4.2 数据预处理与雷达→体素表示 4.3 潜在体素扩散网络&…...

编程日记 2026/1/12 8:12:07

AI大模型API文档的核心内容概述，以通用框架和典型实现为例

以下是AI大模型API文档的核心内容概述&#xff0c;以通用框架和典型实现为例&#xff1a; 一、API基础架构 1. 基础信息 API类型&#xff1a;RESTful API或gRPC&#xff08;如阿里云通义千问支持HTTPS接口&#xff09;请求方式&#xff1a;通常为POST方法基础URL&#xff1a…...

编程日记 2026/1/11 2:27:59

使用pnpm第一次运行项目报错 ERR_PNPM_NO_PKG_MANIFEST No package.json found in E:\

开始用unibestpnpm写一个小程序 运行pnpm init报错 如标题所示没有package.json这个文件 博主犯了一个很愚蠢的错误。。 准备方案手动创建一个json文件 此时才发现没到根目录下&#xff0c;创建了一个项目之后就没有切入文件夹里。 切入根目录再下载就成功啦...

编程日记 2026/1/11 4:56:52

单线服务器有什么优点

单线服务器是一个普遍存在的术语&#xff0c;它是指一种服务器连接互联网时只使用一个物理线路的服务器。简单来说&#xff0c;就是使用一条网络线路的服务器&#xff0c;上传和下载的数据都通过一个通道实现。在当今数字化的时代&#xff0c;服务器的选择至关重要。今天&#…...

编程日记 2025/5/12 14:32:19

手持式三维扫描设备赋能智能汽车制造

随着电动化与智能化趋势的加速&#xff0c;传统逆向工程手段已难以满足复杂零部件的建模需求。 ‌3D逆向建模‌技术&#xff0c;为汽车制造企业提供高效、精准的数字化解决方案。 传统汽车零部件的尺寸检测与建模依赖三坐标测量机&#xff08;CMM&#xff09;或人工测绘&#…...

编程日记 2026/1/11 4:56:50

FA-YOLO：基于FMDS与AGMF的高效目标检测算法解析

本文《FA-YOLO: Research On Efficient Feature Selection YOLO Improved Algorithm Based On FMDS and AGMF Modules》针对YOLO系列在特征融合与动态调整上的不足，提出两种创新模块：​FMDS（细粒度多尺度动态选择模块）​和AGMF（自适应门控多分支聚焦融合模块）​。论文结构…...

编程日记 2025/6/17 7:23:03

Hutool之DateUtil：让Java日期处理变得更加简单

前言 在Java开发中&#xff0c;日期和时间的处理是一个常见问题。为了简化这个过程&#xff0c;许多开发者会使用第三方工具包&#xff0c;如Hutool。Hutool是一个Java工具包&#xff0c;提供了许多实用的功能&#xff0c;其中之一就是日期处理。日期时间工具类是Hutool的核心包…...

编程日记 2026/1/9 13:56:09

Ambari 中移除/重装 yarn 集群中的 NodeManager 节点

文章目录 背景分析解决分析：现有 NodeManager 情况移除：240 服务器上的 NodeManager重新安装：240 服务器上的安装 NodeManager疑问为什么直接添加就可以运行？参考背景 项目中有Spark应用，主要在 yarn 集群中部署。 现在发现 yarn 集群中的节点资源过剩，需要将部分节点移…...

编程日记 2026/1/9 13:56:12

小程序在 skyline 下如何开启多行省略

参考&#xff1a;https://developers.weixin.qq.com/community/develop/doc/000a648baacca06e83f1034d66c000 前言 小程序在 skyline 下不支持 line-clamp&#xff0c;想要开启多行省略使用 text 组件的 max-lines 结合 overflow 属性。 解决办法&#xff1a;skyline 下不支…...

编程日记 2026/1/9 13:45:37

uni.createInnerAudioContext踩坑duration在真机环境一直为0

解决 uni.createInnerAudioContext 的 duration 在真机环境一直为 0 的问题 在使用 uni.createInnerAudioContext 播放音频时，开发者可能会遇到以下问题： duration 在真机环境中一直为 0：即使音频文件是正常的，duration 属性也无法正确获取音频的时长。音频实例未放到全局…...

编程日记 2025/12/2 13:46:48

《MySQL：MySQL数据类型分类》

数据类型分类 数值类 tinyint类型 数值越界测试。 在MySQL中&#xff0c;整型可以指定是有符号的和无符号的&#xff0c;默认是有符号的。 可以通过UNSIGNED来说明某个字段是无符号的。 无符号整型数值越界测试。 如果我们向mysql特定的类型中插入不合法的数据&#xff0c;my…...

编程日记 2026/1/15 7:25:05

Kubernetes》》k8s》》Namespace

Namespace 概述 Namespace&#xff08;命名空间&#xff09; 是 Kubernetes 中用于逻辑隔离集群资源的机制&#xff0c;可将同一集群划分为多个虚拟环境&#xff0c;适用于多团队、多项目或多环境&#xff08;如开发、测试、生产&#xff09;的场景。 核心作用&#xff1a; 资…...

编程日记 2025/12/3 23:50:28

ZYNQ笔记（八）：UART 串口中断

版本&#xff1a;Vivado2020.2&#xff08;Vitis&#xff09; 任务&#xff1a;UART串口中断实验&#xff0c;实现串口中断数据回环&#xff08;接收数据并发送出去&#xff09; 目录 一、介绍 二、硬件设计 三、软件设计 四、效果 一、介绍 ZYNQ 的 UART&#xff08;Unive…...

编程日记 2026/1/10 21:09:19

vue3 nprogress 使用

nprogress 介绍与作用 1.nprogress 是一个轻量级的进度条组件&#xff0c;主要用于在页面加载或路由切换时显示一个进度条&#xff0c;提升用户体验。它的原理是通过在页面顶部创建一个 div&#xff0c;并使用 fixed 定位来实现进度条的效果 2.在 Vite Vue 3 项目中&#xf…...

编程日记 2025/12/2 7:46:42

相比其他缓存/内存数据库（如 Memcached, Ehcache 等），Redis 在微服务环境中的优势和劣势是什么？

我们来比较一下 Redis 与 Memcached、Hazelcast、Ehcache 等在微服务环境下的优势和劣势。 Redis 的优势 : 丰富的数据结构 (Rich Data Structures): 优势: 这是 Redis 最显著的优势之一。除了简单的 Key-Value (字符串) 外&#xff0c;Redis 还原生支持 Lists, Sets, Sorted …...

编程日记 2025/12/1 23:15:20

生态篇｜多总线融合与网关设计

引言 1. 车内多总线概览 2. 主流车载总线技术对比 3. 网关设计原则与架构 4. 协议转换与映射策略 5. 安全与诊断功能集成...

编程日记 2026/1/9 13:56:00

Node做BFF中间层架构优化前端开发体验并提升系统整体性能。

文章目录 1. BFF 层的定位2. 技术选型3. 架构设计3.1 分层设计3.2 示例架构 4. 核心功能实现4.1 数据聚合4.2 权限校验4.3 缓存优化 5、实战示例1. 场景说明2. ECharts 数据格式要求3. BFF 层实现步骤3.1 接收前端参数3.2 调用后端服务获取数据 4. 前端使用 总结 在使用 Node.j…...

编程日记 2025/12/5 4:39:23

基于autoware1.14的实车部署激光雷达循迹，从建图、定位、录制轨迹巡航点、到实车运行。

1.首先安装autoware &#xff0c;大家可以以下一下博客进行安装&#xff0c;如果缺少库什么的直接问ai安装对应的库就行。ubuntu18.04安装Autoware1.14---GPU版 最全环境配置说明_autoware1.14安装教程-CSDN博客 安装成功后运行&#xff1a; source install/setup.bash roslau…...

编程日记 2026/1/17 10:35:24

数据类型相关问题导致的索引失效 | OceanBase SQL 优化实践

背景 针对在OceanBase 论坛中遇到的一些典型SQL调优问题&#xff0c;进行记录与总结&#xff0c;分享给大家。本文介绍的事3个场景&#xff1a;数据类型不匹配、字符集相关属性不匹配&#xff0c;和过滤/联接条件上包含系统函数。 场景一&#xff1a;数据类型不匹配 类型不匹…...

编程日记 2025/12/1 4:58:09