Mapbox GL JS 在图层中的特定功能上设置 Paint 属性

2023-12-12

我使用 Mapbox Studio 作为地图和样式的基础,然后使用 HTML 来实现其他地图功能。

其中一项功能是在悬停或鼠标输入时更改图标不透明度。当您直接在 HTML 中创建它时,我检查了其他示例和所有其他参考功能。我设法改变不透明度,但仅限于整个图层。

我可以以某种方式使用 e.features[0] 命令行将更改仅应用于一个功能而不是整个图层吗?

我使用了这段代码来改变整个图层“图标”的不透明度(图层包含 5 个带有文本的图标):

    // Change the cursor to a default and change opacity when the it enters a feature in the 'Icons' layer.
map.on('mouseenter', 'Icons', function() {
    map.getCanvas().style.cursor = 'default';
    var feature = e.features[0];
    map.setPaintProperty('Icons', 'icon-opacity', 0.5);
});

// Change it back to a pointer and reset opacity when it leaves.
map.on('mouseleave', 'Icons', function() {
    map.getCanvas().style.cursor = '',
    map.setPaintProperty('Icons', 'icon-opacity', 1);
});

谢谢你!!!


有几种方法可以实现这一目标。一种方法是将每个功能添加为单独的图层,这样当您想要更改图层中添加的图标的不透明度时'specific-icon-layer',你可以通过'specific-icon-layer' to the Map#on方法。如果您的标记数量相对最少,这可能是最直接的选择。

另一种方法是为每个图标功能添加唯一的 ID,以便您可以使用filter结合表达Map#setPaintProperty and Map#queryRenderedFeatures (or Map#querySourceFeatures)。例如,假设您添加一个'id'每个 GeoJSON 要素的属性,表示源中的图标'Icons'层。然后,您可以设置类似于以下的事件侦听器这个例子,检索'id'返回的特征,并使用'id'(假设这里是'example-id') 更新绘制属性'Icons' layer:

map.setPaintProperty(
  'Icons', 
  'icon-opacity', 
  ['match', ['get', 'id'], 'example-id', 0.5 , 1]
);

