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

JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示

article 2025/10/28 6:53:32

 获取wms服务元数据信息并在三维webgl客户端进行叠加显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>WMS图层叠加</title><link href="./SuperMap3D/Widgets/widgets.css" rel="stylesheet" /><style>html, body, #cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#layerControl {position: absolute;top: 10px;right: 10px;background: white;padding: 10px;border-radius: 5px;z-index: 999;max-height: 80vh;overflow-y: auto;}</style><script src="jquery1.9.0.min.js"></script><script type="text/javascript" src="./SuperMap3D/SuperMap3D.js"></script>
</head>
<body><div id="cesiumContainer"></div><div id="layerControl"><h3>WMS图层控制</h3><div><label>WMS服务地址:</label><input type="text" id="wmsUrl" value="你的wms服务地址" style="width: 300px;"><button id="loadBtn">加载服务</button></div><div id="layerList"></div></div><script>// 初始化三维球const viewer = new SuperMap3D.Viewer('cesiumContainer', {imageryProvider: new SuperMap3D.ArcGisMapServerImageryProvider({url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}),baseLayerPicker: false,timeline: false,animation: false});// 存储当前加载的WMS图层const wmsLayers = {};// 获取WMS能力文档async function getWmsCapabilities(url) {const requestUrl = url.includes('?') ? `${url}&request=GetCapabilities&service=WMS`: `${url}?request=GetCapabilities&service=WMS`;try {const response = await fetch(requestUrl);if (!response.ok) {throw new Error(`HTTP错误: ${response.status}`);}const text = await response.text();const parser = new DOMParser();return parser.parseFromString(text, 'text/xml');} catch (error) {console.error('获取WMS能力文档失败:', error);throw error;}}// 解析WMS能力文档并显示图层列表async function loadWmsService() {const wmsUrl = document.getElementById('wmsUrl').value.trim();if (!wmsUrl) {alert('请输入WMS服务地址');return;}try {const xmlDoc = await getWmsCapabilities(wmsUrl);const layers = xmlDoc.querySelectorAll('Layer > Layer');const layerListDiv = document.getElementById('layerList');layerListDiv.innerHTML = '<h4>可用图层:</h4>';layers.forEach(layer => {const name = layer.querySelector('Name')?.textContent;const title = layer.querySelector('Title')?.textContent || name;if (name) {const layerDiv = document.createElement('div');layerDiv.style.margin = '5px 0';const checkbox = document.createElement('input');checkbox.type = 'checkbox';checkbox.id = `layer-${name}`;checkbox.dataset.name = name;checkbox.addEventListener('change', (e) => {toggleWmsLayer(wmsUrl, name, e.target.checked);});const label = document.createElement('label');label.htmlFor = `layer-${name}`;label.textContent = title;layerDiv.appendChild(checkbox);layerDiv.appendChild(label);layerListDiv.appendChild(layerDiv);}});} catch (error) {alert('加载WMS服务失败: ' + error.message);}}// 切换WMS图层显示function toggleWmsLayer(baseUrl, layerName, show) {if (show) {// 如果图层已存在，先移除if (wmsLayers[layerName]) {viewer.imageryLayers.remove(wmsLayers[layerName]);}// 创建新的WMS图层wmsLayers[layerName] = viewer.imageryLayers.addImageryProvider(new SuperMap3D.WebMapServiceImageryProvider({url: baseUrl,layers: layerName,parameters: {transparent: true,format: 'image/png'},credit: new SuperMap3D.Credit('WMS图层: ' + layerName)}));} else {// 移除图层if (wmsLayers[layerName]) {viewer.imageryLayers.remove(wmsLayers[layerName]);delete wmsLayers[layerName];}}}// 绑定加载按钮事件document.getElementById('loadBtn').addEventListener('click', loadWmsService);</script>
</body>
</html>

效果图：

相关文章：

JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL进行叠加显示

获取wms服务元数据信息并在三维webgl客户端进行叠加显示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…...

编程日记 2025/10/24 1:34:16

7N60-ASEMI无人机专用功率器件7N60

