mapboxgl + deckgl 入门例子-爱代码爱编程
前言
mapboxgl 提供底图，deckgl 可以提供更为丰富的可视化效果图层，两者的结合可以提供更多的可视化方式。本文仅是简单尝试，后续可以做更多的探索。
效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/deck.gl@^6.2.0/deckgl.min.js"></script>
<script src='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
</head>
<body>
<div id="map" style="position: absolute;height: 100%;width: 100%;"></div>
<script>
mapboxgl.accessToken = "token";
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/dark-v11', // style URL
center: [-0.198465, 51.505538], //[-122.458642, 37.758062], // starting position [lng, lat]
zoom: 7, // starting zoom
"pitch": 60
});
const colorRange = [
[1, 152, 189],
[73, 227, 206],
[216, 254, 181],
[254, 237, 177],
[254, 173, 84],
[209, 55, 78]
];
const material = {
ambient: 0.64,
diffuse: 0.6,
shininess: 32,
specularColor: [51, 51, 51]
};
map.on('load', () => {
d3.csv('https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv', (error, response) => {
if (!error) {
const data = response.map(d => [Number(d.lng), Number(d.lat)]);
const myLayer2 = new MapboxLayer({
id: 'okb',
type: HexagonLayer,
colorRange,
coverage: 1,
data: data,
elevationRange: [0, 3000],
elevationScale: data && data.length ? 50 : 0,
extruded: true,
getPosition: d => d,
pickable: true,
radius: 2000,
upperPercentile: 100,
material,
// transitions: {
// elevationScale: 3000
// }
})
map.addLayer(myLayer2)
}
});
})
</script>
</body>
</html>