我是新手做出反应并尝试将我的传单映射到反应传单组件中。
该组件由tilelayer和geojson图层组成（多边形的特征集合）。
我可以在我的应用程序中获取它们但我无法弄清楚如何为geojson图层设置样式，其中多边形的颜色基于每个多边形的属性。此外，在某些时候，用户应该能够选择用于设置多边形样式的属性。
这是我的代码：
import React, { Component } from 'react';
import logo from './logo.svg';
import { Map, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
// the geojson feature collection is in there
import heatmap from './heatmap.json';
// the colormaps are in there
import material_design_colors from './material_design_colors.json';
import './App.css';
class MyHeatMap extends Component {
state = {
lat: 37.8,
lng: -96.0,
zoom: 4,
segment: "C_00",
polygonFillColor: "pink",
constant_range: [-10.0, 10.0],
}
// get the geoJson containing the heatmap
getGeoJson(){
return heatmap;
}
getColor(d) {
// now uses palette from google material design: https://material.io/guidelines/style/color.html#color-color-palette
var material_design_color_idx = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
var palette = new Array(material_design_color_idx.length)
var i
for (i=0 ; i < material_design_color_idx.length ; i++){
palette[i] = material_design_colors[this.state.polygonFillColor][material_design_color_idx[i]]
}
for (i=1 ; i <= palette.length; i++){
// values of the property are between -10,0 and 10.0
if (d < -10.0 + i * (10.0 - (-10.0))/palette.length){
return palette[i-1]
}
}
};
style(feature) {
return {
// the fillColor is adapted from a property which can be changed by the user (segment)
fillColor: this.getColor(feature.properties.scores[this.state.segment]),
weight: 0.3,
//stroke-width: to have a constant width on the screen need to adapt with scale
opacity: 1,
color: material_design_colors[this.state.polygonFillColor]["400"],
dashArray: '3',
fillOpacity: 0.5
};
};
render() {
const position = [this.state.lat, this.state.lng]
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="spatial.ai"
url="uri of the mapbox tile layer"
/>
<GeoJSON data={this.getGeoJson()} style={this.style()}></GeoJSON>
</Map>
)
}
}
class App extends Component {
constructor(props) {
super();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<MyHeatMap/>
</div>
);
}
}
export default App;
当然这不起作用，但我看不出如何正确地注入我的风格功能，特别是＆＃34; getColor＆＃34;反应传单。
我从javascript / leaflet中的一个工作示例开始（没有反应）所以我可能在这里有一个完全错误的策略。任何想法都非常受欢迎。
答案 0 :(得分：0)
首先确保您的material_design_colors.json和heatmap.json文件正在导出变量。为此，请将文件名从.js更改为.json，即
// in material_design_colors.js
var material_design_colors = [{...},
{...}];
module.exports = material_design_colors;
// in heatmap.js
var heatmap= [{...},
{...}];
module.exports = heatmap;
现在在MyHeatMap组件中添加构造函数并将方法绑定在其中。更改GeoJSON图层的样式属性，如下面的代码所示。
import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup, GeoJSON } from 'react-leaflet';
import heatmap from './heatmap.js';
import material_design_colors from './material_design_colors.js';
class MyHeatMap extends Component {
constructor(props) {
super(props);
this.state = {
lat: 37.8,
lng: -96.0,
zoom: 4,
segment: "C_00",
polygonFillColor: "pink",
constant_range: [-10.0, 10.0],
}
this.getColor = this.getColor.bind(this);
this.style = this.style.bind(this);
}
// get the geoJson containing the heatmap
getGeoJson() {
return heatmap;
}
getColor(d) {
// now uses palette from google material design: https://material.io/guidelines/style/color.html#color-color-palette
var material_design_color_idx = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900"]
var palette = new Array(material_design_color_idx.length)
var i
for (i = 0; i < material_design_color_idx.length; i++) {
palette[i] = material_design_colors[this.state.polygonFillColor][material_design_color_idx[i]]
}
for (i = 1; i <= palette.length; i++) {
// values of the property are between -10,0 and 10.0
if (d < -10.0 + i * (10.0 - (-10.0)) / palette.length) {
return palette[i - 1]
}
}
};
style(feature) {
return {
// the fillColor is adapted from a property which can be changed by the user (segment)
fillColor: this.getColor(feature.properties.scores[this.state.segment]),
weight: 0.3,
//stroke-width: to have a constant width on the screen need to adapt with scale
opacity: 1,
color: material_design_colors[this.state.polygonFillColor]["400"],
dashArray: '3',
fillOpacity: 0.5
};
};
render() {
const position = [this.state.lat, this.state.lng]
return (
<Map center={position} zoom={this.state.zoom}>
<TileLayer
attribution="spatial.ai"
url="uri of the mapbox tile layer"/>
<GeoJSON data={this.getGeoJson()} style={this.style}></GeoJSON>
</Map>
)
}
}
export default MyHeatMap;
这里我将MyHeatMap组件移动到同一文件夹中名为MyHeatMap.js的新文件中。
现在你的App.js看起来像这样，
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import MyHeatMap from './MyHeatMap';
class App extends Component {
constructor(props) {
super();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<MyHeatMap />
</div>
);
}
}
export default App;