我正在尝试使用 Leaflet.VectorGrid.Slicer,但出现错误:
Input data is not a valid GeoJSON object
。
VectorGrid.js
import { useEffect } from "react";
import { useLeafletContext } from "@react-leaflet/core";
import L from "leaflet";
import geojsonvt from "geojson-vt";
import "leaflet.vectorgrid";
import { featureCollection, feature } from "@turf/helpers";
export default function VectorGrid({ assets }) {
const { layerContainer, map } = useLeafletContext();
const geoJsons = assets
.filter((asset) => asset.mapPolygon)
.map((asset) => feature(asset.mapPolygon.geometry));
const slicerInput = featureCollection(geoJsons);
console.log(slicerInput);
const data = geojsonvt(slicerInput);
const vectorGrid = L.vectorGrid.slicer(data, {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
sliced: {
fillColor: "transparent",
color: "blue",
weight: 0.5,
},
},
maxZoom: 22,
indexMaxZoom: 5, // max zoom in the initial tile index
interactive: true,
});
const container = layerContainer || map;
useEffect(() => {
container.addLayer(vectorGrid);
return () => {
container.removeLayer(vectorGrid);
};
}, [container, vectorGrid]);
return null;
}
temp_data.js
export const dat = [
{
assetid: 1,
id: 1,
mapPolygon: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-104.98948, 39.64244],
[-104.98953, 39.64244],
[-104.98953, 39.64236],
[-104.98918, 39.64236],
[-104.98918, 39.64247],
[-104.98948, 39.64247],
[-104.98948, 39.64244],
],
],
},
},
latitude: null,
longitude: null,
}, {
assetid: 3,
id: 3,
mapPolygon: {
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[-104.98793, 39.6444],
[-104.98816, 39.64439],
[-104.98816, 39.64438],
[-104.98825, 39.64437],
[-104.98825, 39.64432],
[-104.98826, 39.64431],
[-104.98826, 39.64429],
[-104.98828, 39.64429],
[-104.98827, 39.64422],
[-104.988, 39.64422],
[-104.98799, 39.64429],
[-104.98793, 39.64429],
[-104.98793, 39.6444],
],
],
},
},
latitude: null,
longitude: null,
}]