Плагин React Leaflet LayerGroup.Collision

это мой компонент

import React, { PropTypes } from 'react';
import { MapLayer } from 'react-leaflet';
import L from 'leaflet';
import './collision.js';

export default class LayerGroupCollision extends MapLayer {
  static childContextTypes = {
    layerContainer: PropTypes.shape({
      addLayer: PropTypes.func.isRequired,
      removeLayer: PropTypes.func.isRequired,
    })
  }

  getChildContext() {
    return {
      layerContainer: this.leafletElement,
    }
  }
  createLeafletElement() {
    var t = L.layerGroup.collision({ margin: 20 }, this.getOptions());
    this.layerContainer.addLayer(t);
    return t;
  }

  componentDidMount() {
    const {map} = this.context;
    map.on("zoomend", this._onZoomEnd);
  }

  componentWillUnmount() {
    const {map} = this.context;
    map.off("zoomend", this._onZoomEnd);
  }
}

Но это не работает, я просто получаю маркеры. И при увеличении я получаю ошибку

Uncaught TypeError: не удается прочитать «вызов» свойства неопределенного

at NewClass.fire (leaflet-src.js:587)
at NewClass._moveEnd (leaflet-src.js:3432)
at NewClass.<anonymous> (leaflet-src.js:3869)

Любое предложение?


leaflet react-leaflet
person Efthimis Pozov    schedule 14.03.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы не определили функцию _onZoomEnd в своем классе, и класс MapLayer, который вы расширяете, также не имеет ее. Но в map.on("zoomend", this._onZoomEnd) и map.off("zoomend", this._onZoomEnd) вы предоставляете его как обратный вызов для события zoomend. Затем не удается вызвать _onZoomEnd, потому что он не определен

person Alex Parij    schedule 15.03.2017
comment
Я понимаю, что с помощью this._onZoomEnd я пытаюсь использовать его при столкновении листовок-слоев-групп, при отладке, когда я масштабирую, этот метод запускается. Извините за неудобства, вот ссылка на github, если вы можете мне помочь, пожалуйста. github.com/Shadowman4205/react-leaflet-layergroup-collision - person Efthimis Pozov; 16.03.2017

arrow_upward
0
arrow_downward

Плагин сам позаботится об определении слушателей, поэтому вы можете опустить этот код. Приведенного ниже кода должно быть достаточно для включения плагина Leaflet.LayerGroup.Collision в компонент React. Комментарий Алекса верен по той причине, по которой вы получали сообщение об ошибке.

import React from 'react';
import { func, shape } from 'prop-types';
import { MapLayer } from 'react-leaflet';
import 'leaflet.layergroup.collision';
import L from 'leaflet';

export default class LayerGroupCollision extends MapLayer {
  static childContextTypes = {
    layerContainer: shape({
      addLayer: func.isRequired,
      removeLayer: func.isRequired,
    }),
  }

  getChildContext() {
    return {
      layerContainer: this.leafletElement,
    };
  }

  createLeafletElement() {
    const layerGroup = L.layerGroup.collision({ margin: 4 });
    this.layerContainer.addLayer(layerGroup);
    return layerGroup;
  }
}
person Kyle.Landell    schedule 20.10.2017