首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使用传单的FeatureGroup与OverlappingMarkerSpiderfier的反应-传单?

如何使用传单的FeatureGroup与OverlappingMarkerSpiderfier的反应-传单?
EN

Stack Overflow用户
提问于 2020-10-23 12:42:47
回答 2查看 1.4K关注 0票数 1

我很难将OverlappingMarkerSpiderfier反应-传单集成在一起,也很难在地图上使用FeatureGroup进行平移。当您有复杂的摇摄逻辑时,FeatureGroups实际上是有用

这是一个普通JS演示。标记蜘蛛和潘按钮工作,没有任何问题。

这是反应-传单演示。如果在UI中启用/签入spiderfy,则平移操作将失败,并出现以下错误。这是基于这个所以贴

layer.getLatLng is not a function

我认为问题在于,对于常规的JS,我可以将标记数组添加到omsfeatureGroup中,但使用反作用传单,我看不出如何实现相同的结果。

是错误,因为<Spiderfy>层由于某种原因没有getLatLng函数,即使我正在扩展MapLayer

我不知道需要修复什么,JS版本似乎可以工作,所以OverlappingMarkerSpiderfier库可能不需要修改。它可能是一个反应传单特定的问题/限制,可以通过自定义FeatureGroup/MapLayer来解决?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-10-24 09:51:11

它出现了错误

layer.getLatLng不是一个函数

由于FeatureGroup.getBounds函数期望底层实现getBoundsgetLatLng方法,所以会发生这种情况,而在自定义组件中,容器(layerContainer支柱)是L.layerGroup类型的。

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

  • 放弃L.layerGroup作为层容器
  • 由于使用了最近的React版本(16.8或更高版本),所以用函数替换ES6 class组件来实现Spiderfy组件

Spiderfy.js组件

代码语言:javascript
运行
AI代码解释
复制
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演示中提供的结果相同的预期结果。

示例

票数 1
EN

Stack Overflow用户

发布于 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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64507047

