Leaflet React传单LayerGroup.Collision插件
这是我的组件Leaflet React传单LayerGroup.Collision插件,leaflet,react-leaflet,Leaflet,React Leaflet,这是我的组件 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 = { layerContaine
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:无法读取未定义的属性“call”
at NewClass.fire (leaflet-src.js:587)
at NewClass._moveEnd (leaflet-src.js:3432)
at NewClass.<anonymous> (leaflet-src.js:3869)
有什么建议吗?您没有在类中定义“onZoomEnd”函数,而您从中扩展的MapLayer类也没有它。
但是在map.onzoomend中,this.\u-onzoomend和map.offzoomend中,this.\u-onzoomend可以将其作为zoomend事件的回调提供。
然后它无法调用_onZoomEnd,因为它未定义插件本身负责定义侦听器,因此您可以省略该代码。下面的代码应足以在React组件中包装传单.LayerGroup.Collision插件。Alex的评论是正确的,因为您收到了错误消息
at NewClass.fire (leaflet-src.js:587)
at NewClass._moveEnd (leaflet-src.js:3432)
at NewClass.<anonymous> (leaflet-src.js:3869)
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;
}
}
我确实理解,使用这个。当我缩放这个方法运行时,我试着在调试时从传单层组冲突中使用它。对不起,如果你能帮我的话,这里是github的链接。