Рефлекторный слой маркера не обновляется при масштабировании

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, маркеры будут šaty, где они принадлежат