antV实现离线中国2D地图并叠加拓扑（一）

原创

已于 2023-02-08 09:37:22 修改 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-02-07 15:58:54 首次发布

文章介绍了如何利用antv的G6和L7库在中国地图上动态展示拓扑站点并实时弹出站点详情。由于需要自定义站点操作，选择G6叠加在L7上进行实现。地图最初只展示了省市边界，通过Choropleth图层展示了不同区域的颜色填充，并对特定区域进行了高亮和自适应配色。

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

业务背景：

中国地图铺满屏幕，屏幕的中间部分动态展示当前区域地图。当前区域有可能是省、市、县等，需要在当前区域展示拓扑站点，并实时弹出小面板展示当前站点详情。

实现方式：

antv-G6实现拓扑图，antv-L7绘制地图。本身L7是可以实现动态标记站点的效果，但是因为站点需要做的自定义操作较多，所以选择了叠加G6来实现。
最终实现效果展示：

地图缩放展示：

代码实现

首先，绘制地图。原本的需求是需要展示全国的道路河流，但是搞不到数据，只能展示到省市的分界线了。

//html部分
<div ref="container" id="container"></div>
//js部分
import {
   
    Scene, PolygonLayer, Mapbox } from '@antv/l7';
import areaList from '@/views/area-list';//引用地图数据
export default {
   
   
   mounted(){
   
   
		let totaldata = {
   
    parentCode: 610000, type: 'city' };//当前区域代码和区域级别（陕西省）
		//new一个地图场景
        const scene = new Scene({
   
   
            id: 'container',
            map: new Mapbox({
   
   
                style: 'blank',//地图底图的基本样式，blank代表无底图，还可以导入自定义配色
                zoom: 0,//初始化缩放等级
                pitch: 0,//地图初始俯仰角度，一般3D地图用的上
            }),
        });
        //下面有两处地图场景样式配置加载。第一个是显示中国地图的省市区划分隔线，第二个是加载当前区域样式
        //地图的配置参数--中国地图整个纹理及配色
        scene.on('loaded', () => {
   
   
        	//Choropleth代表区域图层
           const choropleth = new Choropleth