042：mapboxGL点击某feature点，使其为中心点

已于 2024-05-21 17:03:51 修改
阅读量485 收藏 18
点赞数 18
分类专栏： # mapboxGL示例教程100+ 文章标签： mapbox中心点 大剑师 mapbox教程 mapbox示例
于 2023-10-12 00:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/133764912
版权
本文由大剑师兰特分享，展示在Vue+Mapbox环境下，如何响应feature点击事件并使用flyTo方法将其设为中心点。通过提供的源代码和简单配置，可以在2分钟内实现此功能。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+mapbox中通过鼠标点击某feature点，让其成为中心点。这里用到了click事件和flyTo的方法。

直接复制下面的 vue+mapbox源代码，操作2分钟即可运行实现效果

了解本专栏 订阅专栏 解锁全文
007：vue+leaflet 添加多个marker方法2（先组markerGroup）
大剑师兰特的GIS世界
09-13 716
本示例的目的是介绍演示如何在vue+leaflet中添加多个marker，这里的方法是将marker先构成一个markerGroup，然后将markerGroup添加到地图上。点击查看本专栏内容目录列表。
使用JavaScript在Leaflet中添加多个标记（Marker）的方法示例教程
CgbAutoit的博客
09-20 1160
首先，我们创建了一个地图容器，并使用Leaflet库初始化了地图对象。然后，我们使用循环遍历位置数组，并为每个位置创建了一个标记，并将其添加到地图上。在本教程中，我们将学习如何使用Leaflet和JavaScript在地图上添加多个标记（Marker）。然后，我们使用循环遍历数组中的每个位置，创建一个标记，并将其添加到地图上。函数来创建一个地图对象，并将其添加到之前创建的地图容器中。设置了地图的初始视图，将地图中心定位在纬度51.505、经度-0.09的位置，并将缩放级别设置为13。步骤2：创建地图容器。
Leaflet按需加载多个Marker和Polygon
最新发布
明知山
08-19 321
用来判断两个区块是否相同。
Leaflet 入门教程（七）：markers 篇
大剑师兰特的GIS世界
05-08 2739
在Leaflet中，`Markers`（标记）是最基本的图元之一，用于在地图上的特定坐标位置显示信息或图标。。
113：vue+leaflet上传gpx文件，导出为geoJson文件
大剑师兰特的GIS世界
03-08 222
第113个本示例的目的是介绍演示如何在vue+leaflet中上传GPX文件，将图形显示在地图上，并导出为geoJson文件。
068：mapboxGL绘制多边形，过滤获取选中的点的集合信息
大剑师兰特的GIS世界
10-27 704
本示例的目的是介绍演示如何在vue+mapbox中添加draw组件，绘制多边形，获取选中的点的集合信息。这里使用turf来判断点是否在多边形的范围内。通过filter方式，过滤掉未选中的点。
从零开始Vue项目中使用MapboxGL开发三维地图教程（四）改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标
tigerhhzz的博客
06-14 1925
该功能使用mapbox gl draw绘制多边形，并使用Turf.js计算其面积（平方米）和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形，并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形，请使用地图右上角的绘制工具。单击地图上的点来创建线，使用turf测量线的长度距离。这里我们使用到turfjs库，安装并引入turf。单击地图开始绘制多边形。
017：Mapbox GL加载geojson数据，显示Polygon，自定义填充色、边框等
大剑师兰特的GIS世界
04-21 1469
第017个本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据，显示Polygon，自定义填充色、边框等。fill的参数：fill-antialias,fill-color,fill-opacity,fill-outline-color,fill-pattern,fill-sort-key,fill-translate,fill-translate-anchor,visibility。具体请参考下面的api链接。
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建
tigerhhzz的博客
06-11 3855
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。
006：vue+leaflet添加多个marker方法1（一一添加）
大剑师兰特的GIS世界
09-13 1329
本示例的目的是介绍演示如何在vue+leaflet中添加多个marker，这里的方法是将marker坐标通过循环的方式一一的添加到地图上。点击查看本专栏内容目录列表。
69.（leaflet篇）leaflet大量上图（10万个点）（canvas技术）.zip
02-11
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122879794
Leaflet.markercluster:Leaflet的标记聚类插件
05-11
传单标记群 为提供漂亮的动画标记聚类功能， 是用于交互式地图的JS库。 需要传单1.0.0 对于Leaflet 0.7兼容版本，请要获取与Leaflet 0.5兼容的版本，请 对于与Leaflet 0.4兼容的版本，请 目录 使用插件 使用您选择的方法，在页面的Leaflet文件之后添加插件CSS和JS文件。 使用unpkg CDN： https://unpkg.com/leaflet.markercluster@1.4.1/dist/ ：//unpkg.com/leaflet.markercluster@1.4.1/dist/ 使用npm install leaflet.markercluster ： npm install leaflet.markercluster 在每种情况下，请使用dist文件夹中的文件： MarkerCluster.css MarkerCluster
leaflet添加marker
Sakura1998gis的博客
04-07 657
leaflet添加marker
vue+leaflet添加marker图标
qq_40920553的博客
07-28 1955
在vue项目中使用leaflet地图添加单个或多个marker图标
基于LeafLet的多点聚合展示markercluster
热门推荐
夜郎King的博客
10-07 4万+
某场景需求：需要在某地图上综合展示几千个marker，在地图层级比较低的情况，由于展示的数据点较多，会密密麻麻的堆叠在一起，比较影响用户体验（密集恐惧症患者恐怕要晕掉了）。 解决办法：为了让用户获得比较好的体验，在低层级地图下，将多个点聚合成为一个，在地图放大时再根据比例展示具体的数据，通过时空上的聚合提高用户体验。基于Leaflet扩展的markercluster插件可以满足以上的需求。本文将通过实战化编程，说明如何使用markercluster进行多点聚合展示，最后给出具......
MapBox设置中心点（经纬度）后地图显示问题（只有经度生效）
Chris_Ning的博客
07-15 2488
问题 MapBox-GL如果先设置Center，再设置Zoom的话，就会出现大问题： map.setCenter(120，46); map.setZoom(12); console.log(map.getCenter(), "中心点2222"); 只有经度的值生效了，纬度约等于0，我觉得算是挺大一坑。。 解决方法 MapBox设置经纬度其实是和级别是有联系的，必须要先设置Zoom，再设置Center才有效（可能是我这个mapbox-gl 2.2版本的bug）
【MAPBOX基础功能】28、mapbox地图基础工具 -获取当前地图中心点
汪同学丶的博客
06-24 1491
mapbox地图基础工具 -获取当前地图中心点
[Mapbox GL]点击标志改变地图视图中心
每天写一点，进步一点点
12-23 4673
使用queryRenderedFeatures和flyTo使某个标志成为地图中心 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } mapboxgl
leaflet 渲染大量轨迹点
weixin_38233449的博客
03-29 810
【代码】leaflet 渲染大量轨迹点。
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值