AntV L7地图可视化入坑笔记

最新推荐文章于 2024-08-09 07:31:42 发布

X01动力装甲

最新推荐文章于 2024-08-09 07:31:42 发布

阅读量3.8k

点赞数

分类专栏： JavaScript 文章标签：可视化 AntV

本文为博主原创文章，未经作者允许禁止任何形式的转载。

本文链接：https://blog.csdn.net/lin5165352/article/details/109207951

版权

JavaScript 专栏收录该内容

54 篇文章 6 订阅

订阅专栏

先用 HTML CDN的方式跑起来一个地图案例：
官方案例地址：https://codesandbox.io/s/laughing-fermat-fjy5y?file=/index.html:491-499

我的案例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>L7</title>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
    <script src='https://unpkg.com/@antv/l7'></script>
</head>

<body>
    <div style="width: 800px;height: 600px; position: absolute;" id="map"></div>
    <script>       
        const scene = new L7.Scene({
            id: 'map',
            //GaodeMap   Mapbox 需要上面的mapbox-gl.js
            map: new L7.Mapbox({
                style: 'dark', // 样式URL dark blank light
                center: [110.19382669582967, 30.258134],
                pitch: 40,
                zoom: 3,
                // token: 'mapbox token',
            }),
        });

        fetch('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json')
            .then(res => res.json())
            .then(data => {
                const pointLayer = new L7.PointLayer({})
                    .source(data.list, {
                        parser: {
                            type: 'json',
                            x: 'j',
                            y: 'w'
                        }
                    })
                    .shape('cylinder')
                    .size('t', function (level) {
                        return [1, 2, level * 2 + 20];
                    })
                    .color('t', [
                        '#094D4A',
                        '#146968',
                        '#1D7F7E',
                        '#289899',
                        '#34B6B7',
                        '#4AC5AF',
                        '#5FD3A6',
                        '#7BE39E',
                        '#A1EDB8',
                        '#CEF8D6'
                    ])
                    .style({
                        opacity: 1.0
                    });
                scene.addLayer(pointLayer);
            });
    </script>
</body>
</html>