地球仪上带地形高程的热力图
在带地形高程的地球仪上创建热力图图层;
<!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',
style: 'https://demotiles.maplibre.org/style.json',
center: [138.7, 35.7],
zoom: 5,
pitch: 55,
projection: 'globe' // 使用地球仪投影
});
// 添加地形控件
map.addControl(
new maplibregl.TerrainControl({
source: 'terrain',
exaggeration: 1 // 高程夸大系数，1为原始大小
})
);
map.on('load', () => {
// 添加带高程数据的DEM源
map.addSource('terrain', {
'type': 'raster-dem',
'url': 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
'tileSize': 256
});
// 添加天空和大气效果
map.setFog({});
// 设置地形
map.setTerrain({
'source': 'terrain'
});
// 添加热力图数据
// 这里我们的数据点包含了日本的一些主要城市
map.addSource('earthquakes', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': { 'mag': 5.2 },
'geometry': { 'type': 'Point', 'coordinates': [139.7, 35.7] } // 东京
},
{
'type': 'Feature',
'properties': { 'mag': 4.8 },
'geometry': { 'type': 'Point', 'coordinates': [135.5, 34.7] } // 大阪
},
{
'type': 'Feature',
'properties': { 'mag': 4.5 },
'geometry': { 'type': 'Point', 'coordinates': [136.9, 35.2] } // 名古屋
},
{
'type': 'Feature',
'properties': { 'mag': 4.3 },
'geometry': { 'type': 'Point', 'coordinates': [130.4, 33.6] } // 福冈
},
{
'type': 'Feature',
'properties': { 'mag': 3.8 },
'geometry': { 'type': 'Point', 'coordinates': [141.3, 43.1] } // 札幌
},
{
'type': 'Feature',
'properties': { 'mag': 3.7 },
'geometry': { 'type': 'Point', 'coordinates': [132.4, 34.4] } // 广岛
},
{
'type': 'Feature',
'properties': { 'mag': 3.5 },
'geometry': { 'type': 'Point', 'coordinates': [140.5, 37.9] } // 仙台
},
{
'type': 'Feature',
'properties': { 'mag': 3.2 },
'geometry': { 'type': 'Point', 'coordinates': [131.4, 31.9] } // 宫崎
},
{
'type': 'Feature',
'properties': { 'mag': 3.0 },
'geometry': { 'type': 'Point', 'coordinates': [127.7, 26.2] } // 冲绳
},
{
'type': 'Feature',
'properties': { 'mag': 2.8 },
'geometry': { 'type': 'Point', 'coordinates': [133.5, 33.6] } // 高知
}
]
}
});
// 添加热力图层
map.addLayer(
{
'id': 'earthquakes-heat',
'type': 'heatmap',
'source': 'earthquakes',
'paint': {
// 根据地震震级增加热力图权重
'heatmap-weight': [
'interpolate', ['linear'], ['get', 'mag'],
0, 0,
6, 1
],
// 根据缩放级别增加热力图强度
'heatmap-intensity': [
'interpolate', ['linear'], ['zoom'],
0, 1,
9, 3
],
// 热力图颜色过渡
'heatmap-color': [
'interpolate', ['linear'], ['heatmap-density'],
0, 'rgba(33,102,172,0)',
0.2, 'rgb(103,169,207)',
0.4, 'rgb(209,229,240)',
0.6, 'rgb(253,219,199)',
0.8, 'rgb(239,138,98)',
1, 'rgb(178,24,43)'
],
// 半径随缩放变化
'heatmap-radius': [
'interpolate', ['linear'], ['zoom'],
0, 2,
9, 20
],
// 随缩放级别改变不透明度
'heatmap-opacity': [
'interpolate', ['linear'], ['zoom'],
5, 1,
9, 0.7
]
}
}
);
// 添加圆点图层
map.addLayer(
{
'id': 'earthquakes-point',
'type': 'circle',
'source': 'earthquakes',
'minzoom': 5,
'paint': {
// 根据震级增加圆大小
'circle-radius': [
'interpolate', ['linear'], ['get', 'mag'],
1, 4,
6, 20
],
// 根据缩放级别和震级改变圆颜色
'circle-color': [
'interpolate', ['linear'], ['get', 'mag'],
1, 'rgba(33,102,172,0)',
2, 'rgb(103,169,207)',
3, 'rgb(209,229,240)',
4, 'rgb(253,219,199)',
5, 'rgb(239,138,98)',
6, 'rgb(178,24,43)'
],
// 随缩放变化不透明度
'circle-opacity': [
'interpolate', ['linear'], ['zoom'],
5, 0,
6, 1
],
// 黑色描边
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
// 描边不透明度随缩放变化
'circle-stroke-opacity': [
'interpolate', ['linear'], ['zoom'],
5, 0,
6, 1
]
}
}
);
});
</script>
</body>
</html>