reactjs - React + Mapbox 多边形层
问题描述
我正在尝试使用 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>
);
}
解决方案
问题出在变量的范围内,polygonPaint
并且AllShapesPolygonCoords
-它们在另一个领域。尝试删除this
:
<Layer type="fill" paint={polygonPaint}>
<Feature coordinates={AllShapesPolygonCoords} />
</Layer>
推荐阅读
- php - 如何对这个循环进行分页?
- java - Spring Data JPA 使用@query 或函数名过滤枚举值集
- ruby-on-rails - 如何在 Ruby on Rails 中将 HTTP 201 设置为 ActionController::API#create 的默认状态?
- c# - C#如何解决析构函数无法显示的问题
- python - 基于背景颜色的网页抓取html行?
- sql - .REGEXP_REPLACE 用于在列中添加值
- python-3.x - 如何以表格格式从发票中提取数据
- python - pandas - str(行)基于另一列中的 int 切片
- karate - 未显示运行空手道测试/调试选项
- javascript - 如何将发布版本设置为 Ember 构建的一部分?