reactjs - 在 Deck.GL 中渲染多边形的最简单方法是什么？

Question

我试图从概念上理解 Deck.GL 如何渲染事物，所以我正在研究从 Lines 到 Polygons 再到 GeoJson 的示例层。线条工作正常，但有些东西阻止我渲染即使是最简单的多边形 DeckGL 在他们的例子中。

这是一些有效的示例行代码

import React from "react";
import DeckGL, { LineLayer } from "deck.gl";
import { StaticMap } from "react-map-gl";

const MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_KEY;

// Viewport settings
const viewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [
  {
    sourcePosition: [-91.72307036099997, 31.814196736000035],
    targetPosition: [-122.41669, 37.781]
  },
  {
    sourcePosition: [-122.41669, 37.781],
    targetPosition: [-95.52274057225983, 30.131426214982195]
  }
];

// DeckGL react component
export default class ExampleMap extends React.Component {
  render() {
    const layers = [new LineLayer({ id: "line-layer", data })];

    return (
      <DeckGL initialViewState={viewState} controller={true} layers={[layers]}>
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );
  }
}

当我用下面的这个多边形层替换 LineLayer 时 - 它完全没有显示任何东西

//examplepoly.js

import { PolygonLayer } from "deck.gl";

// Data to be used by the POLYLayer

const polygonData = [
  -91.72307036099997,
  31.814196736000035,
  0,
  -122.41669,
  37.781,
  0,
  -95.52274057225983,
  30.131426214982195,
  0,
  -91.72307036099997,
  31.814196736000035,
  0
];

const LAYER_POLY = [
  new PolygonLayer({
    id: "poly-layer",
    data: polygonData
  })
];

export default LAYER_POLY;

谁能给我看一个我可以使用的简单多边形图层？文档中的那个似乎不起作用，而 GeoJson 一个现在有点太复杂了

Answer 1

弄清楚了。

PolygonLayer 的getPolygon函数无法识别我的数组数据，因此我需要对其进行重组，如下所示：

// examplePolygonLayer.js
import { PolygonLayer } from "deck.gl";

// Data to be used by the POLYLayer
const polygonData = [
  {
    contours: [
      [-91.72307036099997, 31.814196736000035],
      [-122.41669, 37.781],
      [-95.52274057225983, 30.131426214982195],
      [-91.72307036099997, 31.814196736000035]
    ],
    name: "firstPolygon"
  }
];

const LAYER_POLY = new PolygonLayer({
  id: "poly-layers",
  data: polygonData,
  stroked: true,
  filled: true,
  extruded: false,
  wireframe: true,
  lineWidthMinPixels: 1,
  getPolygon: d => d.contours,
  getLineColor: [80, 80, 80],
  getFillColor: [80, 80, 80],
  getLineWidth: 250
});
export default LAYER_POLY;

显示这个：