React Leaflet:动态设置GeoJSON的样式 [英] React Leaflet: setting a GeoJSON's style dynamically

问题描述

我试图根据其ID是否与选择器匹配来动态更改GeoJSON组件的样式.

I'm trying to change a GeoJSON component's style dynamically based on whether its ID matches a selector.

该插件的作者引用了传单文档，其中说应该将样式作为函数传递.我在做什么，但没有骰子.

The author of the plugin refers to the Leaflet documentation, which says that the style should be passed as a function. Which I'm doing, but no dice.

我的组件:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Marker, Popup, GeoJSON } from 'react-leaflet';
import { centroid } from '@turf/turf';

const position = geoJSON => {
    return centroid(geoJSON).geometry.coordinates.reverse();
};

export class PlotMarker extends Component {
    render() {
        const {
            id,
            name,
            geoJSON,
            zoomLevel,
            selectedPlot,
            plotBeingEdited
        } = this.props;
        const markerPosition = position(geoJSON);
        let style = () => {
            color: 'blue';
        };
        if (selectedPlot === id) {
            style = () => {
                color: 'red';
            };
        }
        if (zoomLevel > 14) {
            return (
                <GeoJSON
                    id={id}
                    data={geoJSON}
                    style={style}
                    onClick={() => {
                        this.props.selectPlot(id);
                    }}
                />
            );
        }
        return (
            <Marker
                id={id}
                className="marker"
                position={markerPosition}
                onClick={() => {
                    this.props.selectPlot(id);
                }}>
                <Popup>
                    <span>{name}</span>
                </Popup>
            </Marker>
        );
    }
}

function mapStateToProps(state) {
    return {
        selectedPlot: state.plots.selectedPlot,
        plotBeingEdited: state.plots.plotBeingEdited,
        zoomLevel: state.plots.zoomLevel
    };
}

export default connect(mapStateToProps, actions)(PlotMarker);

推荐答案

好的，知道了.这与我定义样式功能的方式有关.这不起作用:

OK, got it. It had to do with the way I was defining the style function. This doesn't work:

    let style = () => {
        color: 'blue';
    };
    if (selectedPlot === id) {
        style = () => {
            color: 'red';
        };
    }
    if (zoomLevel > 14) {
        return (
            <GeoJSON
                id={id}
                data={geoJSON}
                style={style}
                onClick={() => {
                    this.props.selectPlot(id);
                }}
            />
        );
    }

这有效:

let style = () => {
            return {
                color: 'blue'
            };
        };
        if (selectedPlot === id) {
            style = () => {
                return {
                    color: 'red'
                };
            };
        }
        if (zoomLevel > 14) {
            return (
                <GeoJSON
                    id={id}
                    data={geoJSON}
                    style={style}
                    onClick={() => {
                        this.props.selectPlot(id);
                    }}
                />
            );
        }

这篇关于React Leaflet:动态设置GeoJSON的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！