mapboxgl + deckgl 入门例子

最新推荐文章于 2024-05-17 13:52:13 发布

imxiezy

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量539

点赞数

分类专栏： Mapboxgl 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/imxiezy/article/details/129631386

版权

Mapboxgl 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

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>