React + Mapbox多边形层

Question

我正在尝试使用react-mapbox-gl在地图框上绘制一个简单的多边形。我一直在关注演示（http://alex3165.github.io/react-mapbox-gl/demos），但似乎无法正常工作。我从下面的代码中收到以下错误。

有人知道我在这里想念什么吗？

import React from 'react';
import PropTypes from 'prop-types';

import MapDropdown from './MapDropdown';

import { Input} from 'reactstrap';
import ReactMapboxGl, { Layer, Feature, Popup } from "react-mapbox-gl";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

const Map = ReactMapboxGl({
  accessToken: "pk.eyJ1IjoiYmFycnlsYWNoYXBlbGxlIiwiYSI6IkVkT1FZX2MifQ.sSg105ALmN6eQgutNxWTOA"
});

const polygonPaint = {
  'fill-color': '#6F788A',
  'fill-opacity': 0.7
};

const AllShapesPolygonCoords = [
  [
    [-0.13235092163085938, 51.518250335096376],
    [-0.1174163818359375, 51.52433860667918],
    [-0.10591506958007812, 51.51974577545329],
    [-0.10831832885742188, 51.51429786349477],
    [-0.12531280517578122, 51.51429786349477],
    [-0.13200759887695312, 51.517823057404094]
  ]
];

const MapPage = props => {


    return(

        <div>

        <Map
            style="mapbox://styles/mapbox/streets-v9"
            containerStyle={{
                height: "100vh",
                width: "100vw",
            }}
            center={props.mapCenter}
            zoom={props.mapZoom}>

            {props.countries
                .map((coords, index) =>

            <Layer type="fill" paint={this.polygonPaint}>
            <Feature coordinates={this.AllShapesPolygonCoords} />
            </Layer>

            )}

        </Map>
        </div>

        </div>

    );

}

Answer 1

问题出在变量polygonPaint和AllShapesPolygonCoords的范围内-它们在另一个区域中。尝试删除this：

<Layer type="fill" paint={polygonPaint}>
  <Feature coordinates={AllShapesPolygonCoords} />
</Layer>