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

news2025/4/24 13:15:59

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

效果图：