037：vue+leaflet 获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）

已于 2024-05-11 11:53:48 修改
阅读量1.4k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet中心点 leaflet边界值 大剑师 leaflet基础教程 leaflet入门
于 2022-11-18 06:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/127908955
本文由大剑师兰特分享，介绍如何在Vue+Leaflet应用中获取地图的当前状态，包括中心点坐标、缩放级别、角度边界、容器尺寸以及像素边界值。通过提供的示例代码，读者可以在2分钟内实现相应功能。

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

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 037个示例

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet中获取map当前状态（中心点，zoom值，角度边界值，容器宽高，像素边界值）。

直接复制下面的 vue+lea

了解本专栏 订阅专栏 解锁全文
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3504
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
052：vue+leaflet 解决marker呈现灰色边框的问题
大剑师兰特的GIS世界
02-11 785
第052个本示例的目的是介绍演示如何在vue+leaflet示例中处理marker外面有灰色边框的问题，请看未处理会后的图片。处理后的结果非常满意，不再显示灰色边框。处理方法参考源代码。
63.（leaflet篇）leaflet+turf获取geojson面的中心点与质心.rar
01-10
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/122410542
leaflet定位地图中心
weixin_53545517的博客
09-08 2243
【代码】leaflet定位地图中心。
vue3中leaflet地图缩放、移动获取地图中心点坐标及缩放层级
最新发布
wang457777271的博客
06-09 139
【代码】vue3中leaflet地图缩放、移动获取地图中心点坐标及缩放层级。
leaflet-计算地图边界的重心点经纬度
孙霸天的专栏
12-20 2901
这两天在给公司做开发的时候，遇到一个需求:标出1000多个村的重心点位置(就是确定一点在村的中心位置的坐标)。以前在做安徽省内的系统时，村子没有那么多也就100左右，当时技术跟不上就用了笨方法，使用人眼去识别村子的经纬度(现在想想好傻呀。。。)。这个方法一是耗时，二是由于是人眼去识别容易出错。这次可是1000多个村子，要是这么搞得要人命！ 于是乎我就在想如何让代码自己去找重心的位置，这样又快又准...
Leaflet 入门教程（二）：Map 篇
大剑师兰特的GIS世界
05-13 2520
Leaflet 的 `L.Map` 类（通常简称为 `map` 实例）是 Leaflet 库的核心，负责管理地图的显示、交互以及与各种图层的集成。它提供了丰富的属性和方法来控制和定制地图的行为。以下是一些常用的属性和方法概览
leaflet 综合教程150+ 【目录 】（已包含149篇文章）
热门推荐
大剑师兰特的GIS世界
09-07 1万+
vue+leaflet系列教程旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。注意本示例目录中的内容可能加载是vue+openlayers的示例， 本目录是要加载vue+leaflet的示例，只是内容少，逐渐更新中。
123：vue+leaflet 显示不同颜色的点划线
大剑师兰特的GIS世界
03-28 682
第123个本示例的目的是介绍如何在vue+leaflet中显示不同颜色的点划线。
125：vue+leaflet绘制具有虚线框的多边形
大剑师兰特的GIS世界
03-28 1506
第125个本示例的目的是介绍如何在vue+leaflet中绘制具有虚线框的多边形。
115：vue+leaflet 使用VideoOverlay来加载mp4视频
大剑师兰特的GIS世界
03-17 298
第115个本示例的目的是介绍演示如何在vue+leaflet中添加播放视频，这里使用VideoOverlay来做播放器载体加载mp4视频文件或者其他视频文件。
根据地市获取中心点坐标(json数据)
04-21
下面为具体json例子,可转换为list或数组 [ { "北京": "116.395645,39.929986" }, { "安徽": "117.216005,31.859252", "cities": [ { "安庆": "117.058739,30.537898" }, { "蚌埠": "117.35708,32.929499" } ] } ... ]
leaflet画多边形获取中心点
氵冫、的博客
07-17 3643
获取多边形中心点
leaflet怎么获取矩形的中心点位 getCenter()
小武的博客
06-29 3587
效果如下图，中间的播放按钮： 代码如下： var rectangle = new L.Rectangle(L.latLngBounds(this.polygonPosition), { weight: 2, draggable: true, transform: true, fillColor: "transport", fillOpacity: 0 }) .addTo(this.leafletService.map.
获取地图的当前状态 - 使用JavaScript和Leaflet库
laugh666的博客
09-06 230
在本篇文章中，我们将使用JavaScript和Leaflet库来获取地图的当前状态。我们将展示如何获取地图的中心坐标、缩放级别和可见区域边界框。要获取地图的当前状态，我们可以使用Leaflet库提供的一些方法。方法获取可见区域边界框，我们可以在地图操作过程中获取和使用这些信息。使用JavaScript和Leaflet库，我们可以轻松地获取地图的当前状态。要获取地图的可见区域边界框，我们可以使用地图对象的。要获取地图的当前缩放级别，我们可以使用地图对象的。要获取地图的中心坐标，我们可以使用地图对象的。
leaflet地图的基础使用
weixin_44870969的博客
03-07 334
获取地图层级 map.on('zoomend', (e) => { //获取当前放大或者缩小的等级 let scale = e.target.getZoom(); });
vue项目中地图选点，搜索选点，获取经纬度，以及详细地址
子玉的博客
03-29 972
【代码】vue项目中地图选点，搜索选点，获取经纬度，以及详细地址。
Leaflet修改地图中心点定位
cuisidong1997的博客
04-22 4203
前景：在操纵地图时除了鼠标、触摸交互移动地图，通过map.panBy和map.panTo也可以移动地图。 map.panTo（平移至中心点）：将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。 map.panBy（通过像素点平移）：通过给定的像素值对地图进行平移。 参考高德地图代码：地图的平移-地图属性-示例中心-JS API 2.0 示例 | 高德地图API ...
070：vue+leaflet 选择一个marker，点击后设置其为中心点
大剑师兰特的GIS世界
02-15 1350
第070个本示例的目的是介绍演示如何在vue+leaflet中引用geojson文件，显示marker，点击某个marker后，设置其为中心点，并panTo到中心点。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值