React-Leaflet将绘图列表映射到标记

Posted 2021-04-13

我有一张React Leaflet地图，它很好。

我有一个状态列表，看起来很好（如果我查看组件状态，我可以看到它们。

每个图都有一个GeoJSON多边形属性。

我有一个自定义标记组件，它根据缩放呈现不同（GeoJSON多边形或绘图多边形中心的标记。）

我正在映射绘图列表并从每个实例中实例化自定义标记组件。但这并没有呈现任何情节。

我错过了什么？

地图组件：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Map, TileLayer, LayersControl, MapControl } from 'react-leaflet';
import { GoogleLayer } from './GoogleLayer';
import { geolocated } from 'react-geolocated';
import 'leaflet-geocoder-mapzen';
import SearchBox from './searchBox';
import Control from 'react-leaflet-control';
import PlotMarker from './plotMarker';
import { centroid } from '@turf/turf';

const { BaseLayer } = LayersControl;
const key = 'MYKEY';
const hybrid = 'HYBRID';
const terrain = 'TERRAIN';
const road = 'ROADMAP';
const satellite = 'SATELLITE';

const centerLat = props => {
    if (
        props.isGeolocationAvailable &&
        props.isGeolocationEnabled &&
        props.coords
    ) {
        return props.coords.latitude;
    }
    return 32.11;
};

const centerLong = props => {
    if (
        props.isGeolocationAvailable &&
        props.isGeolocationEnabled &&
        props.coords
    ) {
        return props.coords.longitude;
    }
    return 34.963;
};

const initialMapCenter = props => {
    return [centerLat(props), centerLong(props)];
};

const initialZoomLevel = 11;

const markers = props => {
    if (props.plots) {
        return (
            <div>
                {(props.filteredPlots || props.plots).map(
                    plot =>
                        plot.feature && (
                            <PlotMarker
                                key={plot._id}
                                geoJSON={plot.feature}
                                position={centroid(plot.feature).geometry.coordinates}
                            />
                        )
                )}
            </div>
        );
    }
};
export class PlotMap extends Component {
    render() {
        this.props.plots &&
            (this.props.filteredPlots || this.props.plots).forEach(plot => {
                plot.feature &&
                    console.log(centroid(plot.feature).geometry.coordinates);
            });
        return (
            <div
                className="col-sm-8 m-auto p-0 flex-column float-right"
                style={{ height: `85vh` }}>
                <Map
                    center={initialMapCenter(this.props)}
                    zoom={initialZoomLevel}
                    zoomControl={true}
                    onZoomend={e => {
                        this.props.setZoomLevel(e.target.getZoom());
                    }}
                    onMoveEnd={e => {
                        this.props.setMapCenter(e.target.getCenter());
                    }}>
                    <LayersControl position="topright">
                        <BaseLayer name="Google Maps Roads">
                            <GoogleLayer googlekey={key} maptype={road} />
                        </BaseLayer>
                        <BaseLayer name="Google Maps Terrain">
                            <GoogleLayer googlekey={key} maptype={terrain} />
                        </BaseLayer>
                        <BaseLayer name="Google Maps Satellite">
                            <GoogleLayer googlekey={key} maptype={satellite} />
                        </BaseLayer>
                        <BaseLayer checked name="Google Maps Hybrid">
                            <GoogleLayer
                                googlekey={key}
                                maptype={hybrid}
                                libraries={['geometry', 'places']}
                            />
                        </BaseLayer>
                    </LayersControl>
                    <SearchBox postion="bottomright" />
                    {markers(this.props)}
                </Map>
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        filteredPlots: state.plots.filteredPlots,
        plots: state.plots.plots,
        mapCenter: state.plots.mapCenter
    };
}

export default geolocated({
    positionOptions: {
        enableHighAccuracy: false
    },
    userDecisionTimeout: 5000,
    suppressLocationOnMount: false
})(connect(mapStateToProps, actions)(PlotMap));

标记组件：

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

export class PlotMarker extends Component {
    render() {
        const { key, position, geoJSON, zoomLevel } = this.props;
        if (zoomLevel > 14) {
            return <GeoJSON key={key} data={geoJSON} />;
        }
        return <Marker key={key} position={position} />;
    }
}

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

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

答案

问题是GeoJSON使用long-lat，而Leaflet使用lat-long（继承自谷歌地图）。所以我的标记出现在世界的另一个地方。解决这个问题非常简单 - 只需在你传入Marker组件的坐标数组上调用.reverse（）作为位置，如下所示：

<PlotMarker
      key={plot._id}
      geoJSON={plot.feature}
      position={centroid(plot.feature).geometry.coordinates}
/>