JS通过GetCapabilities获取wms服务元数据信息并在SuperMap iClient3D for WebGL举行叠加显示
获取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) {
viewer.imageryLayers.remove(wmsLayers);
}
// 创建新的WMS图层
wmsLayers = 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) {
viewer.imageryLayers.remove(wmsLayers);
delete wmsLayers;
}
}
}
// 绑定加载按钮事件
document.getElementById('loadBtn').addEventListener('click', loadWmsService);
</script>
</body>
</html> 效果图：
https://i-blog.csdnimg.cn/direct/a2c1adf8daca4b0eb560055454d2878a.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]