热力图
使用 heatmap layer 对不同地点的某属性值进行可视化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>热力图</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.4.1/mapmost-webgl-min.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new mapmost.Map({
container: 'map',
style: "<your style url>",
center: [120.7285892158784,31.322079341989635],
zoom: 14.74,
pitch:58.499,
bearing:47.2,
userId: '***', // 授权码
});
map.on('load', function () {
// 添加一个geojson点源。
// 热力图也支持矢量瓦片数据。
map.addSource('earthquakes', {
'type': 'geojson',
'data': data
});
map.addLayer({
'id': 'earthquakes-heat',
'type': 'heatmap',
'source': 'earthquakes',
'maxzoom': 18,
'paint': {
// 根据频率和属性大小增加热力图的权重。
'heatmap-weight': [
'interpolate',
['linear'],
['get', 'num'],
0,
0,
100,
1
],
// 按缩放级别增加热力图颜色的权重。
// heatmap-intensity是heatmap-weight基础上的一个乘法。
'heatmap-intensity': [
'interpolate',
['linear'],
['zoom'],
0,
1,
18,
3
],
// 热力图的颜色斜率。 范围是0（低）到1（高）。
// 在0-stop处开始颜色斜率，并使用0浓度的颜色。
// 创造一个类似模糊的效果。
'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,
4,
9,
40
]
}
});
map.addLayer({
'id': 'earthquakes-point',
'type': 'circle',
'source': 'earthquakes',
'minzoom': 14,
'paint': {
// 按地震震级和缩放级别划分的圆圈半径大小。
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
16,
4,
22,
15
],
// 按地震等级划分的颜色圈。
'circle-color': 'rgb(178,24,43)',
// 通过缩放级别从热力图过渡到圆图层。
'circle-opacity': [
'interpolate',
['linear'],
['zoom'],
16,
0,
18,
1
]
}
});
});
</script>
</body>
</html>