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

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

问题： leaflet

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

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

未修改的样子👇🏼

未修改例图

修改完成👇🏼

修改完毕例图

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

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

寻梦少年`
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转 一个Leaflet插件，允许向地图图块添加旋转功能 有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作独立插件。 如果您想使用更稳定和可靠的解决方案，请查看fnicollet的分支。 与以下项目相比，已对该项目的最新更改进行了更新： : : （参考： ） 兼容： 贡献者： ， ， ，
leaflet 绘制区域支持旋转拖拽功能
最新发布
qq_42668492的博客
04-29 353
leaflet, 绘制区域，拖拽，旋转
leaflet关于旋转地图问题
黄-小智的博客
02-12 3095
leaflet关于旋转地图问题 openLayers支持地图旋转，但要满足其他的功能需求，其文档和使用方式都相对比较复杂 据官网leaflet是无法支持地图在web端旋转的，但是可以借助大佬的改造，添加了setBearing方法，可以完成 leaflet-rotate地址 第一步：引用leaflet和大佬的leaflet-rotate（上面链接获取） 第二步：调用setBearing方法或地图初始化是使用bearing 在源码中方法的位置（./dist/leaflet-rotate-src.js）：
Leaflet中使用Leaflet.Path.Transform插件实现旋转图形
BADAO_LIUMANG_QIZHI的博客
04-07 2066
场景 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..
vue + leaflet实现图标指定方向随机旋转
qq_40920553的博客
06-29 1416
vue + leaflet实现图标指定方向随机旋转
使用Leaflet.rotatedMaker进行航班飞行航向模拟的实践
夜郎King的博客
03-29 5001
本文以模拟实现上述场景为例，重点讲解在Leaflet当中，如何实现飞机的航线展示，同时在不同的时刻可以展示其飞行方向。
leaflet 添加矩形，可放大缩小，可移动，可旋转（transform）
小武的博客
06-29 2656
效果如下图所示： 代码如下图所示 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地图标记旋转角度、线条方向箭头示例
lihefei_coder的博客
11-03 2218
标记旋转角度 <!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" />
leaflet-vector-scalar-js:基于leaflet.js实现的矢量、标量数据可视化Demo
05-28
leaflet-vector-scalar-js 基于leaflet.js实现的矢量、标量数据可视化Demo。 包含风场、海浪、洋流、气压、温度等矢量或标量气象数据的可视化展示。 Demo 视频 依赖安装 npm install 本地开发调试 npm run serve ...
leaflet-d3:将 d3.js 与 Leaflet 一起使用的插件集合
07-24
@asymmetrik/leaflet-d3 单张D3提供的集合基于可视化插件。 现在支持 D3 v5目录安装通过 npm 安装包及其对等依赖项： npm install d3 d3-hexbin leaflet如果你想不使用... 现场演示： JSFiddle 要使用，只需声明一个 h
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
#传单轮换测试 此传单示例使用的是此分支的构建版本： : ##能力 旋转地图 （相反）旋转弹出窗口 （反向）旋转标记 旋转时补偿角落中的图形剪裁 ＃＃去做 控件需要旋转（平移和点击地图） 当地图旋转时，需要为“角落”加载瓷砖 ＃＃参考 这个例子开始于这个例子： :
react-leaflet-distortable-imageoverlay:缩放、倾斜、旋转和平移图像叠加
08-05
React传单失真图像覆盖 在React中缩放、倾斜、旋转和平移图像叠加 支持拉伸、倾斜、扭曲、旋转、平移和透明的 react-leaflet ImageOverlay。 它旨在允许在 react-leaflet 地图上定位和校正航空、无人机和 UAV 图像。 它是通过扩展和的功能为 安装 npm install --save react-leaflet-distortable-imageoverlay 用法 ReactLeafletImageOverlay组件获取ReactLeafletImageOverlay的角落，并使用onWellKnownTextUpdated和onCornersUpdated处理程序在更改时更新父onCornersUpdated 。 editMode可以是以下之一：“旋转”、“平移”、“扭曲”和“缩放”。 组件本身没有工具栏或在编辑模式之间切换的能力，因此您
leaflet-ant-path.js
05-26
leaflet中动态路线资源
leaflet-elevation:允许使用d3js添加高程剖面的传单插件
03-08
leaflet-elevation.js 一个Leaflet插件，允许使用d3js添加高程剖面 有关工作示例，请参见以下演示之一：最初基础上，费利克斯“MrMufflon”贝奇的如何使用包括CSS和JavaScript < head >...< style > ...
基于Leaflet实现图标旋转角度的效果(附源代码下载)
liu2004051957的博客
12-14 1964
本文将详细描述如何基于Leaflet开发库实现Marker图标旋转角度的应用效果
leaflet的一些常用用法及插件用法（持续更新）
weixin_42476786的博客
07-26 3307
首先创建地图 var map = L.map('map'.setView([35, 105], 5) 实现定位 map.setView([31.99, 120.26], 13) 定义地图事件 map.off('click');//取消点击事件 map.on('click', '方法名'); //点击地图 map.on('dblclick', '方法名'); //双击完成 ...
leaflet小用途 --旋转覆盖、蒙版、分屏叠加图层、裁剪
小武的博客
03-15 5080
1.  plugins  --Tile/image display2. 旋转覆盖是从后台请求图片数据覆盖到请求数据绘制不规则图形（只有三个点，如下5可以裁剪得出所有的）中：用的是        Leaflet.ImageOverlay.Rotate方法，详细做法请查看leaflet官网中3. 蒙版，是底图是一个图层，鼠标移上去又是一个图层：        Leaflet.TileLayer.Mas...
踩坑：leaflet 插件leaflet.rotateMarker.js 的rotationAngle 问题
q1025387665a的博客
07-11 654
前言：BUG出在插件里，本来我以为rotationAngle，旋转角度嘛，那应该是像下图这样。结果我死活得不到答案，于是采用笨方法，一个一个位置试。。如果你也受困于旋转角始终有偏差，请看下面。 省去多余的尝试，直接给出方法。值的范围在0 - 360，对setRotationAngle的值 除以2即可。...
leaflet-wmts.min.js下载
08-01
leaflet-wmts.min.js 是一个用于 Leaflet 地图库的 WMTS （ Web Map Tile Service ） 插件的 JavaScript 文件。 WMTS 是一种用于在 Web 上显示地图瓦片的服务规范。通过 WMTS 服务，可以将大量的地图数据切分成小块的瓦片，然后通过网络传输到客户端，最终在 Web 上以地图的形式展示。 leaflet-wmts.min.js 文件是用于支持 WMTS 服务的 JavaScript 插件。通过将该文件包含到 Leaflet 的项目中，就可以利用 Leaflet 库的功能来加载和显示 WMTS 服务提供的地图瓦片。 在使用 leaflet-wmts.min.js 之前，需要确保已经引入了 Leaflet 地图库的核心文件。接下来，可以通过在 HTML 文件中添加一个 script 标签来引入 leaflet-wmts.min.js 文件。例如： ```html <!DOCTYPE html> <html> <head> <!-- 引入 Leaflet 地图库核心文件 --> <link rel="stylesheet" href="https://unpkg.com/leaflet@^1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@^1.7.1/dist/leaflet.js"></script> <!-- 引入 leaflet-wmts.min.js 文件 --> <script src="path/to/leaflet-wmts.min.js"></script> <style> #map { height: 400px; } </style> </head> <body> <div id="map"></div> <script> // 创建 Leaflet 地图对象 var map = L.map('map').setView([51.505, -0.09], 13); // 创建 WMTS 图层对象 var wmtsLayer = L.tileLayer.wmts('http://example.com/wmts', { layer: 'layer_name', tilematrixSet: 'matrix_set', format: 'image/png', transparent: true, attribution: 'Map data © <a href="http://example.com">Example</a>' }).addTo(map); </script> </body> </html> ``` 通过以上代码，就可以在 Leaflet 地图上加载并显示 WMTS 服务提供的地图瓦片了。 总结起来，leaflet-wmts.min.js 是一个支持 WMTS 服务的插件，用于在 Leaflet 地图库上加载和显示 WMTS 服务提供的地图瓦片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值