reactjs - 根据功能调整的 react-leaflet geojson 样式

Question

我是 React 的新手，并尝试将我的传单映射到 react-leaflet 组件中。

该组件由一个 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;

当然这不起作用，但我看不到如何正确地注入(inject)我的样式函数，特别是 react-leaflet 中的“getColor”。

我从 javascript/leaflet 中的一个工作示例开始(没有反应)，所以我在这里可能有一个完全错误的策略。任何想法都非常受欢迎。

Answer 1

首先确保您的 material_design_colors.json 和 heatmap.json 文件正在导出变量。为此，将文件名从 .json 更改为 .js 即

// in material_design_colors.js
var material_design_colors = [{...},
                              {...}];

module.exports = material_design_colors;    

// in heatmap.js
var heatmap= [{...},
             {...}];

module.exports = heatmap; 

现在在您的 MyHeatMap 组件中添加构造函数并在其中绑定(bind)您的方法。更改 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;