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

【问题标题】：Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)Leaflet GeoJSON Turf: × Error: Invalid LatLng object: (undefined, undefined)
【发布时间】：2020-12-19 20:31:18
【问题描述】：

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

我将数据作为几何集合的数组获取，其中包含构成边界的线串（来自 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;

【问题讨论】：

标签： reactjs leaflet gis geojson

【解决方案1】：

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

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(),
    };

【讨论】：