Leaflet中实现添加、隐藏、自定义缩放Zoom控件

最新推荐文章于 2024-07-11 10:32:08 发布
最新推荐文章于 2024-07-11 10:32:08 发布
阅读量4.5k 收藏 5
点赞数 2
分类专栏： GIS相关 文章标签： leaflet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123923364
版权
GIS相关 专栏收录该内容
130 篇文章 4 订阅 ¥15.90 ¥99.00
订阅专栏

场景

Leaflet快速入门与加载OSM显示地图：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122290880 

上面加载显示后默认会带缩放控件。

怎样将该缩放控件隐藏、添加缩放控件以及自定义

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、隐藏自带的缩放控件

将地图zoomControl属性设置为false

 
了解本专栏 订阅专栏 解锁全文
霸道流氓气质
关注
专栏目录
订阅专栏
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 2753
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
LeaFlet自定义控件
weixin_30569153的博客
09-21 939
前言：在控件自定义上，比较简单，我们只需要按照特有的模板进行，简单的填充就行了，在模板中添加适当的方法即可。 一、基本模板 L.Control.XXX= L.Control.extend({ //在此定义参数 options: { }, //在此初始化 initialize: function (options) { ...
leaflet基础：覆盖（四）
最新发布
weixin_54685571的博客
07-11 478
1. 用于在地图的特定边界上加载、显示和提供对 SVG 文件的 DOM 访问。注意：SVG 元素上需要 viewBox 属性才能正确放大和缩小。用于在地图的特定边界上加载和显示单个图像。②. 创建一个包含多个选项的图像叠加层。2. 创建一个 SVG 元素。
【实战】leaflet 必会 —— L.control.zoom 横向放置
程序边界
05-27 633
文章目录使用横向放置方案一方案二 https://leafletjs.com/reference-1.7.1.html#control-zoom 使用 可以直接使用：map的options中设置的zoomControl： let map = L.map("map", { ... zoomControl: false, // 禁用 + - 按钮 }); 默认true，使用；可以切换 false ，禁用 也可以使用L.control.zoom： L.control.zoom().add
leaflet隐藏缩放控件和版权信息
weixin_53545517的博客
11-22 701
<script> // attributionControl 去除版权信息,zoomControl隐藏缩放控件 var map = L.map('map',{ attributionControl:false, zoomControl:false }).setView([51.505, -0.09], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attri
Leaflet地图使用自定义控件
m0_65720832的博客
06-17 1856
要注意这里的this指向的是map实例，并且还有一个坑在自定义控件扩展函数中不能使用js原生方法获取到dom实例，但是我却要获取到input框中用户输入的内容，可以在searchMap函数中添加如下代码。来更新一下leaflet，最近又出了一个新需求使用leaflet框架自带的控件去做一个地图搜索定位的功能，我找了半天找到了一个自定义控件可以满足需求。在leaflet官方文档上用到了这些。...
【Leafletjs】5.L.Control 自定义一个Control
weixin_30322405的博客
03-20 803
L.Control 所有leaflet控制的基础类。继承自IControl接口。 你可以这样添加控件: control.addTo(map); // the same as map.addControl(control); 构造器 构造器使用描述 L.Control( <Control options> options? ) new L.Control(...
Leaflet.ZoomBox:Leaflet的缩放框控件
05-06
Leaflet的缩放框控件。 它使您可以在地图上绘制要放大的区域。 参见。 使用Leaflet 1.1进行了测试。 安装 从NPM： npm install leaflet-zoombox 用法 包括CSS： <link rel="stylesheet" href="L.Control....
074：vue+leaflet 添加zoomslider，控制zoom放大缩小
大剑师兰特的GIS世界
02-16 680
第074个本示例的目的是介绍演示如何在vue+leaflet中使用zoomslider，相比于普通的zoom控件，这个更加形象，更加具体些。
leaflet-zoom-min:传单缩放控制扩展了一个按钮以缩小到最小缩放
06-05
将leaflet-zoom-min JS 和 CSS 添加到您的页面： < link rel =" stylesheet " href =" L.Control.ZoomMin.css " media =" screen " > < script src =" L.Control.ZoomMin.js " > </ script > ...
L.Control.BoxZoom:一个Leaflet控件，用于进行框缩放。 并非所有人都知道按住Shift键，而是希望有一个可见的，可单击的按钮来进行框缩放
05-08
L.Control.BoxZoom 一个Leaflet控件，用于进行框缩放。 并非所有人都知道按住Shift键，而是希望有一个可见的，可单击的按钮来进行框缩放。 除此之外，此控件还支持对股票框缩放行为的改进： 强制为绘制的缩放框设置高宽比的功能 安装与范例 超快 对于不耐烦的人，可以从的实时演示中复制粘贴。 更详细 dist /文件夹包含必需项：一个JS文件，一个CSS文件和一个SVG图标。 像往常一样简单地包括JS和CSS： [removed][removed] <link rel="stylesheet" href="dist/leaflet-control-boxzoom.css" /> 然后将控件添加到您的地图中： L.Control.boxzoom({ position:'topleft' })
leaflet.locationlist:LeafletJS 的控件，可在位置和缩放列表中滚动地图
07-11
传单.locationlist LeafletJS 的控件，可在位置和缩放列表中滚动地图。 ##示例用法 var llist = L.control.locationlist(); map.addControl(llist); 参数 var llist = L.control.locationlist({ locationsList : [ {title: 'Poland', latlng: [52.03, 19.27], zoom: 6}, {title: 'Other', latlng: [50.04, 14.28], zoom: 6}, {title: 'Other2', latlng: [50.04, 19.27], zoom: 12}], nextText : '->', nextTitle : 'Next', prevT
自定义Control按钮—Demo
10-06
自定义UIControl控件的例子。 功能：通过手势滑动，调节进度条的进度。通过如果进度条改变了，触发UIControlChangeValue消息。
leaflet.zoomhome:带有主页按钮的传单缩放控件，用于重置视图
05-04
将dist文件夹中的Leaflet.zoomhome.min.js和Leaflet.zoomhome.css复制到项目文件夹，并将其包含在HTML中（在包含插件之前需要包含Leaflet）： < link rel = " stylesheet " href = " leaflet.zoomhome.css " /&...
027：vue+leaflet配置Zoom属性，个性化放大缩小按钮
大剑师兰特的GIS世界
11-14 872
第027个本示例的目的是介绍演示如何在vue+leaflet中自定义zoom的放大缩小。本例子通过配置zoom的属性，设定位置和文字信息，来个性化显示放大缩小。zoomInText 和 zoomOutText信息处，可以个性化html信息。
028：vue+leaflet通过Control.extend，自定义zoom放大缩小
大剑师兰特的GIS世界
11-14 482
第028个本示例的目的是介绍演示如何在vue+leaflet中自定义zoom的放大缩小。本文是参考zoom的api，经过改造制作的自定义的zoom控件的放大和缩小。map的属性中zoomControl: false，关闭原来的控制按钮。
第47章、缩放控制ZoomControls（从零开始学Android）
热门推荐
jianghuiquan的专栏
01-26 1万+
ZoomControls控件是一个可以缩放控件，可以实现两个按钮控制图片的大小。   一、设计界面 　　1、首先把foot.jpg图片复制到res/drawable-hdpi文件夹内。 　　 　　2、布局文件 　　打开activity_main.xml文件。 　　输入以下代码： <LinearLayout xmlns:android="http://schemas.androi
114：vue+leaflet 自定义L.control扩展，配置地图水印
大剑师兰特的GIS世界
03-13 470
第114个本示例的目的是介绍演示如何在vue+leaflet中自定义L.control扩展，配置地图水印。要制作控件，只需继承 L.Control 并实现 onAdd() 和 onRemove()。除了 onAdd() 必须返回表示控件的 HTMLElement 实例之外，这些方法的工作方式与它们的 L.Layer 对应方法类似（只要将控件添加到地图或从地图中删除它们就会运行）。将元素添加到地图是自动完成的，删除它也是如此。
在vue3上leaflet的popup如何设置自定义样式
06-02
在Vue3上使用Leaflet的Popup设置自定义样式，可以通过以下步骤实现： 1. 在Vue3项目中安装leaflet和leaflet.popup插件： ```bash npm install leaflet leaflet-popup ``` 2. 在Vue3项目中导入leaflet和leaflet.popup插件： ```javascript import L from 'leaflet'; import 'leaflet-popup'; ``` 3. 在Vue3组件中定义一个自定义Popup样式： ```css .custom-popup { background-color: white; border-radius: 5px; padding: 10px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3); } ``` 4. 在Vue3组件中使用自定义Popup样式： ```javascript mounted() { // 创建地图 const map = L.map('map').setView([51.505, -0.09], 13); // 创建Popup const popup = L.popup({ closeButton: false, className: 'custom-popup', // 设置自定义样式 }).setContent('Hello World!'); // 在地图上添加Marker，并打开Popup L.marker([51.5, -0.09]).addTo(map).bindPopup(popup).openPopup(); } ``` 在上述代码中，我们通过`L.popup`方法创建一个Popup，并通过`className`属性设置其自定义样式。然后，我们创建一个Marker，并通过`bindPopup`方法将Popup绑定到Marker上，并通过`openPopup`方法打开Popup。这样，我们就可以在Vue3上使用Leaflet的Popup设置自定义样式了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霸道流氓气质

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值