复制
相关文章
Egg中上传单文件与多文件
1. 单文件上传 1. 模板文件 <!-- csrf为egg所提供的安全机制,需要在模板文件上绑定--> <form action="/admin/upload/singleUpload?_csrf=
越陌度阡
2020/11/26
1.7K0
as3与php 上传单个图片demo
1、单个上传使用FileReference,一次可选择多张图片可使用FileReferenceList,在flash player 10+可使用load方法可实现预览图片
meteoric
2018/11/15
1.5K0
上传单个文件到多台机器工具
使用示例: ./mooon_upload -h=192.168.10.11,192.168.10.12 -p=6000 -u=root -P='root123' -s=./abc -d=/tmp/ 表示将本地的文件./abc上传到两台机器192.168.10.11和192.168.10.12的/tmp/目录 #include "mooon/net/libssh2.h" #include "mooon/sys/stop_watch.h" #include "mooon/utils/args_parser.h
一见
2018/08/02
3670
Node.js上传单文件和多文件的一些示例博客和源代码
在https://bezkoder.com/和https://attacomsian.com/这两个网站上找到一些关于Node.js下上传单个文件和多个文件的一些示例博客以及对应的源代码,在Node.js中有Multer和express-fileupload这两个文件上传中间件,总结如下:
ccf19881030
2020/10/26
1.1K0
Node.js上传单文件和多文件的一些示例博客和源代码
hpfeeds介绍(1)
hpfeeds是一个轻量级的验证发布-订阅协议(authenticated publish-subscribe protocol)。
随心助手
2020/07/03
5980
ObjectARX中反应器的使用
ObjectARX中反应器的使用 反应器机制是观察者模式(设计模式)的一种实现,在该机制下,有事件通知者和事件接收者,负责接收事件的称为反应器 反应器列表:在反应器可以从通知者处接收消息之前,必须显式地将反应器添加到通知者的反应器列表中。 反应器部分类继承关系 种类:
用户3519280
2023/07/24
4350
hdoj 4768 Flyer
题目意思很容易理解,学校有n个社团,每个社团只给编号从a到b 的发传单,而且只给隔了c的人发,问最后谁收到的传单是单数,输出他的编号和收到的传单数量。
xindoo
2021/01/22
3070
不要cheat
确实是有点严格啊。不过话又说回来,如果是学生时代的考试,这又算什么呢?我们甚至没有办法去与他人交流,更不要说从他人那里汲取灵感,或者是学习生产力工具、开发环境的使用了。
北野茶缸子
2022/05/19
2040
不要cheat
“粽”情过端午—端午节暖情营销方案
商家想在众多的竞争者中吸引消费者的目光,就要有好的活动方案。线上线下结合效果最佳,线下气氛渲染,线上裂变传播。下面集锦了端午节活动方案,相信能带给大家启发。
用户1745481
2018/07/26
1.3K0
“粽”情过端午—端午节暖情营销方案
继微软机器人 Tay 之后,物联网也被玩坏了
上周四,被称为“Weev”的声名远播的黑客 Andrew Auernheimer 用两行代码扫描出互联网上未经保护的打印机,使其自动打印出种族主义传单,用实际行动证明了物联网将被玩坏。 美国各大学发现
镁客网
2018/05/28
3350
做本让客户念念不忘的产品手册
现如今企业竞争日益激烈,顾客对品牌的注重度也是呈现上升的趋势,企业必须提高自身市场的竞争力,因此企业需要提高公司对外的产品宣传力度。制作产品宣传册,让客户更容易了解产品信息,加深品牌印象。
小炮
2022/05/09
7400
链家笔试+2面技术面+HR面+SP面
现场一面: 上来我介绍了项目,面试官对我的项目挺感兴趣,一直围绕项目来讨论,给我提出了很多我项目里没考虑到的问题,如实现依赖注入的时候如果存在循环依赖怎么处理(没法处理,设计的锅);如反射是否会破坏封装性(是的,这就是框架的缺点);还有一些设计数据库连接池没考虑到的问题(其实按线程池的想法来就行) 面试官人很好,很绅士,谈吐很有气质。他比较满意我学习知识的方式和对技术的热情,基本没问其他问题,就聊项目,所以参考性不大。 二面: 二面面试官问的问题很笼统,很抽象,需要自己get他的点。 你项目里最大的困难,怎
牛客网
2018/04/28
1.2K0
13种降低包装成本的简单方法
任何负责营业额的电商运营都希望能够将包装成本降到最低,从而提高单品利润。但是,无论采用何种降低包装成本的方法,我们电商运营对包装材料的需求是一直都存在,这意味着当我们需要除了降低包装材料的采购成本,还要提高包装材料的使用效率。
快递100API
2021/08/04
3.1K0
13种降低包装成本的简单方法
命令行上传文件并分享服务合集
在 Windows 和 macOS 系统下想要上传文件并分享是一件再容易不过的事情了,你既可以选择打开各种网盘网站,也可以使用五花八门的网盘客户端上传文件,随后获得一个分享链接。然而作为服务器系统使用时,Linux 一般是不会安装图形界面的,常见的网盘也极少有提供官方的命令行客户端。
reizhi
2022/09/26
7030
详解零知识证明的四大基础技术,如何与以太坊发生反应
雷锋网按:原文标题为《zkSNARKs in a nutshell》,作者是以太坊智能合约语言Solidity的发明人Christian Reitwiessner。译者杨文涛,授权转载自作者知乎专栏。 摘要: zkSNARKs(zero-knowledge succint non-interactive arguments of knowledge)的成功实现让我们印象深刻,因为你可以在不执行,甚至在不知道执行具体内容的情况下确定某个计算的结果是否正确——而你唯一知道的信息就是它正确地完成了。但是不幸的是,
企鹅号小编
2018/01/22
1.6K0
详解零知识证明的四大基础技术,如何与以太坊发生反应
Linux下使用Shell脚本实现FTP自动上传和下载文件
FTP服务器:192.168.0.199 FTP路径:/ftphome/data 本地路径:/local/data 将文件从FTP下载到本地的脚本如下:
用户1685462
2021/09/04
10.6K1
BIO与反应器模式
  我们熟知的Socket编程就是一种BIO,一个socket连接一个处理线程(这个线程负责这个Socket连接的一系列数据传输操作)。阻塞的原因在于:操作系统允许的线程数量是有限的,多个socket申请与服务端建立连接时,服务端不能提供相应数量的处理线程,没有分配到处理线程的连接就会阻塞等待或被拒绝。   比如说,当我们最开始使用Java编写网络请求,都是建立一个ServerSocket,它负责绑定IP地址,启动监听端口;然后,Socket负责发起连接操作,连接成功建立后,双方通过输入输出流进行同步阻塞式通信;如果没有成功建立,要么等待,要么被拒绝。即:一个连接,要求Server对应一个处理线程。   简单描述一下BIO的服务端通信模型:采用BIO通信模型的服务端,通常由一个独立的Acceptor线程负责监听客户端的连接,它接收到客户端连接请求之后为每个客户端创建一个新的线程进行链路处理每次处理完成后,通过输出流返回应答给客户端,线程销毁。即典型的一请求一应答通信模型。
Java阿呆
2020/11/04
6500
BIO与反应器模式
点击加载更多

相似问题

我应该如何使用OverlappingMarkerSpiderfier与反应传单?

11

如何使用反应-传单-平版与反应-传单3

11

将地图的边界与反应传单中的FeatureGroup内容相匹配

10

反应-传单与原始传单插件

12

如何使用反应useContext与传单路由机和反应传单?

116
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档