添加栅格瓦片源
添加栅格瓦片地图源;
<!DOCTYPE html>
<html lang="en">
<head>
<title>添加栅格瓦片源</title>
<meta property="og:description" content="添加栅格瓦片地图源" />
<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 {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 200px;
top: 0;
left: 0;
padding: 10px;
}
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
.map-overlay-inner fieldset:last-child {
margin: 0;
}
.map-overlay-inner select {
width: 100%;
}
.map-overlay-inner label {
display: block;
margin: 0 0 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<fieldset>
<label>选择地图瓦片风格</label>
<select id="layer" name="layer">
<option value="openstreetmap">OpenStreetMap</option>
<option value="carto-light">Carto 浅色</option>
<option value="carto-dark">Carto 深色</option>
<option value="stamen-terrain">Stamen 地形图</option>
<option value="stamen-toner">Stamen 黑白</option>
<option value="stamen-watercolor">Stamen 水彩</option>
</select>
</fieldset>
<fieldset>
<label>瓦片透明度</label>
<input id="opacity" type="range" min="0" max="1" step="0.01" value="1">
</fieldset>
</div>
</div>
<script>
const map = new maplibregl.Map({
container: 'map',
center: [0, 0],
zoom: 2,
// 我们使用一个最小化的样式，没有预设的图层
style: {
'version': 8,
'sources': {},
'layers': [
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#e0f7fa'
}
}
]
}
});
// 定义瓦片源
const tileSources = {
'openstreetmap': {
'type': 'raster',
'tiles': ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
'tileSize': 256,
'attribution': '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
},
'carto-light': {
'type': 'raster',
'tiles': ['https://cartodb-basemaps-a.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'],
'tileSize': 256,
'attribution': '© <a href="https://carto.com/attributions">CARTO</a>'
},
'carto-dark': {
'type': 'raster',
'tiles': ['https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'],
'tileSize': 256,
'attribution': '© <a href="https://carto.com/attributions">CARTO</a>'
},
'stamen-terrain': {
'type': 'raster',
'tiles': ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.jpg'],
'tileSize': 256,
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>'
},
'stamen-toner': {
'type': 'raster',
'tiles': ['https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'],
'tileSize': 256,
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>'
},
'stamen-watercolor': {
'type': 'raster',
'tiles': ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
'tileSize': 256,
'attribution': 'Map tiles by <a href="http://stamen.com">Stamen Design</a>'
}
};
// 当前选中的瓦片源
let currentSource = 'openstreetmap';
// 更新地图瓦片层
function updateLayer(newSource) {
// 移除旧图层（如果存在）
if (map.getLayer('raster-tiles')) {
map.removeLayer('raster-tiles');
}
// 移除旧源（如果存在）
if (map.getSource(currentSource)) {
map.removeSource(currentSource);
}
// 添加新源
map.addSource(newSource, tileSources[newSource]);
// 添加新图层
map.addLayer({
'id': 'raster-tiles',
'type': 'raster',
'source': newSource,
'layout': {
'visibility': 'visible'
},
'paint': {
'raster-opacity': parseFloat(document.getElementById('opacity').value)
}
});
// 更新当前源
currentSource = newSource;
}
// 初始化地图
map.on('load', function() {
// 添加初始瓦片图层
updateLayer(currentSource);
// 添加导航控件
map.addControl(new maplibregl.NavigationControl());
});
// 处理图层切换
document.getElementById('layer').addEventListener('change', function() {
updateLayer(this.value);
});
// 处理透明度变化
document.getElementById('opacity').addEventListener('input', function() {
if (map.getLayer('raster-tiles')) {
map.setPaintProperty('raster-tiles', 'raster-opacity', parseFloat(this.value));
}
});
</script>
</body>
</html>