React+Leaflet中L.vectorGrid.protobuf返回undefined的原因排查

问题 #

在React、Leaflet和react-leaflet环境下开发，已引入leaflet.vectorgrid与react-leaflet-vectorgrid依赖，编写AddLayerToMap组件尝试添加矢量网格图层时，调用L.vectorGrid.protobuf返回undefined。相关组件代码和package.json依赖配置如下：

组件代码 #

import L from 'leaflet';
import { useEffect } from 'react';
import { useMap } from 'react-leaflet';
import { useSelector } from 'react-redux';
import { selectLayersStatus } from './LayerSlice';

type LayerDetails = {
    layerName?: string;
    tileUrl?: string;
    fillColor?: string;
} | undefined;

const AddLayerToMap: React.FC<LayerDetails> = () => {

    const selectLayersStatusSelector = useSelector(selectLayersStatus);

    const mapInstance = useMap();


    useEffect(() => {

        console.log('selectLayersStatusSelector:', selectLayersStatusSelector?.layers);

        let layerName: any = selectLayersStatusSelector?.layers?.data?.layerName;
        let tileUrl: any = selectLayersStatusSelector?.layers?.data?.tileUrl;
        let fillColor: any = selectLayersStatusSelector?.layers?.data?.fillColor;

        const defaultOptions: any = {
            zIndex: 1,
            // fetchOptions: {
            //     headers: {
            //       'Authorization': `Bearer ${keycloak.token}`
            //     }
            //   },
            maxZoom: 18,
            minZoom: 5,
            rendererFactory: 'L.canvas.tile',
            attribution: 'SIGEO',
        };

        const newGridConfig: any = {
            url: tileUrl,
            layerName: layerName,
            vectorTileLayerStyles: {
                default: {
                    weight: 1,
                    fillColor: fillColor,
                    fillOpacity: 0.3,
                    fill: true,
                }
            },
            interactive: true,
            getFeatureId: (f: any) => f.name,
        }

        if (mapInstance) {

            console.log('tileUrl:', tileUrl);
            console.log('layerName:', layerName);
            console.log('fillColor:', fillColor);

            console.log("AddLayerToMap: ", tileUrl, layerName, mapInstance);

            console.log("mapInstance: ", mapInstance);
            console.log("Adding new vector grid layer: ", newGridConfig);

            // @ts-ignore
            const addedLayer = L.vectorGrid?.protobuf(newGridConfig?.url,
                { ...defaultOptions, ...newGridConfig?.options })?.addTo(mapInstance);

            console.log("Added new vector grid layer: ", addedLayer);

        }

    }, [mapInstance, selectLayersStatusSelector?.layers]);

    // ... (rest of the functions and event handlers remain the same)

    return (
        <div></div>
    );
}

export default AddLayerToMap;

package.json依赖 #

{
  ...
  "dependencies": {
    ...
    "@react-leaflet/core": "^2.1.0",
    "leaflet": "^1.9.4",
    "leaflet.vectorgrid": "^1.3.0",
    "react-leaflet": "^4.2.1",
    "react-leaflet-vectorgrid": "^2.2.1",
   ...
  }
}

解决方案 #

• 缺少leaflet.vectorgrid的显式导入：leaflet.vectorgrid是Leaflet的第三方插件，不会自动挂载到L对象上。当前代码仅导入了Leaflet核心库，需添加插件导入语句：

  import 'leaflet.vectorgrid';
  

• 配置参数合并逻辑错误：代码中尝试合并newGridConfig?.options，但newGridConfig里并没有options属性，所有配置项都直接在对象根层级。需调整合并逻辑：

  const layerOptions = {
    ...defaultOptions,
    layerName: newGridConfig.layerName,
    vectorTileLayerStyles: newGridConfig.vectorTileLayerStyles,
    interactive: newGridConfig.interactive,
    getFeatureId: newGridConfig.getFeatureId,
  };
  const addedLayer = L.vectorGrid.protobuf(newGridConfig.url, layerOptions).addTo(mapInstance);
  

• 建议直接使用react-leaflet-vectorgrid封装组件：既然已安装react-leaflet-vectorgrid，可以用它提供的React组件替代原生Leaflet API调用，更贴合React开发模式：

  import { VectorGridProtobuf } from 'react-leaflet-vectorgrid';
  
  // 在组件返回值中使用
  return (
    <VectorGridProtobuf
      url={tileUrl}
      options={{
        ...defaultOptions,
        layerName,
        vectorTileLayerStyles: {
          default: {
            weight: 1,
            fillColor,
            fillOpacity: 0.3,
            fill: true,
          }
        },
        interactive: true,
        getFeatureId: (f: any) => f.name,
      }}
    />
  );
  

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