Leaflet.VectorGrid 抛出错误输入数据不是有效的 GeoJSON 对象

时间:2021-04-10 09:46:39

标签: javascript leaflet

我正在尝试使用 Leaflet.VectorGrid.Slicer,但出现错误:

Input data is not a valid GeoJSON object

codesandbox

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,
}]

0 个答案:

没有答案