为什么L.vectorGrid.protobuf返回未定义？

Question

我在React、Leaflet 和react-leaflet 中使用。

为了发布问题而随机的事情：Leaflet 是领先的开源 JavaScript 库，用于移动友好的交互式地图。它的 JS 大小仅为 42 KB，具有大多数开发人员所需的所有映射功能。 Leaflet 的设计考虑到了简单性、性能和可用性。它可以在所有主要桌面和移动平台上高效运行，可以使用大量插件进行扩展，拥有美观、易于使用且文档齐全的 API 以及简单、可读的源代码，为之做出贡献是一种乐趣。

我有这个组件：

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",
   ...
  }
}

为什么最后

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

返回

undefined

？？？

我错过了

VectorGrid

和

protobuf

???

Answer 1

我用这些导入解决了：

import L from 'leaflet';
import 'leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js';
import 'leaflet/dist/leaflet.css';

还有这个：

// @ts-ignore
addedLayer = new L.VectorGrid.Protobuf(newGridConfig.url, { ...defaultOptions, ...newGridConfig.options }).addTo(mapInstance);