React-Leaflet-mapping将地块列表映射到标记

• Z时代
• 2024-01-10
• 分类：问答

我有一个React Leaflet地图，它呈现很好。React-Leaflet-mapping将地块列表映射到标记

我有状态的地块，这似乎很好（我可以看到他们，如果我看组件状态的列表。

每个情节都有一个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); 

回答：

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

以上是 React-Leaflet-mapping将地块列表映射到标记 的全部内容， 来源链接： utcz.com/qa/264157.html