React-Leaflet-mapping將地塊列表映射到標記

Question

我有一個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); 

Answer 1

問題原來是那個以GeoJSON使用長緯度，而單張使用LAT-長（從谷歌地圖繼承）所以我的標記出現在世界的另一個地方。解決這個問題非常簡單 - 只需在座標陣列上調用.reverse（）作爲位置傳遞到Marker組件中，如下所示：

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