?獲取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>效果圖：
)
——Mcu模塊配置及代碼詳解(上))
![[java八股文][Java基礎面試篇]I/O](http://pic.xiahunao.cn/[java八股文][Java基礎面試篇]I/O)
)
