React + Mapbox Polygon Layer - PullRequest
Новая
       12

React + Mapbox Polygon Layer

0 голосов
/ 31 августа 2018

Я пытаюсь нарисовать простой многоугольник на карте с помощью response-mapbox-gl. Я следил за демонстрациями (http://alex3165.github.io/react-mapbox-gl/demos), но не могу заставить его работать. Я получаю следующую ошибку из приведенного ниже кода.

enter image description here

Кто-нибудь знает, что мне здесь не хватает? 

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>

    );

}

1 Ответ

0 голосов
/ 01 сентября 2018

Проблема в области действия переменных polygonPaint и AllShapesPolygonCoords - они находятся в другой области. Попробуйте удалить this: 

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