创建热力图图层
使用热力图图层可视化数据;
<!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://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
center: [-120, 50],
zoom: 2
});
map.on('load', () => {
// 添加热力图数据源
map.addSource('earthquakes', {
'type': 'geojson',
'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'
});
// 添加热力图图层
map.addLayer(
{
'id': 'earthquakes-heat',
'type': 'heatmap',
'source': 'earthquakes',
'maxzoom': 9,
'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'],
7, 1,
9, 0
]
}
},
'waterway-label'
);
// 添加数据点图层
map.addLayer(
{
'id': 'earthquakes-point',
'type': 'circle',
'source': 'earthquakes',
'minzoom': 7,
'paint': {
// 圆圈大小基于地震震级和缩放级别
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
7, [
'interpolate',
['linear'],
['get', 'mag'],
1, 1,
6, 4
],
16, [
'interpolate',
['linear'],
['get', 'mag'],
1, 5,
6, 50
]
],
// 圆圈颜色基于地震震级
'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'],
7, 0,
8, 1
],
// 圆圈描边
'circle-stroke-color': 'white',
'circle-stroke-width': 1,
// 描边不透明度基于缩放级别
'circle-stroke-opacity': [
'interpolate',
['linear'],
['zoom'],
7, 0,
8, 1
]
}
},
'waterway-label'
);
});
</script>
</body>
</html>