编辑&#xff1a;LL 7N60-ASEMI无人机专用功率器件7N60 型号&#xff1a;7N60 品牌&#xff1a;ASEMI 封装&#xff1a;TO-220F 最大漏源电流&#xff1a;7A 漏源击穿电压&#xff1a;600V 批号&#xff1a;最新 RDS&#xff08;ON&#xff09;Max&#xff1a;1.20Ω …...

编程日记 2025/10/26 11:55:56

Redis日常学习（一）

我的Redis学习笔记&#xff1a;从命令行到性能调优 Redis Redis&#xff08;Remote Dictionary Server&#xff09;本质上是一个基于内存的键值存储系统. 安装配置Redis的过程非常简单&#xff1a; # Ubuntu/Debian安装Redis sudo apt-get update sudo apt-get install red…...

编程日记 2025/6/14 2:44:33

Pytorch图像数据转为Tensor张量

PyTorch的所有模型&#xff08;nn.Module&#xff09;都只接受Tensor格式的输入&#xff0c;所以我们在使用图像数据集时&#xff0c;必须将图像转换为Tensor格式。PyTorch提供了torchvision.transforms模块来处理图像数据集。torchvision.transforms模块提供了一些常用的图像预…...

编程日记 2025/10/23 15:08:21

Java 加密与解密：从算法到应用的全面解析

Java 加密与解密&#xff1a;从算法到应用的全面解析 一、加密与解密技术概述 在当今数字化时代&#xff0c;数据安全至关重要。Java 加密与解密技术作为保障数据安全的关键手段&#xff0c;被广泛应用于各个领域。 加密是将明文数据通过特定算法转换为密文&#xff0c;使得…...

编程日记 2025/10/24 5:37:39

Java基础系列-HashMap源码解析2-AVL树

文章目录 AVL树左旋右旋左旋右旋的4种情况LL 型RR 型LR 型RL 型 实际插入时怎么判断是那种类型&#xff1f;插入时注意事项删除节点 AVL树 为避免BST树退化成链表的极端情况&#xff0c; AVL 树应运而生。 平衡因子取值&#xff08;-1&#xff0c;0&#xff0c;1&#xff09;…...

编程日记 2025/10/24 1:42:08

蓝桥杯 19. 最大比例

最大比例 原题目链接 题目描述 X 星球的某个大奖赛设了 M 级奖励。每个级别的奖金是一个正整数。 并且&#xff0c;相邻两个级别间的比例是一个固定值&#xff0c;也就是说&#xff1a;所有级别的奖金构成一个等比数列。 例如&#xff1a; 奖金数列为 16, 24, 36, 54&…...

编程日记 2025/10/4 9:49:12

前端加密介绍与实战

前端数据加密 文章目录 前端数据加密前端数据加密介绍为什么需要前端数据加密&#xff1f;前端数据加密的常见方式前端数据加密的实现场景&#xff1a;加密用户密码并发送到后端步骤 1&#xff1a;安装加密库步骤 2&#xff1a;实现加密逻辑步骤 3&#xff1a;后端解密 实战总结…...

编程日记 2025/9/22 21:08:02

Zookeeper是什么？基于zookeeper实现分布式锁

zookeeper听的很多&#xff0c;但实际在应用开发中用的不错&#xff0c;主要是作为中间件配合使用的&#xff0c;例如&#xff1a;Kafka。 了解zk首先需要知道它的数据结构&#xff0c;可以想象为树、文件夹目录。每个节点有基本的信息&#xff0c;例如&#xff1a;创建时间、…...

编程日记 2025/8/24 22:08:29

Kafka 主题设计与数据接入机制

一、前言&#xff1a;万物皆流&#xff0c;Kafka 是入口 在构建实时数仓时&#xff0c;Kafka 既是 数据流动的起点&#xff0c;也是后续流处理系统&#xff08;如 Flink&#xff09;赖以为生的数据源。 但“消息进来了” ≠ “你就能处理好了”——不合理的 Topic 设计、接入方…...

编程日记 2025/10/9 3:40:23

gem5-gpu教程05 内存建模

memory-modeling|Details on how memory is modeled in gem5-gpu gem5-gpu’s Memory Simulation gem5-gpu在很大程度上避开了GPGPU-Sim的单独功能模拟，而是使用了gem5的执行中执行模型。因此，当执行存储/加载时，内存会被更新/读取。没有单独的功能路径。（顺便说一句，这…...

