AntV L7 地理可视化库学习笔记

AntV L7 地理可视化库学习笔记

一、核心概念理解

AntV L7 是基于 WebGL 技术的地理空间数据可视化库，偶然的机会接触到，简单总结一下学习经验，由于之前接触过antv g2类型的图表做一些可视化开发的工作，所以官网文档学习起来还是比较得心应手的，学习L7开发的过程新接触了几点，简单总结下：

1. 场景(Scene)容器：作为整个地图的承载容器，负责管理地图实例、图层和交互事件。Scene 实例化时我这边用的是官网中的 GaodeMap 作为底图，并设置了初始视角和交互限制，一开始阅读官网的时候并没有发现可以实现禁止缩放的配置项，后面发现maxZoom和minZoom搭配可以实现禁止缩放。
2. 图层(Layer)系统：L7 采用分层渲染的思想，不同类型的图层（如 PolygonLayer、LineLayer）可以叠加显示。图层都是按照 zIndex 顺序渲染的，所以在实现需求需要高亮某一区域的时候非常方便。
3. 数据驱动设计：所有可视化效果都基于 GeoJSON 数据源，通过数据属性映射到视觉通道（颜色、大小等）。GeoJSON数据可以在antv给出的官方数据源获取，可以下钻上卷获取需要的地图区域。

二、需求实现

1. 交互高亮机制

function highlightLocation(scene, feature) {

    if (currentHighlightLayer.value) {

    scene.removeLayer(currentHighlightLayer.value);

    }

    const highlightSource = {

    type: 'FeatureCollection',

    features: [feature]

    };

    list.value = feature.properties;

    const highlightLayer = new PolygonLayer({

    name: 'highlight-layer',

    zIndex: 2

    })
    .source(highlightSource)
}

关键点：

• 采用独立的图层实现高亮，而不是修改原始数据，避免频繁的数据操作
• 管理图层生命周期，及时删除旧的高亮图层，否则会导致内存泄漏和性能下降
• zIndex 控制确保了视觉层次 这边实现高亮区域就可以通过设置该区域的zIndex实现

2. 自动轮播功能

通过定时器实现的地区轮播展示了 L7 的动态更新能力：

function startRotation(scene, features, interval = 3500) {
  stopRotation(); // 清理旧定时器
  highlightLocation(scene, features[currentIndex.value]);

  timer = setInterval(() => {
    currentIndex.value = (currentIndex.value + 1) % features.length;
    highlightLocation(scene, features[currentIndex.value]);
  }, interval);
}

学到的经验：

• 必须妥善管理定时器资源，在组件卸载时清除
• 直接操作图层而非重新创建 Scene 实例，性能更优
• 使用取模运算实现循环索引是简洁有效的做法

三、避坑

1. 在开发过程中一开始没有看GaodeMap类的配置项信息，导致复制官网demo代码过来后，我自己把geojson数据源替换成了福建省的信息，但是一直显示空白，以为是其他渲染问题，最后排查发现是配置项center（视觉中心经纬度）还保留官网demo上的配置，但是我改了数据源，会导致在原先的经纬度上是看不到福建的地图的，最后把center配置改成了福建的经纬度就可以啦～