跳到主要内容

map

map​

创建 map​
// 设置 mapbox token
mapboxgl.accessToken =
  "pk.eyJ1Ijoia3hoNDg5MjYzNiIsImEiOiJjbGFhcWYyNmcwNHF3M25vNXJqaW95bDZsIn0.ID03BpkSU7-I0OcehcrvlQ";
const MapView = () => {
  // 初始化
  const mapContainerRef = useRef<HTMLDivElement>(document.createElement("div")); // map 容器 HTML 标签
  const mapRef = useRef<mapboxgl.Map | null>(null); // map 对象
  const setMap = useMapStore((state) => state.setMap); // map 全局状态变量
  // 创建 map
  useEffect(() => {
    if (mapRef.current) return; // 仅创建一次
    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current, // map 容器
      style: "mapbox://styles/mapbox/streets-v12", // map 底图
      center: [position[0], position[1]], // map 初始化中心位置
      zoom: position[2], // map 初始化缩放级别
    });
    setMap(mapRef.current); // 存储至 zustand 用于全局访问
  });
  // 返回 map容器
  return (
    <div
      ref={mapContainerRef}
      style={{ height: "100%" }}
      className="map-container"
    />
  );
};
操作 map 图层属性​
const tag = map.getLayer(info.node.key); // 检查 id 对应图层是否存在
if (tag) {
  map.getLayoutProperty(info.node.key, "visibility"); // 获取图层可见性
  map.setLayoutProperty(
    info.node.key,
    "visibility",
    info.checked ? "visible" : "none"
  ); // 设置图层可见性
}
map 属性​
new mapboxgl.Map({
  container: mapContainerRef.current, // map 容器
  style: "mapbox://styles/mapbox/streets-v12", // map 底图
  center: [position[0], position[1]], // map 初始化中心位置
  zoom: position[2], // map 初始化缩放级别
  preserveDrawingBuffer: true, // map canvas 是否可以获取, 默认为 false, 即不可获取
});

control​

操作 control​
const navigation = new mapboxgl.NavigationControl();
// 添加 control
map.addControl();
// 删除 control
map.removeControl(navigation);
// 判断是否具有 control
const added = map.hasControl(navigation); // true
// 获取 map 的 container 标签
const container = map.getContainer();
// 获取 map 的 canvas 的 container 标签
const canvasContainer = map.getCanvasContainer();
// 获取 map 的 canvas 标签
const canvas = map.getCanvas();

sources​

操作 source​
// 添加 source
getData(id).then((res) => {
  map.addSource(id, {
    type: "geojson",
    data: res,
  });
});
// 删除 source
const tag = map.getLayer(key); // 检查 id 对应图层是否存在
if (tag) {
  map.removeSource(key); // 移除 source
}
// 获得 source
const source = map.getSource(key);
操作 ImageSource​
// (method) mapboxgl.ImageSource.updateImage(options: mapboxgl.ImageSourceOptions): ImageSource 更新 ImageSource 对应图片
(map!.getSource(id) as ImageSource).updateImage({ url: url });

layers​

操作 layer​
// 添加地图图层
getData(id).then((res) => {
  // 添加 source
  map.addSource(id, {
    type: "geojson",
    data: res,
  });
  // 添加 layer
  map.addLayer({
    id: id,
    type: style as any,
    source: id,
    layout: {
      visibility: "visible",
    },
  });
});
// 删除地图图层
const tag = map.getLayer(key); // 检查 id 对应图层是否存在
if (tag) {
  map.removeLayer(key); // 移除 layer
  map.removeSource(key); // 移除 source
}

Cemera​

操作地图位置信息​
// 获取地图位置信息
mapRef.current.on("move", () => {
  const [lng, lat] = mapRef.current!.getCenter(); // 获取 map 当前中心位置
  const zoom = mapRef.current!.getZoom(); // 获取 map 当前缩放级别
  setPosition([
    Number(lng.toFixed(4)),
    Number(lat.toFixed(4)),
    Number(zoom.toFixed(2)),
  ]);
});
// 设置地图位置信息
const setMapPosition = () => {
  map.setCenter([lat, lng]); // 设置 map 当前中心位置
  map.setZoom(level); // 设置 map 当前缩放级别
};

event​

基本语法​
mapRef.current.on("move", () => {
  // ...
});
移动事件​
  • move(start/end)：地图移动；
  • drag(start/end)：地图拖拽；
  • zoom(start/end)：地图缩放；
  • rotate(start/end)：地图旋转；
生命周期​
  • load：地图加载数据；
  • render：地图渲染数据；
  • error：地图发生错误；

加载其他地图服务​

天地图​

mapboxgl.accessToken =
  "pk.eyJ1IjoibW9ob25nIiwiYSI6ImNrNGFsdjY5ZzA1NW4zbG14b2JoMnA5c3IifQ.1qVWFsyHW2wKThTgQg08SA";
const BEIJING_COORDINATE = [116.39123296750768, 39.907180309385694];

const style = {
  version: 8,
  name: "tianditu",
  sprite: "mapbox://sprites/mapbox/streets-v8",
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  sources: {
    // 天地图电子标记
    tianditu_cav: {
      type: "raster",
      tiles: [
        "https://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
        "https://t1.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
      ],
      tileSize: 256,
    },
    // 天地图电子底图
    tianditu_vec: {
      type: "raster",
      tiles: [
        "https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
        "https://t1.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
      ],
      tileSize: 256,
    },
    // 天地图影像图
    tianditu_img: {
      type: "raster",
      tiles: [
        "https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
      ],
      tileSize: 256,
    },
    tianditu_cia: {
      type: "raster",
      tiles: [
        "https://t1.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=3602668176205a735014c430d4bfd5c4",
      ],
      tileSize: 256,
    },
  },
  layers: [
    {
      id: "tianditu_img",
      type: "raster",
      source: "tianditu_img",
      minzoom: 0,
      maxzoom: 22,
      layout: {
        visibility: "none",
      },
    },
    {
      id: "tianditu_vec",
      type: "raster",
      source: "tianditu_vec",
      minzoom: 0,
      maxzoom: 22,
    },
    {
      id: "tianditu_cav",
      type: "raster",
      source: "tianditu_cav",
      minzoom: 0,
      maxzoom: 22,
    },
    {
      id: "tianditu_cia",
      type: "raster",
      source: "tianditu_cia",
      minzoom: 0,
      maxzoom: 22,
    },
  ],
};

const map = new mapboxgl.Map({
  container: "map",
  style: style,
  center: [116.40355, 39.91737],
  zoom: 11,
});