reactjs - 反应传单标记层未在缩放时更新

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 类，标记会满足它们所属的位置