什么是L7

L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 G引擎 （最新支持webGPU）的开源大规模地理空间数据可视分析开发框架。

L7通过L7-Leaflet插件兼容leaflet，是在Leaflet上层的地图开发框架，L7还可以兼容 mapbox、高德、百度、天地图 等地图框架。

为什么要在leaflet中使用L7

• Leaflet默认的canvas渲染引擎，在十万级的矢量要素面前，显得非常无力。
• L7框架可适配多种地图框架，兼容性强，如果后期有需要做3D场景，切换技术栈方便。
• 可以使用L7的周边生态，如L7Draw。

具体操作

• 示例代码已经上传codeSandbox
• 使用geojson-random生成矢量数据

安装

npm install @antv/l7-leaflet @antv/l7 leaflet geojson-random

npm install @types/leaflet -D

示例代码

示例添加了1万的随机点，是因为不想弄得整个屏幕全是点，L7的性能可以轻松支持100万甚至更多

import "./styles.css";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import { Map } from "@antv/l7-leaflet";
import { PointLayer, Scene } from "@antv/l7";
import { useRef, useEffect } from "react";
import geojsonRandom from "geojson-random";
export default function App() {
  const mapContainer = useRef<HTMLDivElement>(null);
  let scene: Scene;
  useEffect(() => {
    if (!scene) {
      // 初始化L7
      scene = initScene(mapContainer.current!);
    }
  }, [mapContainer]);
  return <div ref={mapContainer} className="App map-container"></div>;
}
function initScene(dom: HTMLDivElement) {
  const scene = new Scene({
    id: dom,
    map: new Map({
      pitch: 0,
      center: [119.244, 26.076],
      zoom: 13,
      minZoom: 1,
      zoomControl: false,
    }),
  });
  scene.on("loaded", () => {
    const leafletMap = scene.map as L.Map;
    // 添加底图
    addBaseLayer("vec", leafletMap);
    addBaseLayer("cva", leafletMap);
    // 添加点图层
    addPointLayer(scene);
  });
  return scene;
}
function addPointLayer(scene: Scene) {
  const leafletMap = scene.map as L.Map;
  // 获取可视区域范围
  const bbox = leafletMap
    .getBounds()
    .toBBoxString()
    .split(",")
    .map((el) => Number(el));
  // 随机生成的点数,可以替换成更多
  const pointCount = 1e4;
  const pointGeojson = geojsonRandom.point(pointCount, bbox);
  const pointLayer = new PointLayer();
  pointLayer
    // 设置源数据
    .source(pointGeojson)
    // 配置点图层的样式
    .size(2)
    .color("red")
    .shape("circle");
  // 加入场景
  scene.addLayer(pointLayer);
}
function addBaseLayer(mapType: string, map: L.Map) {
  L.tileLayer(
    "https://t{s}.tianditu.gov.cn/" +
      mapType +
      "_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=" +
      mapType +
      "&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=b72aa81ac2b3cae941d1eb213499e15e",
    {
      subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
      attribution:
        '&copy; <a href="http://lbs.tianditu.gov.cn/home.html">天地图 GS(2022)3124号 - 甲测资字1100471</a>',
    }
  ).addTo(map);
}

后记

目前L7-Leaflet插件还在开发测试阶段，欢迎大家提issue。

另：webgis个人开发者 在线接活 vx：celery_warlock