如何在React-Leaflet地图上渲染自定义ZXY矢量瓦片图层？

你说得没错，React-Leaflet自带的TileLayer确实只支持栅格（图像）瓦片，要渲染矢量瓦片需要借助leaflet.vectorgrid这个Leaflet插件，下面是具体实现方案：

1. 安装依赖 #

首先安装必要的包：

npm install leaflet.vectorgrid
# TypeScript用户额外安装类型定义
npm install @types/leaflet.vectorgrid --save-dev

2. 封装矢量瓦片组件 #

根据你需要的点、多边形两种要素，分别封装自定义组件（以常用的Mapbox Vector Tile(MVT)格式为例，若后端返回GeoJSON瓦片，只需替换对应方法）：

多边形矢量瓦片组件 #

import { useEffect, useRef } from 'react';
import { useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet.vectorgrid';

const PolygonVectorTileLayer = ({ url, minZoom, maxZoom }) => {
  const map = useMap();
  const layerRef = useRef(null);

  useEffect(() => {
    if (!layerRef.current) {
      // 初始化MVT格式的矢量瓦片图层
      const vectorLayer = L.vectorGrid.protobuf(url, {
        minZoom,
        maxZoom,
        // 自定义多边形样式
        style: () => ({
          fillColor: '#3388ff',
          fillOpacity: 0.5,
          color: '#1166cc',
          weight: 2
        })
      });
      layerRef.current = vectorLayer;
      map.addLayer(vectorLayer);
    }

    // 组件卸载时移除图层
    return () => {
      if (layerRef.current) {
        map.removeLayer(layerRef.current);
        layerRef.current = null;
      }
    };
  }, [map, url, minZoom, maxZoom]);

  return null;
};

export default PolygonVectorTileLayer;

点要素矢量瓦片组件 #

import { useEffect, useRef } from 'react';
import { useMap } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet.vectorgrid';

const PointVectorTileLayer = ({ url, minZoom, maxZoom }) => {
  const map = useMap();
  const layerRef = useRef(null);

  useEffect(() => {
    if (!layerRef.current) {
      const vectorLayer = L.vectorGrid.protobuf(url, {
        minZoom,
        maxZoom,
        // 自定义点样式
        style: () => ({
          radius: 5,
          fillColor: '#ff4444',
          fillOpacity: 1,
          color: '#cc0000',
          weight: 1
        }),
        // 将点要素转为CircleMarker
        pointToLayer: (feature, latlng) => L.circleMarker(latlng)
      });
      layerRef.current = vectorLayer;
      map.addLayer(vectorLayer);
    }

    return () => {
      if (layerRef.current) {
        map.removeLayer(layerRef.current);
        layerRef.current = null;
      }
    };
  }, [map, url, minZoom, maxZoom]);

  return null;
};

export default PointVectorTileLayer;

3. 在地图中使用组件 #

import { MapContainer, TileLayer } from 'react-leaflet';
import PolygonVectorTileLayer from './PolygonVectorTileLayer';
import PointVectorTileLayer from './PointVectorTileLayer';
import 'leaflet/dist/leaflet.css'; // 别忘了引入Leaflet样式

function InteractiveMap() {
  return (
    <MapContainer
      center={[39.9042, 116.4074]} // 示例中心点（北京）
      zoom={16}
      style={{ height: '100vh', width: '100%' }}
    >
      {/* 底图用普通栅格瓦片 */}
      <TileLayer
        attribution='© OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {/* 多边形矢量瓦片 */}
      <PolygonVectorTileLayer
        url="http://localhost:8000/api/v3/polygon-tiles/{z}/{x}/{y}"
        minZoom={15}
        maxZoom={20}
      />
      {/* 点矢量瓦片 */}
      <PointVectorTileLayer
        url="http://localhost:8000/api/v3/point-tiles/{z}/{x}/{y}"
        minZoom={15}
        maxZoom={20}
      />
    </MapContainer>
  );
}

export default InteractiveMap;

注意事项 #

• 如果后端返回的是GeoJSON格式的瓦片，将L.vectorGrid.protobuf替换为L.vectorGrid.slicer即可
• 可以通过style函数的feature参数，根据要素的属性（如feature.properties.type）设置差异化样式
• 确保Leaflet的CSS已全局引入，否则地图会出现样式异常

内容的提问来源于stack exchange，提问作者Jose