我很难将OverlappingMarkerSpiderfier与反应-传单集成在一起,也很难在地图上使用FeatureGroup进行平移。当您有复杂的摇摄逻辑时,FeatureGroups实际上是有用。
这是一个普通JS演示。标记蜘蛛和潘按钮工作,没有任何问题。
这是反应-传单演示。如果在UI中启用/签入spiderfy,则平移操作将失败,并出现以下错误。这是基于这个所以贴。
layer.getLatLng is not a function
我认为问题在于,对于常规的JS,我可以将标记数组添加到oms
和featureGroup
中,但使用反作用传单,我看不出如何实现相同的结果。
是错误,因为<Spiderfy>
层由于某种原因没有getLatLng
函数,即使我正在扩展MapLayer。
我不知道需要修复什么,JS版本似乎可以工作,所以OverlappingMarkerSpiderfier库可能不需要修改。它可能是一个反应传单特定的问题/限制,可以通过自定义FeatureGroup/MapLayer来解决?
发布于 2020-10-24 09:51:11
它出现了错误
layer.getLatLng不是一个函数
由于FeatureGroup.getBounds函数期望底层实现getBounds
或getLatLng
方法,所以会发生这种情况,而在自定义组件中,容器(layerContainer
支柱)是L.layerGroup
类型的。
需要考虑的一种选择是重构Spiderfy.js
组件:
L.layerGroup
作为层容器16.8
或更高版本),所以用函数替换ES6 class
组件来实现Spiderfy
组件Spiderfy.js
组件
import React, { useEffect } from "react";
import { withLeaflet, MapLayer, useLeaflet } from "react-leaflet";
import L from "leaflet";
import "overlapping-marker-spiderfier-leaflet/dist/oms";
function Spiderfy(props) {
const { map, layerContainer } = useLeaflet();
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener("spiderfy", (markers) => {
markers.forEach((m) => m.closePopup()); //force to close popup
if (props.onSpiderfy) props.onSpiderfy(markers);
});
oms.addListener("unspiderfy", (markers) => {
if (props.onUnspiderfy) props.onUnspiderfy(markers);
});
oms.addListener("click", (marker) => {
if (props.onClick) props.onClick(marker);
});
useEffect(() => {
layerContainer.eachLayer((layer) => {
if (layer instanceof L.Marker) {
oms.addMarker(layer);
}
});
}, [oms,layerContainer]);
return <div>{props.children}</div>;
}
export default withLeaflet(Spiderfy);
这样,FeatureGroup.getBounds
函数应该返回与普通JS演示中提供的结果相同的预期结果。
发布于 2020-10-25 22:36:02
作为瓦迪姆正确指出,L.layerGroup
不实现getBounds
。
放弃layerGroup的主要缺点是,不属于Spiderfy组件的组件在使用layerContainer
时也会被蜘蛛化。
markerCount
变量为4,尽管只有三个标记作为Spiderfy的子标记。查看传单的文档,我们可以使用L.featureGroup而不是layerGroup,因为它只是layerGroup的扩展。
const el = L.featureGroup([], this.getOptions(props));
markerCount
变量是3而不是4。根据您的用例,嵌套这样的功能组不会有问题。您也可以选择查看SubGroups
https://stackoverflow.com/questions/64507047
复制相似问题