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

Question

我试图从概念上理解Deck.GL是如何渲染事物的，所以我正在研究从“线”到“多边形”再到“ 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>
    );
  }
}

当我用下面的此Polygon层替换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;

显示此：