传单GeoJSON Turf：×Error:无效LatLng对象：(未定义，未定义)

Question

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

我将数据作为一个包含行字符串的几何图形集合数组来获取，这些字符串构成边框(来自OSM的天桥)。传单似乎只接受形状、特征和特征记忆作为输入。因此，我编写了一些东西，将每个几何图形集合转换为包含多个多边形的特性，并添加了一个名称和ID属性，然后使其成为一个功能回忆。

OSM请求体的示例

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

State

  // 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中发现了一个错误。我的坐标数组必须在另一个数组中。最外层的数组允许第二个元素:孔。

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