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

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

news 2025/8/12 20:36:52

获取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>

效果图：