확대/축소시 리플릿 리프 레이어가 업데이트되지 않음

Question

react-leaflet-marker-layer은지도 확대/축소시 업데이트되지 않습니다.

지도 콘텐츠가 확대/축소 수준을 변경하는 동안 동일하게 유지됩니다.

이것은 마우스 스크롤과 +/- 버튼을 사용하여 확대/축소하는 동안 발생합니다.

참고 :지도와 관련된 렌더링이 매우 느리고 일부 타일은로드하는 데 시간이 오래 걸리는 것으로 나타났습니다. 확대/축소하면 즉시로드 할 수 있습니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Map, Marker, Popup, TileLayer } from 'react-leaflet'; 
import MarkerLayer from 'react-leaflet-marker-layer'; 

const position = { lng: -122.673447, lat: 45.522558 }; 
const markers = [ 
    { 
    position: { lng: -122.67344700000, lat: 45.522558100000 }, 
    text: 'Voodoo Doughnut', 
    }, 
    { 
    position: { lng: -122.67814460000, lat: 45.5225512000000 }, 
    text: 'Bailey\'s Taproom', 
    }, 
    { 
    position: { lng: -122.67535700000002, lat: 45.5192743000000 }, 
    text: 'Barista' 
    }, 
    { 
    position: { lng: -122.65596570000001, lat: 45.5199148000001 }, 
    text: 'Base Camp Brewing' 
    } 
]; 

class ExampleMarkerComponent extends React.Component { 

    render() { 
    const style = { 
     border: 'solid 1px lightblue', 
     backgroundColor: '#333333', 
     borderRadius: '50%', 
     marginTop: '-5px', 
     marginLeft: '-5px', 
     width: '10px', 
     height: '10px' 
    }; 

    return (
     <div style={Object.assign({}, this.props.style, style)}></div> 
    ); 
    } 

} 

class MapView extends React.Component { 
    render() { 
     return (
        <div 
        style={{ 
         height:"700px" 
        }}> 
        <Map center={position} zoom={13} 
         style={{ 
          height:"700px" 
         }}> 
         <TileLayer 
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' 
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
         /> 
         <MarkerLayer 
          markers={markers} 
          longitudeExtractor={m => m.position.lng} 
          latitudeExtractor={m => m.position.lat} 
          markerComponent={ExampleMarkerComponent} /> 
         </Map> 
        </div> 
     ); 
    } 
} 

module.exports = MapView; 

Answer 1

나는 또한이 문제가 발생했습니다. 개발자가 이러한 사건을 다루는 이벤트를 추가하지 않았던 것 같습니다. 이것이 의도 된 것인지 확실하지 않지만 버그와 비슷합니다. 현재이 모듈 버전은 0.0.3입니다. 따라서 많은 것을 기대하지는 않을 것입니다. 실제로 레이어의 이벤트 핸들러를 설정하는 메서드를 재정의 할 수 있습니다. 이제

class MarkerLayer extends MapLayer { 
    attachEvents() { 
     const map = this.props.map; 
     map.on('viewreset',() => this.updatePosition()); 
     map.on('zoom',() => this.updatePosition()); 
     map.on('zoomlevelschange',() => this.updatePosition()); 
    } 
} 

, 당신은 MarkerLayer 클래스를 사용하는 경우 그들은 또한