043：mapboxGL鼠标点击提示source属性信息

已于 2024-05-21 17:02:00 修改
阅读量289 收藏 19
点赞数 21
分类专栏： # mapboxGL示例教程100+ 文章标签： mapbox鼠标样式 mapbox点击事件 大剑师 mapboxgl教程 MapboxGL示例
于 2023-10-12 00:45:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/133770258
版权
mapboxGL示例教程100+ 专栏收录该内容
82 篇文章 43 订阅 ¥159.90 ¥299.90
订阅专栏
本文由高级前端工程师大剑师兰特撰写，分享如何在Vue项目中结合MapboxGL，实现在地图上鼠标点击时弹出提示，展示source属性信息。示例包括popup弹窗、click事件及鼠标样式变化的使用，并提供了详细配置说明和源代码供读者快速上手。
摘要由CSDN通过智能技术生成

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

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

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+mapbox中通过鼠标点击提示source属性信息。这里用到了popup弹窗，用到了click事件，用到了鼠标样式的变化等功能。

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

三、配置说明

1）查看基础设置：https://xiaozhuanlan.com/topic/9327810546
或者同样查看：

了解本专栏 订阅专栏 解锁全文
还是大剑师兰特
关注
  • 21
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论
专栏目录
订阅专栏
053：mapboxGL中sources的6种类型及各类型的示例代码
大剑师兰特的GIS世界
10-17 537
mapbox中 sources 是什么 sources：数据源集合（必填，用于包含一系列数据源 source，这些数据源提供了在地图上显示的数据） sources 是对象 {} 的形式，其属性名就是 数据源的名称（或者说 数据源的 id），这样可以根据 数据源的名称（或者说 数据源的 id）快速获取数据源的信息。
mapbox使用教程
热门推荐
ll_883963的博客
05-01 2万+
地图创建点 const sourceId = 'typeId'; const pointId= 'pointId'; map.addSource(sourceId, { type: 'geojson', data: data, }); //设置原点默认值 map.addLayer({ id: pointId, type: 'circle', source: sourceId, // filter: ["!", ["has", "point_count
MapBox常用属性和案例
skr_Rany的博客
08-20 1519
一、定位 //跳转 map.jumpTo({ center: city.geometry.coordinates }); }, 2000 * index); //飞行 this.map.flyTo({ center: [114.23774842192483, 30.52603116857425], essential: true }) 二、获取所有图层 var layers = this.map.getStyle().layers 三、监听地图缩放事件 th
mapbox 获取鼠标悬浮位置矢量图层要素
qq_34870529的博客
02-05 401
【代码】mapbox 获取鼠标悬浮位置矢量图层要素。
Mapbox GL基础（十）：获取点击位置的Feature
weixin_43724098的博客
09-18 736
本文主要针对GeoServer发布的服务、GoeJson的数据获取点击处的Feature，并根据Feature进行弹窗展示进行了说明，以后如果遇到新的功能再进行补充，接下来的章节将继续探索Mapbox。欢迎关注星林社区，文章将同步更新在星林社区中！
【Mapbox GL JS 入门】（7）Sources 数据源
椰子的职场成长记录
12-05 2360
除了Mapbox样式规范中描述的源类型之外，Mapbox GL JS还可以处理的源类型
MapboxGL本地化部署方法
01-12
### MapboxGL本地化部署方法详解 #### 一、引言 Mapbox GL JS 是一款高性能的开源地图库，能够实现交互式矢量地图的渲染。对于那些希望将地图服务部署在内网环境中的用户来说，进行Mapbox GL JS的本地化部署就显得...
mapboxgl-vector-tiles:使用mapbox-gl渲染mapbox矢量图块格式
05-10
5. **交互与事件处理**：Mapbox GL支持多种交互和事件处理，例如点击事件监听、图层隐藏/显示、动画效果等。例如，监听点击事件： ```javascript map.on('click', 'my-layer', function(e) { console.log('点击了...
mapbox-gl-js-layer-control:mapbox-gl-js切换图层的控件
05-15
Mapbox GL JS 是一个强大的开源库，用于在Web上创建交互式地图。它基于Mapbox GL，一个现代的、基于WebGL的JavaScript库，能够渲染矢量和图像数据。`mapbox-gl-js-layer-control`是专门为Mapbox GL JS设计的一个扩展...
mapboxgl对接wms自定义服务
10-03
在Mapbox GL JS中，我们可以使用`mapboxgl.Source`类型来定义WMS源，其配置参数包括： 1. `type`：设置为`raster`，表示这是一个栅格图层。 2. `tiles`：定义WMS服务的URL模板。通常，这个URL会包含`{z}`、`{x}`和`...
mapbox-react-examples:使用Mapbox GL JS构建React应用的示例模式
05-07
5. 地图交互：利用Mapbox GL JS事件监听器实现地图上的交互行为，如点击、拖动等。 6. 性能优化：了解如何处理大量数据以避免性能问题，例如使用流式传输和分块加载数据。 通过深入研究这些示例，你可以熟练地将...
mapbox：3.添加资源
SN874593906的博客
09-01 725
mapbox加载图片，gltf和geojson
【Mapbox GL JS 入门】（2）Map 对象及其属性
椰子的职场成长记录
11-22 1332
源代码Map 对象代表页面的地图，暴露了一些方法和属性供编程修改地图，以及一些交互事件。可以指定容器新建Map，Mapbox会初始化页面上的地图并返回Map 对象。
Mapbox Web GL JS编程学习—— 风格规范Style Specification(二)——关于Source和Light
小小菜下士的博客
07-16 712
Mapbox Web GL JS编程学习 以下内容均来自MAPBOX官网的开发文档 主要是对基础语法功能进行学习。 写在前面：一些专有名词的翻译： tile 瓦片 geojson pdf 地图的瓦片数据 lng longitude经度 lat latitude维度 coordinates 坐标 cluster 集群 pitch 螺距 一：Source 源说明地图应该显示哪些数据。指定源的类型。"type"属性，该属性必须是 vector, raster, raster-dem, geojson, i
mapbox自定义Source加载COG数据 （Cloud optimized GeoTIFF——云优化GeoTiff）
free_plm的博客
04-28 937
mapbox加载COG数据
MapboxGL source和Layer画圆
chenfairy的博客
02-22 1680
MapboxGL 在地图上面添加点位 1. 可以使用Marker 2. 可以通过source,layer 通过source案列: // source map.addSource("circle_source", { "type": "geojson", "data": { "type": "FeatureCollection", "features": [{ "type": "Feature", "geometry": { "type": "P..
mapbox的Source
最新发布
weiweiweb888的博客
04-29 218
后续使用补充Source 中属性。
mapbox获取图层中要素的属性值
ScapeD的博客
10-23 5399
Mapbox GL JS提供了强大的查询检索功能，我们可以不需要写后台程序实现对于图层中要素属性值的查询检索功能。 例如：我们希望用一个表格或图表展示某个图层中所有或部分要素的某个属性值，我们可以用mapbox的map.querySourceFeatures()方法搞定。 该方法可以查询出某一图层的所有要素（包括要素的属性值），如果你想筛选部分要素，只需要在参数中设置Filter即可。 使用方法如下： var relatedFeatures = map.querySourceFeatures('c
Mapbox浅析（快速入门Mapbox）
Taylor-NG的博客
06-01 1万+
1.是什么？    Mapbox是一个可以免费创建并定制个性化地图的网站。2.了解一些基本东西   常见的 mapbox.js和mapbox-gl.js的异同点？    相同点：                1.都是由Mapbox公司推出的免费开源的JavaScript库                2.都可以作为前端渲染矢量瓦片交互地图的工具                3.它们的样式设置...
mapboxgl 如何更新layer的source-layer 和source
07-17
要更新 `mapboxgl` 中图层的 `source-layer` 和 `source` 属性，你可以使用以下步骤： 1. 使用 `map.getSource()` 方法获取图层的当前数据源对象。 2. 更新数据源对象的 `url` 或其他属性，以更新数据源。 3. 使用 `map.getStyle().layers` 方法获取地图中的所有图层。 4. 找到你想要更新的特定图层，并更新其 `source-layer` 和 `source` 属性。 5. 使用 `map.setStyle()` 方法重新应用更新后的样式。 以下是一个示例代码，演示了如何更新 `mapboxgl` 中图层的 `source-layer` 和 `source` 属性： ```javascript // 获取当前图层的数据源对象 const source = map.getSource('your-source-id'); // 更新数据源对象的属性 source.setUrl('new-source-url'); // 或者 source.setData('new-data'); // 获取地图中的所有图层 const layers = map.getStyle().layers; // 找到要更新的特定图层 const layerToUpdate = layers.find(layer => layer.id === 'your-layer-id'); // 更新图层的 source-layer 和 source 属性 layerToUpdate['source-layer'] = 'new-source-layer'; layerToUpdate.source = 'your-source-id'; // 重新应用更新后的样式 map.setStyle(map.getStyle()); ``` 请注意，在上述代码中，你需要替换 `'your-source-id'`、`'new-source-url'`、`'new-data'`、`'your-layer-id'` 和 `'new-source-layer'` 为你自己的数据源 ID、新的数据源 URL、新的数据、图层 ID 和新的数据源图层名称。 希望这个示例对你有所帮助！如果你还有其他问题，请随时提问。
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值