如何在React-leaflet中将Leaflet的FeatureGroup与OverlappingMarkerSpiderfier结合使用? [英] How to use Leaflet's FeatureGroup with OverlappingMarkerSpiderfier in react-leaflet?

问题描述

我无法将 OverlappingMarkerSpiderfier 与 FeatureGroup 用于在地图上平移.当您具有复杂的平移逻辑时，功能组确实有用.

>

这是一个纯JS演示.蜘蛛网标记和平移按钮都可以正常工作.

这是反应传单演示.如果在用户界面中启用/选中了Spiderfy，则平移将失败，并显示以下错误.这是基于 SO帖子的..>

layer.getLatLng不是函数

我认为问题在于，使用常规JS，我可以将标记数组强制添加到 oms 和 featureGroup 中，但是对于React-leaflet，我却没有看看我如何能达到相同的结果.

错误是因为 层由于某种原因没有 getLatLng 函数，即使我正在扩展 解决方案

出现错误

layer.getLatLng不是函数

发生，因为 FeatureGroup.getBounds 函数期望底层实现 getBounds 或 getLatLng 方法，而自定义 Spiderfy.js 组件 where container (layerContainer prop)是 L.layerGroup 类型.

要考虑的一种选择是重构 Spiderfy.js 组件:

• 放弃L.layerGroup作为图层容器
• 因为使用了最新的React版本( 16.8 或更高版本)，所以将 ES6 class 组件替换为实现 Spiderfy 组件的函数

Spiderfy.js 组件

  import React，{useEffect}从"react"开始；从"react-leaflet"中导入{withLeaflet，MapLayer，useLeaflet}；从小叶"进口L；导入重叠标记-蜘蛛/传单/dist/oms"；功能Spiderfy(道具){const {map，layerContainer} = useLeaflet();const oms = new window.OverlappingMarkerSpiderfier(map);oms.addListener("spiderfy"，(标记)=> {markers.forEach((m)=> m.closePopup());//强制关闭弹出窗口如果(props.onSpiderfy)props.onSpiderfy(markers);});oms.addListener("unspiderfy"，(markers)=> {如果(props.onUnspiderfy)props.onUnspiderfy(标记);});oms.addListener("click"，(marker)=> {if(props.onClick)props.onClick(marker);});useEffect(()=> {layerContainer.eachLayer((layer)=> {if(L.Marker的层instance){oms.addMarker(layer);}});}，[oms，layerContainer])；返回< div> {props.children}</div> ;;}用Leaflet导出默认值(Spiderfy); 

这样， FeatureGroup.getBounds 函数应返回预期结果，该结果与 分叉示例

I'm having trouble integrating OverlappingMarkerSpiderfier with React-Leaflet and using FeatureGroup for panning on the map. FeatureGroups are really useful when you have complicated panning logic.

Here is a plain JS demo. The markers spiderfy and the pan button works with no issues.

Here is the react-leaflet demo. The panning will fail with the following error if spiderfy is enabled/checked in the UI. This is based on this SO post.

layer.getLatLng is not a function

I think the problem is that with regular JS, I can add the markers array to both oms and the featureGroup imperatively but with React-leaflet, I don't see how I can achieve the same result.

Is the error because <Spiderfy> layer does not have a getLatLng function for some reason even though I am extending the MapLayer.

I'm unsure of what needs fixing, the JS version seems to work so the OverlappingMarkerSpiderfier library likely doesn't need changes. It could be a React-leaflet specific problem/limitation that can possibly be fixed with a custom FeatureGroup/MapLayer?

解决方案

It appears the error

layer.getLatLng is not a function

occurs since FeatureGroup.getBounds function expects underlying layers to implement either getBounds or getLatLng methods which is not the case with custom Spiderfy.js component where container (layerContainer prop) is of L.layerGroup type.

One option to consider would be to refactor Spiderfy.js component:

• abandon L.layerGroup as a layer container
• since a recent React version is utilized (16.8 or above) replace ES6 class component with function to implement Spiderfy component

Spiderfy.js component

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

This way FeatureGroup.getBounds function should return the expected result, identical to provided in plain JS demo.

Forked example

这篇关于如何在React-leaflet中将Leaflet的FeatureGroup与OverlappingMarkerSpiderfier结合使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！