在这里,我们使用match and get表达“如果'id'一个特征是'example-id',用不透明度绘制其图标0.5,否则使用不透明度1."

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Mapbox GL JS 在图层中的特定功能上设置 Paint 属性 的相关文章

  • 如何在悬停某物时连续单击?

    我很确定这有一个简单的解决方案 我正在使用 jCarousellite 我想更改内置导航按钮的行为以在悬停时触发 carousel jCarouselLite vertical true btnNext btn down btnPrev b
  • Mapbox 描述框的地图样式

    我是新手 正在研究他的前端技能 我正在设计自己的网站来学习 我正在尝试使用 Mapbox API 实现地图 但无法获取我在地图中使用的描述框的样式 链接到我的网站 http rohanchhabra in 地图位于底部 现在我已经成功在地图
  • Selenium Webdriver + python - 鼠标悬停后无法隐藏工具提示

    我正在使用 Selenium WebDriver 和 Firefox 在我的网页上测试工具提示 我试图将鼠标悬停在附加工具提示的元素上 测试工具提示是否显示 然后将鼠标悬停在另一个元素上并测试其各自的工具提示 element to clic
  • Mapbox 决定重叠顺序

    I have some features on the map displayed as icons I want to decide which icons should be hidden and which should be dis
  • MapBox iOS MGLPolyline 跨越(180 或 -180)经度时出现问题

    在 MapBox iOS sdk 4 4 1 中 如果 MGLPolyline 穿过 180 或 180 经度 地图显示它正在绕地球走更长的路 而不是走更短的路 override func viewDidAppear animated Bo
  • 使用 GoogleMap 或 MapBox Direction API 在我的应用程序中实现我自己的导航

    我想在我的 Android 应用程序中为驾驶员实现导航地图 我不想使用 URL 方案打开 google 地图应用程序来导航 我更喜欢在我的应用程序中实现此导航功能 就像 Google 地图一样 我的要求很简单 将用户从一个地方导航到另一个地
  • 将 Leaflet.AwesomeMarkers 插件与 Font Awesome 5 一起使用?

    如何将传单插件升级到 Font Awesome 5Leaflet awesome markers https github com lvoogdt Leaflet awesome markers 这个插件已经有一段时间没有在github上更
  • 自定义 Mapbox 地理编码器控件

    我觉得这对于 Google StackOverflow 搜索来说是一项简单的任务 但我似乎找不到有关该主题的任何内容 无论如何 我想做的就是创建自己的在外部工作的地理编码器搜索栏我的 Mapbox 地图 以 Zillow 主页为例 当您访问
  • 当鼠标悬停在元素上加载页面时,jQuery 触发鼠标悬停功能

    我有一个 ASP NET 文档 其中包含一个 Image 元素 我创建了一个mouseover在此图像元素上运行并且运行良好 问题是 如果文档加载自身时鼠标已位于该元素上 则mouseover函数不触发 我需要mouseout进而mouse
  • 如何在嵌套属性上使用mapbox“case”表达式?

    如何使用嵌套值来使用 case 运算符 就像是 this map setPaintProperty somelayer fill color case properties some prop someval 34c0dd 499bbc 其
  • 鼠标悬停时出现棘手的延迟

    这就是我目前所拥有的 cart summary mouseenter function flycart delay 500 slideDown fast flycart mouseleave function flycart delay 5
  • 创建圆形鼠标悬停饱和效果

    我有两个版本的图像 去饱和版本和全彩版本 我想要实现的是悬停效果 其中将鼠标悬停在去饱和图像上会显示图像的彩色版本的圆圈 这有点像将聚光灯照射在饱和度降低的图像上以显示其颜色 然后 当您将鼠标移开时 它会淡回到不饱和状态 我知道我可能可以使
  • 仅在悬停时显示 d3 节点文本

    我试图仅在鼠标悬停时显示节点文本 当我将鼠标悬停在节点上时 svg 圆的不透明度发生变化 但仅显示第一个节点的文本 我发现这是因为我如何使用 select 元素 但我不知道如何为我悬停的节点提取正确的文本 这是我目前所拥有的 node ap
  • Mapbox GL JS:将基础层设置为白色?

    我想显示带有白色背景的 Mapbox GL JS 地图 而不是地图背景 这是我现在的代码 mapboxgl accessToken mytoken var map new mapboxgl Map container map style m
  • 如何包装 ui 控件(mapbox 地理定位控件)

    我想扩展 更改具有某些功能的地图框地理定位控件 例如 我想飞到而不是跳到当前位置 我想在打开地理控制按钮时添加一些行为 例如防止拖动 我怎么做 我尝试制作包装纸 但后来遇到了一些问题 按钮的颜色在打开时应变为蓝色 但确实如此 不再工作了 我
  • 如何添加鼠标悬停摘要

    我几乎可以肯定这将是一个非常简单的答案 但我似乎无法在任何地方找到它 我们都知道 当您将鼠标悬停在某物 例如字符串 上时 会弹出一个小摘要 如果已启用 对于字符串 它表示 类系统 String 将文本表示为一系列 Unicode 字符 当我
  • 判断鼠标是否位于表单上方的最佳方法是什么?

    我想通了如何捕获鼠标点击 https stackoverflow com questions 2866936 how can i add an event handler to an event by name覆盖整个表单 但此方法不能很好
  • Flutter:无法在调试或发布中构建android

    突然我的应用程序无法在调试或发布模式下运行 我在用户界面中添加了一些屏幕 但我没有更改或添加任何包 我不知道到底发生了什么 但我尝试用 Android Studio 中的本地历史记录来逆转我的更改 但也没有发生任何事情 我的输出是 FAIL
  • 如何在 Mapbox 4.1 中添加自己的图块

    我有一个图块来源作为网址 并希望将它们添加到我的地图中 我能够做到这一点谷歌地图 and OSMDroid 但我不知道如何使用Mapbox 我的网址格式如下 http mysource x y z 我已经看到了针对网络的解决方案 但我没有找
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB

