0
Reafflet 맵이있어 렌더링이 잘됩니다.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));
마커 구성 요소 : 리플릿은 위도 길이 (Google지도에서 상속 사용하는 반면
이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);