显示带地形高程的混合卫星地图
显示带有地形高程的混合卫星地图;
<!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%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
center: [-114.43, 36.95],
zoom: 10.4,
pitch: 57,
bearing: 58,
style: {
'version': 8,
'sources': {
'dem': {
'type': 'raster-dem',
'url': 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
'tileSize': 256
},
'hillshadeSource': {
'type': 'raster-dem',
'url': 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
'tileSize': 256
},
'satelliteSource': {
'type': 'raster',
'tiles': ['https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=get_your_own_OpIi9ZULNHzrESv6T2vL'],
'tileSize': 256,
'attribution': '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>'
},
'openmaptiles': {
'type': 'vector',
'url': 'https://api.maptiler.com/tiles/v3/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
}
},
'terrain': {
'source': 'dem',
'exaggeration': 1.3
},
'fog': {
'range': [0.5, 10],
'color': '#ffffff',
'horizon-blend': 0.1
},
'layers': [
{
'id': 'background',
'type': 'background',
'paint': {
'background-color': 'rgb(239, 239, 239)'
}
},
{
'id': 'satellite',
'type': 'raster',
'source': 'satelliteSource',
'minzoom': 0,
'maxzoom': 22
},
{
'id': 'road_major_motorway',
'type': 'line',
'source': 'openmaptiles',
'source-layer': 'transportation',
'filter': [
'all',
[
'==',
'$type',
'LineString'
],
[
'==',
'class',
'motorway'
]
],
'layout': {
'line-cap': 'round',
'line-join': 'round',
'visibility': 'visible'
},
'paint': {
'line-color': 'rgb(249, 226, 11)',
'line-offset': 0,
'line-width': {
'base': 1.2,
'stops': [
[
6.5,
0
],
[
7,
0.5
],
[
20,
15
]
]
}
}
},
{
'id': 'road_major_trunk',
'type': 'line',
'source': 'openmaptiles',
'source-layer': 'transportation',
'filter': [
'all',
[
'==',
'$type',
'LineString'
],
[
'==',
'class',
'trunk'
]
],
'layout': {
'line-cap': 'round',
'line-join': 'round',
'visibility': 'visible'
},
'paint': {
'line-color': 'rgb(249, 226, 11)',
'line-offset': 0,
'line-width': {
'base': 1.2,
'stops': [
[
6.5,
0
],
[
7,
0.5
],
[
20,
15
]
]
}
}
},
{
'id': 'road_major_primary',
'type': 'line',
'source': 'openmaptiles',
'source-layer': 'transportation',
'filter': [
'all',
[
'==',
'$type',
'LineString'
],
[
'==',
'class',
'primary'
]
],
'layout': {
'line-cap': 'round',
'line-join': 'round',
'visibility': 'visible'
},
'paint': {
'line-color': 'rgb(249, 226, 11)',
'line-offset': 0,
'line-width': {
'base': 1.2,
'stops': [
[
7.5,
0
],
[
8,
0.5
],
[
20,
15
]
]
}
}
},
{
'id': 'poi_label',
'type': 'symbol',
'source': 'openmaptiles',
'source-layer': 'poi',
'filter': [
'all',
['<', 'rank', 8],
[
'has',
'name'
]
],
'layout': {
'text-field': '{name:latin}\n{name:nonlatin}',
'text-font': ['Noto Sans Regular'],
'text-max-width': 6,
'text-size': 12,
'visibility': 'visible'
},
'paint': {
'text-color': 'rgba(200, 220, 0, 1)',
'text-halo-blur': 0.5,
'text-halo-color': 'rgba(0, 0, 0, 0.75)',
'text-halo-width': 1
}
},
{
'id': 'place_label_city',
'type': 'symbol',
'source': 'openmaptiles',
'source-layer': 'place',
'filter': [
'all',
[
'==',
'class',
'city'
]
],
'layout': {
'text-field': '{name:latin}\n{name:nonlatin}',
'text-font': ['Noto Sans Regular'],
'text-max-width': 10,
'text-size': 14,
'visibility': 'visible'
},
'paint': {
'text-color': 'rgba(200, 220, 0, 1)',
'text-halo-blur': 0.5,
'text-halo-color': 'rgba(0, 0, 0, 0.75)',
'text-halo-width': 1
}
},
{
'id': 'hills',
'type': 'hillshade',
'source': 'hillshadeSource',
'layout': {
'visibility': 'visible'
},
'paint': {
'hillshade-shadow-color': '#473B24'
}
}
]
}
});
map.addControl(
new maplibregl.NavigationControl({
visualizePitch: true,
showZoom: true,
showCompass: true
})
);
map.addControl(
new maplibregl.GlobeControl()
);
map.addControl(
new maplibregl.TerrainControl({
source: 'dem',
exaggeration: 1.3
})
);
</script>
</body>
</html>