随机推荐

  • 如何在不清除cookies或缓存的情况下启动Selenium RemoteWebDriver或WebDriver?

    使用案例 使用用户名登录 导航到第二因素身份验证页面以执行多项操作之一 即回答基于知识的问题 然后导航到最终页面以输入密码 关闭浏览器并尝试使用用户名再次登录 这次 第二因素身份验证页面被绕过 因为应用程序识别了 cookie 并且系统会提
  • 显示:表格单元格不适用于按钮元素

    我正在尝试设计一种命令栏的样式 它必须在 IE9 中工作 所以 flexbox 已经出局了 相反 我使用的是display table layout 第一个片段 使用 span s 是我想要的样子 第二个片段是正确的 HTML 但其样式不正
  • 按 IP 限制 woocommerce 订单

    我需要防止在 woocommerce 中通过 IP 地址每天销售超过 30 件商品 基本上 它是针对机器人的保护 我想逻辑一定是这样的 获取购买时客户的 IP 并将其存储在订单元中 检查过去 24 小时内是否有来自该 IP 的其他购买 如果
  • 如何将R中积分的结果分配给数值变量?

    R 示例 k 6 f lt function s s k 1 exp s integrate f 0 Inf 积分的输出是字符串 120 with absolute error lt 7 3e 05 我想将字符串中的第一个值 120 积分
  • 数据框为一列选择最大值,但输出另一列的值

    我有一个数据框 其值类似于下面 A10d B10d C10d A B C Strategy 20 10 5 3 5 1 3 该策略选择 A10d B10d C10d 中的最大值并返回 A B C 的值 在这种情况下 A10d 是最大的 策略
  • Susy grid - 有什么(简单?)方法可以使“列”具有相同的高度?

    让我的脚接触 Susy sass haml 等 使用调整后的中间人 来自主分支的最新 susy 在 grid css scss 中有这个 import susy total columns 8 column width 4em gutter
  • Perl 主机到 IP 解析

    我想将主机名解析为 IP 地址 使用以下 Socket 就可以了 ip gethostbyname host or die Can t resolve ip for host n ip inet ntoa inet aton host 这工
  • Gradle 相关任务不会将命令行选项传递给父任务

    我正在编写一个自定义 Gradle 任务 它接受来自命令行的选项 该部分按预期工作 导致我出现问题的是 调用依赖任务时 命令行选项被拒绝 因为它与依赖任务无关 这是演示该问题的示例 class CustomTask extends Defa
  • 将图标添加到自定义 WooCommerce 支付网关

    我想向我的支付网关添加自定义图标 我已阅读 WOO 网关 API 但获得的帮助为零 这是我下面的代码 请帮助我找到一种包含该图标的实用方法 以便我的前端有一个图标 谢谢
  • 在 Struts 2 中动态生成电子邮件模板

    场景是用户请假 当他请求休假时 系统会向审批者和用户发送一封电子邮件 其中包含有关休假的详细信息 我被困在这一点上 如何创建一个模板 该模板将根据请求休假的用户的名称自动更新 我看到了 asp net 应用程序 它是通过使用类似的东西在模板
  • 为什么Java中没有SortedList?

    在Java中有SortedSet and SortedMap接口 两者都属于Java集合框架并提供访问元素的排序方式 然而 据我了解 没有SortedList在爪哇 您可以使用java util Collections sort 对列表进行
  • 静态解析符号值时遇到错误。不支持函数调用。考虑替换函数或 lambda?

    尝试启动 npm 时出现错误 Error encountered resolving symbol values statically Function calls are not supported Consider replacing
  • 从进程获取实时输出

    我的项目有问题 我想启动一个进程 7z exe 控制台版本 我尝试了三种不同的方法 Process StandardOutput ReadToEnd 已接收输出数据 开始输出读取行 流写入器 什么都不起作用 它总是 等待 过程结束以显示我想
  • Ruby:无法在 Windows 上安装 Watir Gem

    瓦提尔的网站说我需要 Ruby 1 8 6 我正在运行它 Windows 安装应该像这样简单gem install watir 但是当我运行它时 我得到了这个 C Users Ryguy Code gt gem install watir
  • 在循环 R 中迭代时从函数返回值

    我已经远离了 R 中的函数 但认为这是更好的做法 现在我有这个问题 我写我的函数 myFunction lt function tab takes tabular input inP lt c for x in 1 dim tab 1 it
  • 增强 PowerShell 脚本以查询 AsBuiltReport 框架内 GPO 上的端口

    我得到了当前的脚本 来自这个答案 我想改进 如果在入站方向内启用并允许这些端口 则脚本应检索所需的端口 操作 启用 方向的过滤器工作完美 但我仍然需要本地端口的过滤器仅检索定义端口内的唯一结果 但仍显示其他端口 附加问题 如何将机器的 IP
  • 长按监听器 ListActivity 类

    我有一个使用 ListView 的应用程序 我设置了 onListItemClick 事件来查看有关联系人的详细信息 我想实现 onLongListItemClick 来显示一个对话框 但我不知道为什么它不起作用 我的意思是什么也没有发生
  • Visual Studio Code c++11 扩展警告

    我正在学习 C 并且正在使用 Mac 版 Visual Studio Code 我使用 Code Runner 来运行我的程序 我的问题是 当我使用 c 11 中的某些内容 如 auto 进行变量声明时 Visual Studio Code
  • 如何自定义UITabBarController的“更多”按钮?

    我将 UITabBarController 添加为 RootView 并且我还知道当您有超过 5 个 tabBarItem 时 会自动添加 更多 按钮 所以一切都很完美 但我有两个问题 1 如何在 更多 TabBarItem上设置图像 2
  • Mapbox GL JS 在图层中的特定功能上设置 Paint 属性

    我使用 Mapbox Studio 作为地图和样式的基础 然后使用 HTML 来实现其他地图功能 其中一项功能是在悬停或鼠标输入时更改图标不透明度 当您直接在 HTML 中创建它时 我检查了其他示例和所有其他参考功能 我设法改变不透明度 但