新版leaflet(1.9.4) 卷帘图层不能拖动（leaflet-side-by-side）解决

已于 2023-08-16 11:41:53 修改
阅读量245 收藏 2
点赞数 1
分类专栏： leaflet 文章标签： javascript
于 2023-08-16 11:39:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012840994/article/details/132316184
版权

问题复现
Chrome:
在这里插入图片描述

leaflet：1.9.4
leaflet-side-by-side：
在这里插入图片描述

修改leaflet-side-by-side 源码 这里之前用的是：L.Browser.touch chrome中PC端L.Browser.touch 会返回true 这样后面监听的都是移动端的touch** 这样导致PC端的 mouse** 都没监听到 后面的拖动不管用了。需要把L.Browser.touch 改成 L.Browser.mobile

在这里插入图片描述

麦-兜兜
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
076：vue+leaflet 禁止拖拽、禁止zoom（双击、滚轮、键盘）、禁止tap
大剑师兰特的GIS世界
02-16 768
第076个本示例的目的是介绍演示如何在vue+leaflet中设定各种禁止状态，这里设置了禁止拖拽、禁止zoom（双击、滚轮、键盘）、禁止tap。
leaflet-side-by-side:用于添加拆分屏幕以比较两个地图叠加层的Leaflet控件
05-26
并排传单 用于添加拆分屏幕以比较两个地图叠加层的Leaflet控件。 L.control.sideBySide（ leftLayer [s] ， rightLayer [s] ） 创建一个新的Leaflet控件，用于比较两个图层或图层集合。 它不会将图层添加到地图-您需要手动进行操作。 扩展L.Control但setPosition()和getPosition是noop因为该位置始终是相同的-它没有意义这个控制是在像其他单张控制的角落。 参数 范围 类型 描述 leftLayers L.Layer |阵列 在地图左侧显示的小叶图层或图层阵列。 数组中添加到地图的任何图层都将显示在左侧 rightLayers L.Layer |阵列 在地图右侧显示的小叶图层或图层阵列。 数组中添加到地图的任何图层都将显示在右侧。 这些不应与leftLayers任何层相同 options 目的 选项
vue+leaflet卷帘（side-by-side）：实现单侧地图切换效果
我曾崩溃、怯懦、自我怀疑，内心有什么东西腐烂了，恶臭熏天
03-08 1008
vue+leaflet卷帘（side-by-side）：实现单侧地图切换效果
Leaflet中如何限制地图的拖动范围_leaflet maxbounds，最新大厂大数据开发校招面试经验汇总
最新发布
2401_84166878的博客
04-17 945
);// 第一种设置方式，可行//限制地图的拖动范围是正负90到正负180，这样才合理。//设置左上角经纬度//设置右下点经纬度//构建视图限制范这里的关键代码就是如下代码，通过这两个位置来限制拖动情况。地图的定义在crs这里，我使用了一个自己的转换规则，这取决你的瓦片读取方式。如果标准的WGS84投影，可以不需要这么定义，直接使用默认的方式加载即可。//设置左上角经纬度//设置右下点经纬度//构建视图限制范围。
leaflet-side-by-side.js
02-11
leaflet 多个影像卷帘
Vue+Leaflet-side-by-side插件实现拉帘对比效果
BADAO_LIUMANG_QIZHI的博客
01-05 1517
场景 Vue+Leaflet实现加载OSM显示地图： Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 Vue+Leaflet实现加载Stamen显示地图： Vue+Leaflet实现加载Stamen显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面加载显示两种地图显示的基础上，怎样实现两边对着查看，实现卷帘效果 。 官网插件说明： Plugins - Leaflet - a JavaScript lib
leaflet-rotate：Leaflet插件，允许添加旋转功能以映射图块
02-13
单张旋转一个Leaflet插件，允许向地图图块添加旋转功能有关工作示例，请参见以下 最初基于IvánSánchezOrtega的（请参阅： ） 旁注： 请注意，这是一个概念证明，显示了如何更改核心传单库以及如何将旋转功能用作...
leaflet-search:在传单地图中搜索内容
04-14
一个Leaflet控件，用于通过自定义属性搜索标记/功能的位置。 支持ajax / jsonp自动补全和JSON数据过滤/重新映射。 根据MIT许可获得许可。 版权所有 在Leaflet 0.7.x和1.3.x中进行了测试 在哪里 演示： 源代码：...
leaflet-geojson-selector:将 GeoJSON 图层显示为交互式菜单列表
07-23
图层悬停时列表项的突出显示 缩放到图层 错误的 listOnlyVisibleLayers 错误的 仅显示地图画布中可见的项目 多 错误的 主动多选 风格 {} GeoJSON 功能的样式 活动类 '积极的' 活动列表项的 css 类名 活动风格 ...
leaflet上下卷帘
weixin_42066016的博客
12-27 519
使用leaflet插件实现上下卷帘效果
045：vue+leaflet 实现左卷帘效果
大剑师兰特的GIS世界
02-04 1496
第045个本示例的目的是介绍演示如何在vue+leaflet中实现左卷帘效果，这里主要引用了leaflet-side-by-side这个插件，直接调用的话，CSS方面有些问题，需要自行调整一下。
leaflet卷帘功能实现代码.rar
11-08
iClient for Leaflet卷帘功能实现代码包含上下卷帘和左右卷帘的实现，还支持添加不同类型的图层
Leaflet地图卷帘对比
11-18
Leaflet地图卷帘对比，拖动滑块，切换显示矢量和影像地图。
Leaflet双屏对比
06-01
该示例实现了基于leaflet的地图双屏对比，其中利用了leaflet接口加载arcgis的切片服务
SuperMap iClient for Leaflet实现达到最大边界范围后禁止拖动
SuperMap技术控
10-28 948
最近很多小伙伴在项目中希望能设置地图拖动的最大边界范围，并且只允许在范围内进行拖动地图的操作，超出范围就无法进行拖动的操作；或者在拖动超过最大边界范围时，自动跳转返回。
给leaflet地图局部做拖拽限制
rock_23的博客
07-06 1176
给leaflet地图局部做拖拽限制
leaflet 卷帘，比较两个地图的叠加sideBySide
小武的博客
04-15 3696
1. 效果如图所示：（分屏效果，可左右滑动，查看叠加效果） 2. 首先需要下载leaflet-side-by-side.js， 可到官网代码中下载：https://github.com/digidem/leaflet-side-by-side 3. 下载的js文件可放到assets中 然后引入到项目中，本文引用到angular.json中 4. 官网调用方法如...
开源地图组件leafletwx功能更新：支持POI点聚合；减少canvas渲染次数，提升性能
whbke的博客
09-04 420
开源地图组件leafletwx功能更新：支持POI点聚合；减少canvas渲染次数，提升性能
Leaflet中如何限制地图的拖动范围
热门推荐
夜郎King的博客
09-17 1万+
本文讲解了在Leaflet中如何进行地图范围的控制，并通过代码的方式进行示例，并展示了最终效果。
如何解决leaflet在popup中使用el-date-picker不生效
06-09
在使用leaflet中的popup中嵌入el-date-picker时，由于popup是在地图容器之外渲染的，需要对el-date-picker进行一些特殊的处理才能使其正常工作。 一种解决方法是，在popup中使用Vue的mounted生命周期钩子手动初始化el-date-picker。具体步骤如下： 1. 在popup的内容中添加一个id，用于在mounted钩子中获取el-date-picker实例。 ```javascript L.marker([51.5, -0.09]) .bindPopup('<div id="datepicker-popup"><el-date-picker v-model="date"></el-date-picker></div>') .addTo(map); ``` 2. 在Vue的mounted钩子中手动初始化el-date-picker，并将其挂载到popup的id上。 ```javascript new Vue({ el: '#datepicker-popup', data: { date: '' }, mounted() { const el = this.$el.querySelector('.el-date-picker'); const datePicker = new window.Vue({ el, data: { value: null }, components: { 'el-date-picker': window.ElementUI.DatePicker }, mounted() { this.$emit('input', this.value); } }); datePicker.$on('input', value => { this.date = value; }); } }); ``` 这样，el-date-picker就可以在leaflet的popup中正常工作了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值