072：mapboxGL 点击某图层feature，高亮这部分

已于 2024-05-21 14:30:07 修改
阅读量587 收藏 36
点赞数 39
分类专栏： # mapboxGL示例教程100+ 文章标签： mapbox高亮 大剑师 MapboxGL教程 mapbox入门
于 2024-01-18 00:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/135624187
版权
本文由大剑师兰特撰写，他是一名GIS领域的高级前端工程师，分享了如何在Vue+Mapbox环境中，点击图层特征时高亮显示这部分内容。文章提供了一个示例，通过获取点击的feature信息，动态创建和更新source及layer来实现高亮效果，并提供了详细的操作步骤和源代码。

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

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

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

文章目录

一、示例效果图

二、示例简介

本示例介绍如何在vue+mapbox中点击某图层feature，高亮这部分。思路是通过点击，获取点击部分的feature信息，生成一个新的source和layer，如果这个图层不为空，则清除之，相当于点击了别的地方ÿ

了解本专栏 订阅专栏 解锁全文
MapBox实现要素点击高亮的几种思路（点击颜色变化）
lz5211314121的博客
11-14 2272
当点击要素的时候，会触发一个featureClick事件，在这个点击事件当中，我们重新设置B图层的过滤条件filter，使得我们选中的要素成为满足filter条件的要素，这样就会单独把我们选中的要素作为B图层所要展示的要素展示出来，进而叠加在A图层上，实现了高亮。实现思路是这样的，mapbox 中geojson图层展示的时候可以根据filter来进行局部的部分的展示，因此我们的思路就是准备一个和A图层一样的高亮图层B通过设置B的filter来单独展示某个要素。实际上高亮图层B就是专门为高亮而创建的。
040：mapboxGL鼠标hover更换选中feature颜色
大剑师兰特的GIS世界
10-11 883
本示例的目的是介绍演示如何在vue+mapbox中通过鼠标hover的方式来更换选中feature颜色。这里面利用了mousemove和mouseleave的方法，通过选中图层的feature，来设置hover的true或者false，从而通过opacity的case状态来判断透明度用哪一个值。
【WebGIS实例】（3）MapboxGL实现矢量要素点击高亮
ReBeX
11-23 1643
mapbox gl js 实现矢量要素点击高亮
【MAPBOX基础功能】14、mapbox点击面图层高亮指定的面
汪同学丶的博客
06-23 797
mapbox点击面图层高亮指定的面
mapbox实现点位图标点击放大效果（高亮效果）
taozi8957的博客
08-07 509
mapbox实现点位图标点击放大效果（高亮效果）
mapboxgl 点击矢量高亮显示
xm_w_xm的博客
08-17 2594
要求，点击乡镇的模块的数据让他的边界变成蓝色的，我们这里用了filter 一、初始化加载矢量图层 let inFoLayerfenpei = { id: "uuidfenpei", type: "fill", source: { type: "geojson", data: `${CONFIG.Service10}/qgzhdc/task/api/v1
mapbox geojson高亮
·
03-10 421
【代码】mapbox geojson高亮。
Mapbox GL示例教程【目录】-- 已有82篇
大剑师兰特的GIS世界
04-12 4065
vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中，解释相应的API知识点，做到。
篇1：Mapbox Style Specification
席木木的博客
05-31 525
篇1：Mapbox Style Specification，结合具体实例，介绍MapBox Style样式规范。
Mapbox实现拖拽标记点、高亮选中效果、拖拽实现点位置编辑
m0_46394444的博客
04-22 1115
Mapbox实现点图层多点拖动、标记点标记效果，通过监听地图的点击、鼠标移动和鼠标松开事件来实现拖拽操作，根据事件的发生情况更新标记点的位置，并提供了添加新点和取消编辑的功能。
mapboxgl点击高亮显示的实现
qq_33460928的博客
09-05 4865
mapboxgl点击高亮显示的实现，采用过滤的方式实现。 //geojson点数据 var geojsonPoints = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": { ...
记mapboxGL实现鼠标经过高亮时的一个问题
LZUGIS
05-27 709
mapboxGL实现鼠标经过高亮可通过注册图层的mousemove和moveout事件来实现，在mousemove事件中可以拿到当前经过的要素，但是当使用该要素时，发现在某个地图级别下会有展示不全的情况。究其原因，发现是mapboxGL在绘图的时候为提升效率也会进行切片，所以图层事件返回的要素时切片后的，当数据范围比较大、地图级别比较大的时候，必然会分成多块。
mapbox鼠标滑过高亮要素
Sakura1998gis的博客
09-22 476
mapbox鼠标滑过高亮要素
【MAPBOX基础功能】12、mapbox点击点位图层高亮指定的点位
汪同学丶的博客
06-23 1096
mapbox点击点位图层高亮指定的点位
mapbox 高亮相同特征的要素数据
qq_34870529的博客
02-04 799
【代码】mapbox 高亮相同特征的要素数据。
mapbox 添加geojson图层实现属性查询、高亮、地图手势变化等功能
qq_34870529的博客
09-24 3755
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mapbox添加geojson图层实现高亮、属性查询、地图手势变化等功能</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <s.
[Mapbox GL]高亮有限区域特性
每天写一点，进步一点点
12-27 2894
使用queryRenderedFeatures，按住shift并拖拽地图查询特性 body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } .boxdraw
mapbox实现鼠标框选选中图层功能
Lee的博客
02-17 2701
mapbox实现鼠标框选选中图层功能
地图框架之mapbox——（四）
最新发布
qq_45751819的博客
11-07 706
核心思路：就是通过点击事件不断获取新的点坐标，将点坐标push到coordinates中。核心逻辑和代码：设置高亮图层，点击元素，将元素获取到并设置到高亮图层中。今天来波大的，把图形绘制与图层全部说完，这也是我这几天的整理成果。2、添加多个点，设置图层点击事件，点击图层上的元素，元素变色。类似mouseenter这周api可以去mapbox官网查询。核心思路：点击获取坐标，把点击获取的坐标替换掉原来的坐标。核心代码，该api用于修改绘制参数。1、添加一个点，点击点的样式改变。4、点击事件改变元素位置。
评论 26
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值