html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了html Antv L7 + mapbox 实现3D地图 3D中国地图不限于中国地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

antv地图,前端,html,echarts,javascript,antv,L7

antv地图,前端,html,echarts,javascript,antv,L7
直接上代码了，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>

实现文章来源地址https://www.toymoban.com/news/detail-619678.html

<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 '';
    });