编程日记 2025/9/1 19:19:25

MySQL的日志--Redo Log【学习笔记】

MySQL的日志--Redo Log 知识来源&#xff1a; 《MySQL是怎样运行的》--- 小孩子4919 MySQL的事务四大特性之一就是持久性&#xff08;Durability&#xff09;。但是底层是如何实现的呢&#xff1f;这就需要我们的Redo Log&#xff08;重做日志&#xff09;闪亮登场了。它记录着…...

编程日记 2025/10/23 14:02:01

【AI应用】免费代码仓构建定制版本的ComfyUI应用镜像

免费代码仓构建定制版本的ComfyUI应用镜像 1 创建代码仓1.1 注册登陆1.2 创建代码仓1.5 安装中文语言包1.4 拉取ComfyUI官方代码2 配置参数和预装插件2.1 保留插件和模型的版本控制2.2 克隆插件到代码仓2.2.1 下载插件2.2.2 把插件设置本仓库的子模块管理3 定制Docker镜像3.1 创…...

编程日记 2025/10/25 14:34:13

MineWorld，微软研究院开源的实时交互式世界模型

MineWorld是什么 MineWorld是微软研究院开发并开源的一个基于《我的世界》&#xff08;Minecraft&#xff09;的实时互动世界模型。该模型采用了视觉-动作自回归Transformer架构&#xff0c;将游戏场景和玩家动作转化为离散的token ID&#xff0c;并通过下一个token的预测进行…...

编程日记 2025/10/4 19:57:49

被裁20240927 --- 视觉目标跟踪算法

永远都像初次见你那样使我心荡漾 参考文献目前主流的视觉目标跟踪算法一、传统跟踪算法1. 卡尔曼滤波&#xff08;Kalman Filter&#xff09;2. 相关滤波&#xff08;Correlation Filter&#xff0c;如KCF、MOSSE&#xff09;3. 均值漂移&#xff08;MeanShift/CamShift&#x…...

编程日记 2025/10/23 5:14:53

​​Agentic AI——当AI学会主动思考与决策，世界将如何被重塑？

一、引言&#xff1a;2025&#xff0c;Agentic AI的元年 “如果ChatGPT是AI的‘聊天时代’&#xff0c;那么2025年将开启AI的‘行动时代’。”——Global X Insights[1] 随着Agentic AI&#xff08;自主决策型人工智能&#xff09;的崛起&#xff0c;AI系统正从被动应答的“工具…...

编程日记 2025/10/21 14:45:51

Ollama API 应用指南

1. 基础信息 默认地址: http://localhost:11434/api数据格式: application/json支持方法: POST&#xff08;主要&#xff09;、GET&#xff08;部分接口&#xff09; 2. 模型管理 API (1) 列出本地模型 端点: GET /api/tags功能: 获取已下载的模型列表。示例:curl http://lo…...

编程日记 2025/10/25 1:23:10

PNG透明免抠设计素材大全26000+

在当今的数字设计领域&#xff0c;寻找高质量且易于使用的素材是每个设计师的日常需求。今天&#xff0c;我们将为大家介绍一个超全面的PNG透明免抠设计素材大全&#xff0c;涵盖多种风格、主题和应用场景&#xff0c;无论是平面设计、网页设计还是多媒体制作&#xff0c;都能轻…...

编程日记 2025/10/14 0:19:09

4.多表查询

SQL 多表查询&#xff1a;数据整合与分析的强大工具 文章目录 SQL 多表查询&#xff1a;数据整合与分析的强大工具一、 多表查询概述1.1 为什么需要多表查询1.2 多表查询的基本原理 二、 多表查询关系2.1 一对一关系&#xff08;One-to-One&#xff09;示例&#xff1a; 2.2 一…...

编程日记 2025/10/21 0:22:22

MCP 基于 TypeScript 的完整示例，包含stdio、sse多种用法和调试，对于构建自己的API工具链很有用

typescript-mcp-demo 这是一个基于 Model Context Protocol (MCP) 的 TypeScript 示例项目&#xff0c;展示了如何创建一个简单的 MCP 服务器&#xff0c;包含基本的工具&#xff08;tools&#xff09;和资源&#xff08;resources&#xff09;功能。 官网&#xff1a;https:…...

