添加矢量瓦片源
添加一个矢量瓦片源;
<!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 {
position: absolute;
top: 10px;
right: 10px;
background: #fff;
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;
}
.layer-controls {
margin-top: 15px;
}
.layer-control {
margin-bottom: 10px;
}
.layer-control label {
display: flex;
align-items: center;
cursor: pointer;
}
.layer-control input {
margin-right: 8px;
}
.legend {
background: #fff;
border-radius: 3px;
bottom: 30px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
padding: 10px;
position: absolute;
right: 10px;
z-index: 1;
}
.legend h4 {
margin: 0 0 10px;
}
.legend div {
height: 10px;
width: 10px;
display: inline-block;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="map-overlay">
<h3>矢量瓦片示例</h3>
<p>
此示例展示了如何从矢量瓦片源添加多个数据图层，并分别设置其样式。矢量瓦片的优点是数据量小、渲染快，并可在客户端调整样式。
</p>
<div class="layer-controls">
<div class="layer-control">
<label>
<input type="checkbox" id="toggle-water" checked>
显示水域
</label>
</div>
<div class="layer-control">
<label>
<input type="checkbox" id="toggle-roads" checked>
显示道路
</label>
</div>
<div class="layer-control">
<label>
<input type="checkbox" id="toggle-buildings" checked>
显示建筑
</label>
</div>
<div class="layer-control">
<label>
<input type="checkbox" id="toggle-labels" checked>
显示标签
</label>
</div>
</div>
</div>
<div id="legend" class="legend">
<h4>图层图例</h4>
<div style="background-color: #4169E1"></div> 水域<br/>
<div style="background-color: #696969"></div> 道路<br/>
<div style="background-color: #CD853F"></div> 建筑<br/>
</div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/basic/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-122.4194, 37.7749],
zoom: 12
});
map.addControl(new maplibregl.NavigationControl());
map.on('load', () => {
// 添加一个使用OSM数据的矢量瓦片源
map.addSource('openmaptiles', {
'type': 'vector',
'url': 'https://api.maptiler.com/tiles/v3/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
});
// 添加水域图层
map.addLayer({
'id': 'water-layer',
'type': 'fill',
'source': 'openmaptiles',
'source-layer': 'water',
'paint': {
'fill-color': '#4169E1',
'fill-opacity': 0.7
}
});
// 添加道路图层
map.addLayer({
'id': 'road-layer',
'type': 'line',
'source': 'openmaptiles',
'source-layer': 'transportation',
'paint': {
'line-color': '#696969',
'line-width': [
'interpolate',
['linear'],
['zoom'],
10, 0.5,
16, 4
]
},
'filter': ['==', '$type', 'LineString']
});
// 添加建筑图层
map.addLayer({
'id': 'building-layer',
'type': 'fill',
'source': 'openmaptiles',
'source-layer': 'building',
'paint': {
'fill-color': '#CD853F',
'fill-opacity': 0.6,
'fill-outline-color': '#8B4513'
}
});
// 添加地名标签图层
map.addLayer({
'id': 'label-layer',
'type': 'symbol',
'source': 'openmaptiles',
'source-layer': 'place',
'layout': {
'text-field': ['get', 'name'],
'text-size': 12,
'text-offset': [0, 1.5],
'text-anchor': 'top'
},
'paint': {
'text-color': '#333',
'text-halo-color': 'white',
'text-halo-width': 1
}
});
// 为复选框添加事件监听器
document.getElementById('toggle-water').addEventListener('change', (e) => {
map.setLayoutProperty(
'water-layer',
'visibility',
e.target.checked ? 'visible' : 'none'
);
});
document.getElementById('toggle-roads').addEventListener('change', (e) => {
map.setLayoutProperty(
'road-layer',
'visibility',
e.target.checked ? 'visible' : 'none'
);
});
document.getElementById('toggle-buildings').addEventListener('change', (e) => {
map.setLayoutProperty(
'building-layer',
'visibility',
e.target.checked ? 'visible' : 'none'
);
});
document.getElementById('toggle-labels').addEventListener('change', (e) => {
map.setLayoutProperty(
'label-layer',
'visibility',
e.target.checked ? 'visible' : 'none'
);
});
});
</script>
</body>
</html>