Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)

Question

我将相关组件和条件的 return 设置为 null 以检查我正在 returning 的数据，但我在坐标数组中找不到任何问题。

我将数据作为几何集合的数组获取，其中包含构成边界的线串（来自 OSM 的立交桥）。 Leaflet 似乎只接受形状、特征和特征集合作为输入。因此，我写了一些东西来将每个几何集合转换为包含多边形的特征，并添加名称和 ID 属性，然后将其变成一个特征集合。

OSM 请求正文示例

[out:json];relation["name"="Mount Rainier National Park"]["type"="boundary"]; convert item ::=::,::geom=geom(),_osm_type=type(); out geom;

州

  // Get boundaries for national lands in state X
  const getBoundaries = async (st) => {
    try {
      // Fetch boundaries
      const usStates = new UsaStates({ includeTerritories: true });
      // Convert full state/territory name to two character abbrieviation. 
      let abbr = null;
      usStates.states.map((row) => {
        if (row.name === st) {
          abbr = row.abbreviation;
        }
      });
      // Build array of national land names
      let lands = [];
      state.locations.map((loc) => {
        if (loc.states.includes(abbr)) {
          lands.push(loc.fullName);
        }
      });
      // Build Overpass query for boundaries
      let query = "[out:json];";
      lands.map((location) => {
        query += `relation["name"="${location}"]["type"="boundary"]; convert item ::=::,::geom=geom(),_osm_type=type(); out geom;`;
      });

      const osmRes = await axios.post(
        "https://lz4.overpass-api.de/api/interpreter",
        query
      );
      dispatch({
        type: GET_BOUNDARIES,
        payload: osmRes.data,
      });
    } catch (err) {
      dispatch({
        type: TOAST_ERROR,
        payload: err,
      });
    }
  };

减速器

case GET_BOUNDARIES:
  let b = [];
  let t = null;
  action.payload.elements.map((boundary) => {
    let a = [];
    t = polygonize(boundary.geometry);
    t.features.map((feature) => {
      a.push(feature.geometry.coordinates[0]);
    });
    b.push(multiPolygon(a));
    b[b.length - 1].properties = {
      name: boundary.tags.name,
      id: short.generate(),
    };
  });
  b = featureCollection(b);
  console.log("Reducer");
  return {
    ...state,
    boundaries: b,
    loading: false,
  };

组件

import React, { useContext} from "react";
import ParksContext from "../context/parks/ParksContext";
import { GeoJSON } from "react-leaflet";

const Boundaries = () => {
  const parksContext = useContext(ParksContext);
  const { boundaries, target, locations, states } = parksContext;

  return target === null &&
    Object.keys(states).length > 0 &&
    states.constructor === Object ? (
    <GeoJSON data={states} key={states}></GeoJSON>
  ) : target && locations.find((location) => location.id === target) ? (
    <GeoJSON
      data={
        boundaries[
          locations.find((location) => location.id === target).fullName
        ]
      }
    />
  ) : Object.keys(boundaries).length > 0 &&
    boundaries.constructor === Object ? (
    <GeoJSON data={boundaries} key={boundaries}></GeoJSON>
  ) : null;
};

export default Boundaries;

Answer 1

我使用 geojsonlint.com 并在我的 geojson 中发现错误。我的坐标数组数组必须在另一个数组中。最外面的数组允许第二个元素：holes.

case GET_BOUNDARIES:
  let b = [];
  let t = null;
  action.payload.elements.map((boundary) => {
    let a = [];
    t = polygonize(boundary.geometry);
    t.features.map((feature) => {
      a.push(feature.geometry.coordinates[0]);
    });
    b.push(multiPolygon([a]));     <-- Here
    b[b.length - 1].properties = {
      name: boundary.tags.name,
      id: short.generate(),
    };

Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)

Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)

gis

geojson

leaflet

reactjs