编程日记 2025/7/7 12:39:14

位运算知识

位运算是一种直接对整数在内存中的二进制位进行操作的运算方式。计算机中的整数是以二进制形式存储的&#xff0c;位运算通过操作这些二进制位来实现高效的计算。位运算通常比普通的算术运算更快&#xff0c;因为它直接作用于硬件层面。 以下是几种常见的位运算符及其功能&…...

编程日记 2025/5/26 15:05:59

mybatis高级查询：一对多配置，一次性查出主表和子表中的数据

一、MyBatis高级查询&#xff1a;一对多 MyBatis是一款强大的持久层框架&#xff0c;提供了多种方式来处理关联查询&#xff0c;其中包括一对一和一对多的情况。在本文中&#xff0c;我们将深入探讨一对多关联查询的实现方式。 在MyBatis中配置一对多关系通常涉及到associati…...

编程日记 2025/6/5 20:34:18

美团2024年春招第一场笔试 C++

目录 1&#xff0c;小美的平衡矩阵 2&#xff0c;小美的数组询问 3&#xff0c;小美的MT 4&#xff0c;小美的朋友关系 1&#xff0c;小美的平衡矩阵 【题目描述】 给定一个n*n的矩阵&#xff0c;该矩阵只包含数字0和1。对于 每个i(1<i<n)&#xff0c;求在该矩阵中&am…...

编程日记 2025/10/27 9:13:13

XHTMLConverter把docx转换html报java.lang.NullPointerException异常

一.报错 1.报错信息 org.apache.poi.xwpf.converter.core.XWPFConverterException: java.lang.NullPointerExceptionat org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.convert(XHTMLConverter.java:77)at org.apache.poi.xwpf.converter.xhtml.XHTMLConverter.doConve…...

编程日记 2025/10/15 23:58:38

OpenCV 图形API（52）颜色空间转换-----将 NV12 格式的图像数据转换为 RGB 格式的图像

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将图像从 NV12 (YUV420p) 色彩空间转换为 RGB。该函数将输入图像从 NV12 色彩空间转换到 RGB。Y、U 和 V 通道值的常规范围是 0 到 255。 输出图…...

编程日记 2025/10/25 11:04:59

pojovoDto等概念

Java 中的数据模型概念 POJO (Plain Old Java Object) POJO 是最简单的 Java 对象&#xff0c;不依赖于特定的框架&#xff0c;不实现任何特殊的接口&#xff0c;也不继承特定的类。 特点 具有无参构造函数属性使用 private 修饰提供公共的 getter 和 setter 方法可序列化 …...

编程日记 2025/10/24 2:18:56

COdeTop-206-反转链表

题目 206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2] 输出&#xff1a;[2,1]示例 …...

编程日记 2025/10/26 9:21:14

线段树讲解（小进阶）

目录 前言 一、线段树知识回顾 线段树区间加减 区间修改维护&#xff1a; 区间修改的操作&#xff1a; 区间修改update&#xff1a; 线段树的区间查询 区间查询&#xff1a; 区间查询的操作&#xff1a; 递归查询过程&#xff1a; 区间查询query&#xff1a; 代码&…...

编程日记 2025/10/25 11:20:12

4082P 信号/频谱分析仪

——新利通仪器仪表—— 4082P丨信号/频谱分析仪 2Hz&#xff5e;110GHz Ceyear 4082系列信号/频谱分析仪在显示平均噪声电平、相位噪声、互调抑制、动态范围、幅度精度和测试速度等方面具备极佳的射频性能。具备强大的频谱分析、符合标准的功率测量套件、I/Q分析、瞬态分析…...

编程日记 2025/8/10 1:29:18

夏季跑步注意

夏季跑步注意 医学专家警示&#xff1a;大众跑者需以安全为先&#xff0c;警惕高温环境下“盲目冲刺”的风险。一些事件再次印证马拉松适宜气温为6-15℃&#xff0c;超过20℃时需主动降速并增加补水量。 所以建议每一位跑友&#xff0c;为了健康的跑步&#xff0c;每年除了做…...

编程日记 2025/10/5 4:15:36