vue+mapbox通过地图添加自定义图层、聚合、点击等(工作笔记，不能直接复制使用，需要自行调整部分代码)

已于 2022-09-05 10:11:35 修改
阅读量1.2k 收藏 3
点赞数
分类专栏： mapbox 文章标签： vue.js 前端 javascript
于 2022-09-05 10:10:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44706619/article/details/126699332
版权
本文记录了使用Vue.js与Mapbox进行地图开发的工作笔记，内容涉及如何在地图上添加自定义图层、实现聚合效果以及设置点击事件。虽然代码不能直接复制使用，但提供了操作步骤和思路。
摘要由CSDN通过智能技术生成
场景

聚合显示、自定义图层图标点等

效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码实现

假设已经初始化地图完成，开始进行操作

//查询数据-摄像头
        async getAllCameraInfo(){
了解本专栏 订阅专栏 解锁全文 超级会员免费看
_小郑有点困了
关注
专栏目录
订阅专栏
vue+mapbox实现聚合以及自定义图片图层、元素激活、显示popup、自定义marker
_小郑有点困了的博客
11-10 1513
当地图上数据量过大，需要在高层级聚合显示数字，低层级显示具体图标的时候，就需要使用聚合来实现了。这里面可能有一些代码冗余，而且聚合这里比较特殊，代码不如之前的简洁，但是就暂且看功能吧。
vue-baiduMap开发百度地图的自定义图片----瓦片图层
website__的博客
09-18 1747
Vue Baidu Map这个是官网的地址，大家可以参考下 最近的一个需求是用到我们公司自己设计出来的图片替换成百度地图上的图片，看了网上的很多教程，没有相对完整的教程，于是自己找了很多文档，实践了，实现了这个需求，下面分享给大家 <!-- 瓦片图层的显示 --> <bm-tile :isTransparentPng="true" :tileUrlTemplate="imgUploadUrl + ...
MapBox 做聚合图点位聚合效果实现教程
lz5211314121的博客
08-01 3152
聚合之后的点的位置还必须在点位比较密集的区域，那这样的话我们就得使用 mapbox 自带的聚合功能了。我们直接把图层的 cluster 设置开启，mapbox 会帮助我们自动计算聚合的结果。聚合多大范围也需要你指定。首先你可以手动的些代码来计算某个范围内的点的数量然后再把聚合的结果展示在这个范围的某个位置。这针对于简单的需求是比较有效的。注意聚合之后的点位必须用 circle 类型的图层来表示，使用其他的图层是不行的。第三个参数是聚合半径clusterRadius，这个半径越大会检索到越广的范围进行聚合。
mapBox地图的打点聚合，多种图标展示/二、导入json文件，添加镇街图层
m0_60827885的博客
11-04 3128
mapBox地图的打点聚合，多种图标展示
mapbox 聚合图
xm_w_xm的博客
12-19 4876
话不多说先看效果图 要实现的功能就是按照根据省份展示出各省上传的数据量 首先我们可以查看mapboxgl官网有一个例子地址如下：https://docs.mapbox.com/mapbox-gl-js/example/cluster/ 可以复制过来直接查看是否有聚合图 是这样的之后我想把数据的颜色变得有些透明的颜色，将字体的颜色改成白色的 https://docs.mapbox....
vue+mapbox通过地图图层属性进行区划颜色填充(工作笔记，不能直接复制使用，需要自行调整部分代码)
_小郑有点困了的博客
09-05 1309
前端开发平时涉及一些大屏可视化的业务比较多，用到mapbox，然后进行数据展示，例如，某某市多少多少人，然后根据不同数值填充不同颜色，从而可以显而易见的了解到区域差别。
从零开始Vue项目中使用MapboxGL开发三维地图教程（三）添加全屏，缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能
tigerhhzz的博客
06-13 1596
/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${
077：vue+mapbox 禁止启用dragPan，影响平移拖拽地图的功能
大剑师兰特的GIS世界
04-22 2010
演示如何在vue+mapbox 中禁止启用dragPan拖拽地图的功能。Mapbox GL JS 提供了一组内置的交互 handler，其中 DragPanHandler 是其中之一，它允许用户通过鼠标或触摸手势拖动地图来改变视口的位置。当你想要启用或禁用地图的平移功能时，可以对这个 handler 进行操作。
vue+mapbox添加自定义图片图层、选中效果、显示popup、增加marker、图层过滤等
_小郑有点困了的博客
11-04 1342
例如：平时需要在地图上显示一些设备的分布及状态。
自己封装的电子地图控件，可以添加图层，设备等信息
10-13
实现简单监控电子地图的控件，主要应用在监控图层的显示，定位等功能，图层跳转。
android版 地图标注物聚合
07-15
本程序根据地图zoom大小来聚合标注物，clusterer标记聚合器用来解决加载大量点要素到地图上产生覆盖现象的问题，并提高性能，本代码为android版。
vue+mapbox通过地图添加自定义图层(工作笔记，不能直接复制使用，需要自行调整部分代码)
_小郑有点困了的博客
09-05 788
有时候地图上需要叠加标签，但是marker可能不能达不到更好的效果，例如，点击事件，popup等，那么这时候就可以考虑通过自定义图层达到目的了。
【MAPBOX基础功能】08、mapbox绘制点图层并进行添加、删除、更新、显隐等操作
汪同学丶的博客
06-22 2504
mapbox绘制点图层并进行添加、删除、更新、显隐等操作
vue中使用vue-baidu-map时的自定义个性化地图问题
small_animation的博客
07-05 1476
1.找到node_modules/vue-baidu-map/index.js文件，修改其中https://api.map.baidu.com/api?v=2.0的版本到3.0，然后查看项目，示例如下：2.之后就只需要增加map.setMapStyleV2()，示例如下：
mapBox地图第一个案例和聚合图标自定义
lyxkgc的博客
11-22 745
mapbox加载第一个案例，聚合图层自定义，点位使用图片点，单点自定义。
mapbox-gl封装轨迹动画图层
qq_37987033的博客
10-28 1694
mapbox轨迹回放图层封装
SuperMap for MapboxGL 实现自定义图标点位及多点位聚合
yueye_wu的博客
03-10 1681
SuperMap for MapboxGL 实现自定义图标点位及多点位聚合
vue+mapbox
最新发布
06-29
Vue.js 和 Mapbox 是两个非常流行的工具，用于构建用户界面和提供强大的地图功能。Vue 是一个轻量级的前端框架，以其组件化开发和易于上手的特点受到开发者喜爱。Mapbox 则是一个提供了丰富的地图服务、地图样式和交互功能的平台。 当你将 Vue 与 Mapbox 结合使用时，可以实现以下几个关键点： 1. 安装依赖：首先，你需要在 Vue 项目中安装 `@vuegis/vue-mapbox-gl` 或者直接使用 Mapbox GL JS（原生库），这是官方推荐的 Vue 组件化解决方案。 2. 创建地图组件：创建一个 Vue 组件，例如 `Map.vue`，引入 Mapbox GL JS，并设置初始化地图的方法，包括设置中心位置、比例尺、地图样式等。 ```html <template> <div ref="map"></div> </template> <script> import { mapboxgl, Map } from '@vuegis/vue-mapbox-gl' export default { components: { MapboxGL: mapboxgl.Map, }, mounted() { this.createMap() }, methods: { createMap() { this.$refs.map .el .style = 'width: 100%; height: 400px;'; // 设置样式 const map = new Map(this.$refs.map, { center: [51.505, -0.09], // 地图中心点 zoom: 13, // 初始缩放级别 style: 'mapbox://styles/mapbox/streets-v11', // 使用预设样式 }); }, }, } </script> ``` 3. 动态数据绑定：Vue 的响应式系统使得地图可以根据数据变化动态调整，比如根据用户的输入改变地图视图或添加标记。 4. 图层和交互：Mapbox 提供了各种图层（如矢量图层、影像图层等）和交互元素（如点击事件、鼠标悬停事件），可以在 Vue 中轻松使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

_小郑有点困了

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

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

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

打赏作者

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

抵扣说明：

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

余额充值