记录在使用leaflet-rotate-src.js时遇到的旋转拖动问题

最新推荐文章于 2024-09-12 07:59:47 发布
最新推荐文章于 2024-09-12 07:59:47 发布
阅读量587 收藏 1
点赞数 3
分类专栏： Android 文章标签： javascript android 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/n2726213998_zxc/article/details/136940698
版权
文章讲述了在使用Leaflet库时遇到的问题，即在开启旋转功能后，双指缩放会导致自定义的geoGSON图层无法随地图移动和缩放。作者提供了通过注释setBearing方法中的rotate事件来解决此问题的方法，并展示了修改前后效果对比。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题： leaflet

设置开启旋转时双指缩放旋转后添加的图层无法跟着缩放和移动，比如geoGSON数据层
只有底图瓦片可以移动和缩放了，除非手指离开屏幕

先公布我的修复方案
找到leaflet-rotate-src.js文件中的setBearing方法把*this.fire(‘rotate’);*方法注释掉问题解决

未修改的样子👇🏼

未修改例图

修改完成👇🏼

修改完毕例图

这是改完后的样几👇🏼
第一张，无问题的图

问题明显👇🏼
问题图片例图
蓝色的是添加的geoJSON数据，双指移动中并没有跟着移动、缩放。

Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
BADAO_LIUMANG_QIZHI的博客
04-07 2326
场景 Leaflet快速入门与加载OSM显示地图： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 在上面的基础上，实现对图形进行旋转。 Leaflet的L.Path.Transform插件实现了图形了旋转、拖拽、比例缩放等功能。 插件地址： https://github.com/w8r/Leaflet.Path.Transform 注： 博客：https://blog.csdn.net/bada..
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转 一个Leaflet插件，允许向地图图块添加旋转功能 有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作独立插件。 如果您想使用更稳定和可靠的解决方案，请查看fnicollet的分支。 与以下项目相比，已对该项目的最新更改进行了更新： : : （参考： ） 兼容： 贡献者： ， ， ，
leaflet关于旋转地图问题
黄-小智的博客
02-12 3675
leaflet关于旋转地图问题 openLayers支持地图旋转，但要满足其他的功能需求，其文档和使用方式都相对比较复杂 据官网leaflet是无法支持地图在web端旋转的，但是可以借助大佬的改造，添加了setBearing方法，可以完成 leaflet-rotate地址 第一步：引用leaflet和大佬的leaflet-rotate（上面链接获取） 第二步：调用setBearing方法或地图初始化是使用bearing 在源码中方法的位置（./dist/leaflet-rotate-src.js）：
使用Leaflet.rotatedMaker进行航班飞行航向模拟的实践
夜郎King的博客
03-29 8837
本文以模拟实现上述场景为例，重点讲解在Leaflet当中，如何实现飞机的航线展示，同时在不同的时刻可以展示其飞行方向。
leaflet 绘制区域支持旋转拖拽功能
qq_42668492的博客
04-29 814
leaflet, 绘制区域，拖拽，旋转
leaflet-vector-scalar-js:基于leaflet.js实现的矢量、标量数据可视化Demo
05-28
leaflet-vector-scalar-js 基于leaflet.js实现的矢量、标量数据可视化Demo。 包含风场、海浪、洋流、气压、温度等矢量或标量气象数据的可视化展示。 Demo 视频 依赖安装 npm install 本地开发调试 npm run serve ...
leaflet-side-by-side.js
02-11
leaflet 多个影像卷帘
leaflet-ant-path.js
05-26
leaflet中动态路线资源
结合leaflet粒子效果wind-js-leaflet-master.zip
08-04
在IT行业中，Leaflet是一个广泛使用的轻量级JavaScript库，专为创建交互式的地图应用而设计。本项目“wind-js-leaflet-master”是将Leaflet与粒子效果相结合，以实现风场图的动态模拟，这对于气象学、环境科学或者...
leaflet-tilelayer-simplepicture:Leaflet.js的TileLayer插件，在图块层上显示图片文件
05-29
Leaflet.js的TileLayer插件，在图块层上显示图片文件。 要求 传单版本：经过0.7.3（稳定）测试 帆布 用法 在HTML中； [removed][removed] 在JS中； [removed] = function() { var map = L.map('lmap'); map....
ember-leaflet-rotated-marker:扩展标记层以支持旋转
05-26
余烬小叶旋转标记 该插件扩展了的<layers>组件以支持旋转。 这使用来完成。 不适用于IE <9 xss=removed xss=removed xss=removed> < layers xss=removed xss=removed xss=removed xss=removed> </ LeafletMap> 争论 类型 默认 描述 @rotationAngle Number 0 顺时针旋转角度（以度为单位）。 @rotationOrigin String 'bottom center' 旋转
Leaflet-Rotate-Example:传单轮换功能的示例
06-08
#传单轮换测试 此传单示例使用的是此分支的构建版本： : ##能力 旋转地图 （相反）旋转弹出窗口 （反向）旋转标记 旋转时补偿角落中的图形剪裁 ＃＃去做 控件需要旋转（平移和点击地图） 当地图旋转时，需要为“角落”加载瓷砖 ＃＃参考 这个例子开始于这个例子： :
vue + leaflet实现图标指定方向随机旋转
qq_40920553的博客
06-29 1708
vue + leaflet实现图标指定方向随机旋转
Leaflet-Rotate 插件安装与使用指南
最新发布
gitblog_01184的博客
09-12 649
Leaflet-Rotate 插件安装与使用指南 项目地址:https://gitcode.com/gh_mirrors/le/leaflet-rotate 项目概述 Leaflet-Rotate 是一个为 Leaflet 地图库添加旋转功能的插件。通过这个插件，开发者可以实现地图视图的旋转，尽管这会导致地图标签不随旋转更新的限制。本指南将引导您如何设置并开始使用这个插件。 1. 目录结构及介绍 ...
叶let旋转插件 - 为地图添加旋转功能的解决方案
gitblog_00515的博客
09-12 534
叶let旋转插件 - 为地图添加旋转功能的解决方案 leaflet-rotate Leaflet plugin that allows to add rotation functionality to map tiles 项目地址...
探索新视角：旋转视界下的地图应用 - Leaflet-Rotate深度解析
gitblog_00603的博客
09-12 531
探索新视角：旋转视界下的地图应用 - Leaflet-Rotate深度解析 leaflet-rotate Leaflet plugin that allows to add rotation functionality to map tiles ...
leaflet 添加矩形，可放大缩小，可移动，可旋转（transform）
小武的博客
06-29 2838
效果如下图所示： 代码如下图所示 var rectangle = new L.Rectangle(L.latLngBounds(this.polygonPosition), { weight: 2, draggable: true, transform: true, fillColor: "transport", fillOpacity: 0 }).addTo(this.leafletService.map); th..
基于Leaflet实现图标旋转角度的效果(附源代码下载)
liu2004051957的博客
12-14 2795
本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果
Leaflet地图标记旋转角度、线条方向箭头示例
lihefei_coder的博客
11-03 2561
标记旋转角度 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值