如何解决如何在React-leaflet中将Leaflet的FeatureGroup与OverlappingMarkerSpiderfier结合使用?
我无法将OverlappingMarkerSpiderfier与React-Leaflet集成在一起,并且无法使用FeatureGroup在地图上进行平移。当您具有复杂的平移逻辑时,要素组实际上就是useful。
这里是plain JS demo。蜘蛛网标记和平移按钮都可以正常工作。
这里是react-leaflet demo。如果在用户界面中启用/选中了Spiderfy,则平移将失败,并显示以下错误。这是基于此SO post的。
layer.getLatLng is not a function
我认为问题在于,使用常规JS,我可以将标记数组强制添加到oms
和featureGroup
中,但是使用React-leaflet,我看不到如何实现结果相同。
是错误的原因是,即使我扩展了MapLayer,<Spiderfy>
层也由于某种原因没有getLatLng
函数。
我不确定需要修复什么,JS版本似乎可以正常工作,因此OverlappingMarkerSpiderfier库可能不需要更改。可能是特定于React-leaflet的问题/限制,可以通过自定义FeatureGroup / MapLayer来解决?
解决方法
出现错误
layer.getLatLng不是函数
发生是因为FeatureGroup.getBounds函数期望基础层实现getBounds
或getLatLng
方法,而自定义Spiderfy.js
component却不是容器(layerContainer
prop)的情况。类型为L.layerGroup
。
要考虑的一种选择是重构Spiderfy.js
组件:
- 放弃
L.layerGroup
作为图层容器 - 由于使用了最新的React版本(
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
函数应该返回预期的结果,与plain JS demo中提供的结果相同。
与Vadim correctly pointed out一样,L.layerGroup
没有实现getBounds
。
放弃layerGroup的主要缺点是,不是Spiderfy组件的子组件的组件也会被蜘蛛化,因为它使用layerContainer
- 请参阅此demo。如果您查看控制台日志,即使只有三个标记作为Spiderfy的子代,
markerCount
变量也会为4。
查看Leaflet的文档,我们可以使用L.featureGroup代替layerGroup,因为它只是layerGroup的扩展。
const el = L.featureGroup([],this.getOptions(props));
- Demo,您可以看到
markerCount
变量是3而不是4
根据您的用例,像这样的嵌套功能部件组不会有问题。您可以选择查看SubGroups
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。