React useMapbox : 初始化实例挂载 mapbox + antv / L7

[jtwang7]

React useMapbox : 初始化实例挂载 mapbox + antv / L7

🌈 目的:

• 基于 antv / L7 初始化挂载 mapbox 地图实例，并去除地图的杂乱的文本图层。
• 抽象成 react hook 并暴露实例接口

❇️ 代码

import { Mapbox, Scene } from "@antv/l7";
import mapboxgl, { Map, MapboxOptions } from "mapbox-gl";
import { useLayoutEffect, useRef } from "react";

export const useMapbox = (
  containerId: string, // 容器 id
  config: Omit<MapboxOptions, "container"> = {
    style: "mapbox://styles/mapbox/dark-v10",
    center: [114.085947, 22.7],
    zoom: 10,
    pitch: 45,
  },
  token = '', // mapbox token
) => {
  // mapbox 地图实例
  const mapbox = useRef<Map | null>(null)
  // L7 实例
  const scene = useRef<Scene | null>(null)
  useLayoutEffect(() => {
    mapboxgl.accessToken = mapboxToken;
    const map = new mapboxgl.Map({ container: containerId, ...config });
    mapbox.current = map;
    map.on("load", () => {
      // 移除 mapbox label 标签
      const layers = map.getStyle().layers;
      if (layers) {
        for (let i = 0; i < layers.length; i++) {
          if (/-label$/.test(layers[i].id)) {
            map.removeLayer(layers[i].id);
          }
        }
      }
    });
    // mapbox接入antvL7
    scene.current = new Scene({
      id: containerId,
      map: new Mapbox({
        mapInstance: map,
      }),
      logoVisible: false,
    });
  }, []);

  return {
    mapbox,
    scene,
  }
};