添加WMS服务
添加Web地图服务(WMS)作为栅格瓦片源;
<!DOCTYPE html>
<html lang="en">
<head>
<title>添加WMS服务</title>
<meta property="og:description" content="添加Web地图服务(WMS)作为栅格瓦片源" />
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css' />
<script src='https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
.map-overlay {
position: absolute;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.9);
margin-right: 10px;
font-family: Arial, sans-serif;
overflow: auto;
border-radius: 3px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
line-height: 18px;
max-width: 300px;
}
.map-overlay h3 {
margin: 0 0 10px;
font-size: 16px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.map-overlay p {
font-size: 13px;
line-height: 1.5;
margin: 0 0 10px;
}
.wms-control {
margin-top: 10px;
margin-bottom: 10px;
}
.wms-control label {
display: flex;
align-items: center;
margin-bottom: 5px;
}
.wms-control input {
margin-right: 8px;
}
.opacity-slider {
width: 100%;
margin-top: 10px;
}
.opacity-slider label {
display: block;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
<h3>WMS图层控制</h3>
<p>
此示例演示如何将Web地图服务(WMS)图层添加到MapLibre地图上。以下显示了来自NOAA的天气雷达和气象数据。
</p>
<div class="wms-control">
<label>
<input type="checkbox" id="radar" checked>
雷达
</label>
<label>
<input type="checkbox" id="warnings">
天气警报
</label>
<label>
<input type="checkbox" id="temperature">
气温
</label>
<label>
<input type="checkbox" id="precipitation">
降水
</label>
</div>
<div class="opacity-slider">
<label for="opacity">WMS图层不透明度: <span id="opacity-value">0.7</span></label>
<input type="range" id="opacity" min="0" max="1" step="0.1" value="0.7">
</div>
</div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-98.5795, 39.8283],
zoom: 3
});
map.addControl(new maplibregl.NavigationControl());
// WMS服务基础URL
// 这里使用NOAA的公共WMS服务作为示例
const wmsBaseUrl = 'https://nowcoast.noaa.gov/arcgis/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer/WMSServer';
// WMS图层设置
const wmsLayers = {
radar: {
id: 'radar-layer',
layers: '1', // 雷达层
visible: true
},
warnings: {
id: 'warnings-layer',
layers: '2', // 天气警报层
visible: false
},
temperature: {
id: 'temperature-layer',
layers: '3', // 气温层
visible: false
},
precipitation: {
id: 'precipitation-layer',
layers: '4', // 降水层
visible: false
}
};
// 当前WMS图层不透明度
let currentOpacity = 0.7;
// 更新不透明度显示
function updateOpacityValue(value) {
document.getElementById('opacity-value').textContent = value;
}
// 添加或更新WMS图层函数
function addWmsLayer(id, wmsOptions, visible = true) {
// 如果图层已存在，先移除它
if (map.getLayer(id)) {
map.removeLayer(id);
}
// 如果源已存在，先移除它
if (map.getSource(id)) {
map.removeSource(id);
}
// 构建WMS请求URL
const wmsUrl = makeWmsUrl(wmsOptions);
// 添加新的WMS源
map.addSource(id, {
'type': 'raster',
'tiles': [wmsUrl],
'tileSize': 256
});
// 添加栅格图层
map.addLayer({
'id': id,
'type': 'raster',
'source': id,
'paint': {
'raster-opacity': currentOpacity
},
'layout': {
'visibility': visible ? 'visible' : 'none'
}
});
}
// 构建WMS URL函数
function makeWmsUrl(options) {
return `${wmsBaseUrl}?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image/png&TRANSPARENT=true&LAYERS=${options.layers}&WIDTH=256&HEIGHT=256&CRS=EPSG:3857&STYLES=&BBOX={bbox-epsg-3857}`;
}
// 在地图加载完成后添加WMS图层
map.on('load', () => {
// 添加所有WMS图层
for (const key in wmsLayers) {
const layer = wmsLayers[key];
addWmsLayer(layer.id, layer, layer.visible);
}
// 监听复选框变化
document.getElementById('radar').addEventListener('change', (e) => {
map.setLayoutProperty('radar-layer', 'visibility', e.target.checked ? 'visible' : 'none');
});
document.getElementById('warnings').addEventListener('change', (e) => {
map.setLayoutProperty('warnings-layer', 'visibility', e.target.checked ? 'visible' : 'none');
});
document.getElementById('temperature').addEventListener('change', (e) => {
map.setLayoutProperty('temperature-layer', 'visibility', e.target.checked ? 'visible' : 'none');
});
document.getElementById('precipitation').addEventListener('change', (e) => {
map.setLayoutProperty('precipitation-layer', 'visibility', e.target.checked ? 'visible' : 'none');
});
// 监听不透明度滑块变化
document.getElementById('opacity').addEventListener('input', (e) => {
currentOpacity = parseFloat(e.target.value);
updateOpacityValue(currentOpacity);
// 更新所有图层的不透明度
for (const key in wmsLayers) {
const layerId = wmsLayers[key].id;
if (map.getLayer(layerId)) {
map.setPaintProperty(layerId, 'raster-opacity', currentOpacity);
}
}
});
});
</script>
</body>
</html>