html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图

好名全被用

已于 2023-02-17 14:56:39 修改

阅读量3.1k

点赞数 1

分类专栏：前端文章标签： html echarts javascript antv L7

于 2023-02-17 14:25:27 首次发布

本文链接：https://blog.youkuaiyun.com/zk_1325572803/article/details/129083017

版权

前端专栏收录该内容

28 篇文章

订阅专栏

文章展示了如何利用Antv的L7库和Mapbox来替代Echarts创建3D地图，提供了一个具体的HTML项目实例，包括引入依赖、设置地图样式和添加不同类型的图层（PointLayer,LineLayer,PolygonLayer）。作者提到Echarts的3D地图存在美观度和bug问题，而L7提供了更好的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

echarts的3D地图实在太丑了，还一堆bug

使用阿里的Antv可视化库L7，实现3D地图，底图是mapbox
参考示例：https://l7.antv.antgroup.com/zh/examples/polygon/3d#floatMap

如果不需要底图样式，可把Scene的style设置为blank

在这里插入图片描述

在这里插入图片描述
直接上代码了，vue的就不说了，项目是html的

mapbox依赖

<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />

L7依赖

<script src = 'https://unpkg.com/@antv/l7'></script>

body元素

<div id="idMap">

</div>

实现

<script>
    mapboxgl.accessToken = 'pk.------------------你的mapboxtoken';
    const scene = new L7.Scene({
        id: 'idMap',
        map: new L7.Mapbox({
            style: 'dark',
            center: [ 120, 29.732983 ],
            pitch: 40,
            zoom: 4,
        })
    });

    scene.on('loaded', () => {
    	let lineDown,
            lineUp,
            textLayer;
 		fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
            .then(res => res.json())
            .then(data => {
                const texts = [];  
                data.features.map(option => {
                    const { name, center } = option.properties;
                    const [ lng, lat ] = center || [];
                    texts.push({ name, lng, lat });
                    return '';
                });
                textLayer = new L7.PointLayer({ zIndex: 2 })
                    .source(texts, {
                        parser: {
                            type: 'json',
                            x: 'lng',
                            y: 'lat'
                        }
                    })
                    .shape('name', 'text')
                    .size(14)
                    .color('#0ff')
                    .style({
                        textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
                        spacing: 1, // 字符间距
                        padding: [ 1, 1 ], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
                        stroke: '#0ff', // 描边颜色
                        strokeWidth: 0.2, // 描边宽度
                        raisingHeight: 300000,
                        textAllowOverlap: true
                    });
                scene.addLayer(textLayer);

				lineUp = new L7.LineLayer({ zIndex: 1 })
                    .source(data)
                    .shape('line')
                    .color('#0DCCFF')
                    .size(1)
                    .style({
                        raisingHeight: 300000
                    });
                scene.addLayer(lineUp);

				const provincelayer = new L7.PolygonLayer({})
                    .source(data)
                    .size(300000)    // 切面高度
                    .shape('extrude')
                    .color('#0DCCFF')
                    .active({
                        color: 'rgb(100,230,255)'
                    })
                    .style({
                        heightfixed: true,
                        pickLight: true,
                        raisingHeight: 0,  // 抬升高度，距离底图的高度
                        opacity: 0.8
                    });
                scene.addLayer(provincelayer);

                return '';
 			});

        return '';
    });