vue3中mars3d通过滑动条去改变地图图层的透明度

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

加滑动条

因为我这个存在单选框,在点击滑动条的时候 会出现将单选框选中的问题,所以用了一个div把滑动条包裹起来并加了冒泡
在这里插入图片描述

changeLiveSituationBg方法

// 改变底图显示颜色 val是我点击这个单选框对应值
const changeLiveSituationBg = val => {
// mapWork是我定义的地图相关方法的总称mapWork.changeAlpha(val);
};// 修改地图透明度
// 当时是专门写在一个文件里面的
export function changeAlpha(val) {// 当地图没有对应的id地图 就不执行if (!map.getLayerById(val.key)) {return;}// 找到对应的地图idlet layersArr = map.getLayers().filter(item => item.options.id.toString().indexOf(val.key) != -1);// 给图层加上opacity  被注释代码相当于重新设置属性layersArr.forEach(item => {// let ops = map.getLayerById(item.options.id).options;// map.getLayerById(item.options.id).setOptions({//   ...ops,//   opacity: Number((val.bgRgba / 100).toFixed(1))// });// 直接修改map.getLayerById(item.options.id)["opacity"] = Number((val.bgRgba / 100).toFixed(1));});
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/795718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

5G智慧地铁数字孪生可视化平台,推进铁路行业数字化转型

随着科技的快速发展,5G智慧地铁数字孪生可视化平台正逐渐成为铁路行业数字化转型的重要推动力。巨蟹数科数字孪生平台集成了5G通信技术、大数据分析、云计算和人工智能等先进技术,通过构建数字孪生模型,实现对地铁运营全过程的实时监控、预测…

互联网大厂都在用的DevOps工具,看看你会几样?

关注公众号:“DevOps实战派”,获取更多DevOps和运维的精彩内容。 DevOps 是一种强调开发与 IT 运营之间合作的软件开发范式,主要依靠自动化来优化流程、提高生产力并确保及时、可靠的软件交付。 下面,我将介绍目前在互联网大厂中…

【7】双向循环链表

【7】双向循环链表 1、双向循环链表2、添加3、删除 1、双向循环链表 🖊 头节点的 prev 指向尾节点 🖊 尾节点的 next 指向头节点 2、添加 /*** 往索引位置添加元素*/Overridepublic void add(int index, E element) {checkIndex4Add(index);if (index s…

《QT实用小工具·十三》FlatUI辅助类之各种炫酷的控件集合

1、概述 源码放在文章末尾 FlatUI辅助类之各种炫酷的控件集合 按钮样式设置。文本框样式设置。进度条样式。滑块条样式。单选框样式。滚动条样式。可自由设置对象的高度宽度大小等。自带默认参数值。 下面是demo演示: 项目部分代码如下所示: #ifnd…

“人性化设计”技术概要

本文是由《埃森哲技术愿景 2024:“人性化设计”技术将通过提高生产力和创造力来重塑行业并重新定义领导者》这个文章来翻译解读的。原文地址如下,大家可以自行下载: 下载地址 其实看到这篇文章的时候,联想到这些年机器人的市场发展…

一站式指南:Flutter应用如何顺利登陆苹果App Store

引言 🚀 Flutter作为一种跨平台的移动应用程序开发框架,为开发者提供了便利,使他们能够通过单一的代码库构建出高性能、高保真度的应用程序,同时支持Android和iOS两个平台。然而,完成Flutter应用程序的开发只是第一步…

Spark-Scala语言实战(10)

在之前的文章中,我们学习了如何在spark中使用RDD的filter,distinct,intersection三种方法。想了解的朋友可以查看这篇文章。同时,希望我的文章能帮助到你,如果觉得我的文章写的不错,请留下你宝贵的点赞,谢谢。 Spark-…

ThingsBoard通过MQTT发送遥测数据

MQTT基础 客户端 MQTT连接 遥测上传API 案例 MQTT基础 MQTT是一种轻量级的发布-订阅消息传递协议,它可能最适合各种物联网设备。 你可以在此处找到有关MQTT的更多信息,ThingsBoard服务器支持QoS级别0(最多一次)和QoS级别1&…

我的C++奇迹之旅:内联函数和auto关键推导和指针空值

文章目录 📝内联函数🌠 查看内联函数inline方式🌉内联函数特性🌉面试题 🌠auto关键字(C11)🌠 auto的使用细则🌉auto不能推导的场景 🌠基于范围的for循环(C11)🌠范围for的…

C语言----找出10个整数中的最大值

今天让我们来看看如何找出10个数的最大值吧。 题目描述 今天杰克在做数学题目的时候产生了思考,我应该怎么才能找出10个数的最大值呢,给大家一道题目,帮帮杰克吧,现有数组int arr[] { 1,2,15,4,8,6,23,8,9,10 };,使用…

【Consul】基于Golang实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制

【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制 大家好 我是寸铁👊 总结了一篇【Consul】基于Go实现Consul服务的注册、注销、修改、监控注册的服务变化、实时同步服务信息机制✨ 这应该是目前全网最全的使用golang手…

AttributeError: ‘FreeTypeFont‘ object has no attribute ‘getsize‘

说明:在一次程序读取字体样式,想要获取字体尺寸时,报下面的错误; AttributeError: FreeTypeFont object has no attribute getsize问题 # 加载字体样式和设置字体大小font ImageFont.truetype("SourceCodePro-Bold.ttf&quo…

网络原理 - HTTP / HTTPS(5)——https协议

目录 一、HTTPS是什么 为什么要进行加密 二、“加密” 是什么 三、HTTPS的工作过程 (1)引入对称加密 对称密钥的特点: (2)引入非对称加密 非对称加密的特点: (3)中间人攻击…

JavaScript流程控制语句

目录 前言: 1.JavaScript的组成: 1.1ECMAScript: 1.2DOM (Document Object Model): 1.3BOM (Browser Object Model) 2.js的写法: 2.1内部写法: 2.2 外部写法: 3.流程控制语句: 3.1从这开始,代码更具有逻辑性: 3.2从这开始&#xff0c…

数据结构之顺序表的相关知识点及应用

个人主页(找往期文章包括但不限于本期文章中不懂的知识点):我要学编程(ಥ_ಥ)-CSDN博客 目录 顺序表的概念及结构 顺序表的分类 顺序表的实现 在顺序表中增加数据 在顺序表中删除数据 在顺序表中查找数据 顺序表源码 顺序表的概念…

安全的通信协议HTTPS被攻击改采用什么防护方案

随着互联网的发展,保护用户在网上交换的敏感信息的安全性变得至关重要。HTTPS(Hypertext Transfer Protocol Secure)作为一种安全的通信协议,通过加密数据传输,保护用户的隐私和数据安全。然而,尽管HTTPS提…

Java配置自定义校验

1、自定义注解State message、groups、payload package com.zhang.anno;import com.zhang.validartion.StateValidation; import jakarta.validation.Constraint; import jakarta.validation.Payload;import java.lang.annotation.*;import static java.lang.annotation.Eleme…

list的使用

前言 我们前面已经对string和vector进行了学习使用,以及对他们的底层进行了模拟实现!本期我们继续学习STL的另外一个容器---list。 本期内容介绍 什么是list? list的常用接口 什么是list? 还是来看看官方的文档说明! 这里通过…

钉钉事件订阅前缀树算法gin框架解析

当钉钉监测到发生一些事件,如下图 此处举例三个事件user_add_org、user_change_org、user_leave_org,传统的做法是,我们写三个if条件,类似下图 这样字符串匹配效率比较低,于是联想到gin框架中的路由匹配算法&#xff0…

jangow-01-1.0.1 靶机渗透

信息收集部分: 1.nmap存活探测: 2.nmap端口探测: 3.nmap服务探测: 这里应该是21和80端口,,但21需要登陆访问,用不了,问题不大。 web: 页面: 发现RCE: 1.we…