反应传单LayerGroup.Collision插件

Question

这是我的组件

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);
  }
}

但这不管用，我只是拿到了标记。在变焦时我会出错

未定义TypeError:无法读取未定义属性的“调用” 在NewClass.fire (传单-src.js:587)在NewClass._moveEnd (传单-src.js:3432)在NewClass。(单张-src.js:3869)

有什么建议吗？

Answer 1

您没有在类中定义_onZoomEnd函数，扩展的MapLayer类也没有它。但是在map.on("zoomend", this._onZoomEnd)和map.off("zoomend", this._onZoomEnd)中，您提供它作为缩放事件的回调。然后它无法调用_onZoomEnd，因为它是未定义的。

Answer 2

插件本身负责定义侦听器，因此可以省略该代码。下面的代码应该足以将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;
  }
}