当前位置: 首页 > news >正文

mapbox 工作问题暂时记录

mapbox 工作问题暂时记录

  • mapbox样式修改
    • 1.
    • 2.
    • 3.
    • 4.

mapbox样式修改

1.

mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式

2.

 map.value.getStyle().layers

这行代码可以获取页面中所有图层,可以判断图层id来做相应操作

3.

map.value.setLayoutProperty(layer.id, 'visibility', 'visible')//图层显示
map.value.setLayoutProperty(layer.id, 'visibility', 'none');//图层隐藏

layer.id为map.value.addlayer里的id

4.

vue3 echarts 报错 TypeError: this.dom.getContext is not a function

<div class="boxConten" v-for="item in listData" :key="item"><ul class="point-information-box" v-if="item.ranking == '1'"></ul><div class="barchart-box" v-else-if="item.ranking == '2'"><!-- 方法一: --><!-- <div ref="EchartsRef" :ref="pushBtnList" style="width: 150px; height: 140px"></div> --><!-- 方法二: --><div :ref="pushBtnList" style="width: 150px; height: 140px"></div></div><div class="barchart-box" v-else-if="item.ranking == '3'"></div><div class="barchart-box" v-else></div></div>
const listData = ref([{title: '当年统计详情',ranking: '1',list: [[{ num: 98, unit: '(%)', name: '检测点合格率' },{ num: 100, unit: '(%)', name: '样品合格率' },],[{ num: 356, unit: '(次)', name: '检测总次数' },{ num: 486, unit: '(个)', name: '样品总量' },],[{ num: 25, unit: '(次)', name: '指标异常总次数' },{ num: 4, unit: '(个)', name: '异常指标总数量' },],],},{title: '近12月合格率曲线',ranking: '2',switchoverText: [{ name: '检测点', show: true },{ name: '样品', show: false },],show: true,},{title: '近12月合格率曲线',ranking: '3',switchoverText: [{ name: '指标异常次数', show: true },{ name: '异常指标数量', show: false },],show: true,},{ title: '近12月异常指标占比', ranking: '4' },
]);
const EchartsRef = ref();
const pushBtnList = (el) => {EchartsRef.value = el;
};
onMounted(() => {initChart();
});
const initChart = () => {// 初始化图表let timeArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];let valueArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];initecharts(timeArr, valueArr);
};//加载echarts图
const initecharts = (timeArr: any[], valueArr: any[]) => {//方法一//let myEcharts = echarts.init(EchartsRef.value[0] as unknown as HTMLElement);//方法二let myEcharts = echarts.init(EchartsRef.value as unknown as HTMLElement);let option = {tooltip: {trigger: 'axis',},grid: {right: '3%',left: '5%',},xAxis: {type: 'category',data: timeArr,// gridIndex: index,axisLabel: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 10,color: '#3D3D3D',},axisTick: {show: false,},axisLine: {show: false,},splitLine: {show: true,lineStyle: {color: '#EBF0F5',},},},yAxis: {type: 'value',name: '',nameTextStyle: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 12,color: '#3D3D3D',},axisLabel: {fontFamily: 'OPPOSans',fontWeight: 500,fontSize: 10,color: '#3D3D3D',},splitLine: {show: true,lineStyle: {color: '#EBF0F5',},},axisLine: {show: false,},axisTick: {show: false,},},dataZoom: [{type: 'slider',show: true,xAxisIndex: [0],start: 0,end: 100,backgroundColor: 'none',fillerColor: 'rgba(168, 177, 188, 0.14);', //选中范围的填充颜色borderColor: '#EBF0F5',},{type: 'inside',xAxisIndex: [0],},],series: [{data: valueArr,type: 'line',smooth: true,},],};myEcharts.setOption(option);// 监听窗口变化,echarts重绘window.addEventListener('resize', function () {myEcharts.resize();});
};

报错总结: v-for 循环会影响到dom的生成, for循环了 会出现多个dom,你ref参数 由原来的 一个 变成了多个
方法一: 在for循环里生成echarts 使用ref绑定, 获取时需要[0]
方法二: 在for循环里生成echarts 使用动态ref绑定, 在pushBtnList里面赋值给 echarts绑定的值,并且不需要下标取值

持续更新…

相关文章:

mapbox 工作问题暂时记录

mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. mapbox样式修改 1. mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式 2. map.value.getStyle().layers这行代码可以获取页面中所有图层,可以判断图层id来做相应操作 3. map.value.setLayoutProperty(layer.id…...

Linux、Docker、Brew、Nginx常用命令

Linux、Docker、Brew、Nginx常用命令 Linuxvi编辑器文件操作文件夹操作磁盘操作 DockerBrewNginx参考 Linux vi编辑器 Vi有三种模式。命令模式、输入模式、尾行模式&#xff0c;简单的关系如下&#xff1a; i -- 切换到输入模式&#xff0c;在光标当前位置开始输入文本。&a…...

【Spring实战项目】SpringBoot3整合WebSocket+拦截器实现登录验证!从原理到实战

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…...

第二证券|政策利好不断,工业母机概念爆发,华东数控等涨停

工业母机概念10日盘中大幅走高&#xff0c;截至发稿&#xff0c;恒进感应、宏德股份、华东重机、华东数控等涨停&#xff0c;凯腾精工涨超20%&#xff0c;创世纪涨逾11%&#xff0c;华辰配备、盘古智能涨超9%&#xff0c;博亚精工涨逾8%。 音讯面上&#xff0c;工业和信息化部…...

Thinkphp5萤火商城B2C小程序源码

源码介绍 Thinkphp5萤火商城B2C小程序源码&#xff0c;是一款开源的电商系统&#xff0c;为中小企业提供最佳的新零售解决方案。采用稳定的MVC框架开发&#xff0c;执行效率、扩展性、稳定性值得信赖。 环境要求 Nginx/Apache/IIS PHP5.4 MySQL5.1 建议使用环境&#xff…...

PostgreSQL介绍

PostgreSQL是一个高度先进的对象关系型数据库管理系&#xff08;ORDBMS&#xff09;&#xff0c;其起源可以追溯到1986年&#xff0c;最初是加州大学伯克利分校计算机系的一个项目&#xff0c;名为POSTGRES。它是从Ingres项目演变而来的&#xff0c;目的是克服当时关系数据库系…...

简析数据安全保护策略中的十个核心要素

数据显示&#xff0c;全球企业组织每年在数据安全防护上投入的资金已经超过千亿美元&#xff0c;但数据安全威胁态势依然严峻&#xff0c;其原因在于企业将更多资源投入到数据安全能力建设时&#xff0c;却忽视了这些工作本身的科学性与合理性。因此&#xff0c;企业在实施数据…...

Python+Django+Html河道垃圾识别网页系统

程序示例精选 PythonDjangoHtml河道垃圾识别网页系统 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoHtml河道垃圾识别网页系统》编写代码&#xff0c;代码整洁&#xff0c;规…...

BUUCTF:BUU UPLOAD COURSE 1[WriteUP]

构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的&#xff0c;只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传&#xff0c;那就用MaxHacKBar来执行 …...

从零开始学习:如何使用Selenium和Python进行自动化测试?

安装selenium 打开命令控制符输入&#xff1a;pip install -U selenium 火狐浏览器安装firebug&#xff1a;www.firebug.com&#xff0c;调试所有网站语言&#xff0c;调试功能 Selenium IDE 是嵌入到Firefox 浏览器中的一个插件&#xff0c;实现简单的浏览器操 作的录制与回…...

【linux基础】bash脚本的学习:定义变量及引用变量、统计目标目录下所有文件行数、列数

假设目的&#xff1a;统计并输出指定文件夹下所有文件行数 单个文件可以用 wc -l &#xff1b;多个文件&#xff0c;可以用通配符 / 借助bash脚本 1.定义变量名&#xff0c;使用引号 a"bestqc.com.map" b"Anno.variant_function" c"enrichment/GOe…...

算法四十天-删除排序链表中的重复元素

删除排序链表中的重复元素 题目要求 解题思路 一次遍历 由于给定的链表是排好序的&#xff0c;因此重复的元素在链表中的出现的位置是连续的&#xff0c;因此我们只需要对链表进行一次遍历&#xff0c;就可以删除重复的元素。 具体地&#xff0c;我们从指针cur指向链表的头节…...

Linux-等待子进程

参考资料&#xff1a;《Linux环境编程&#xff1a;从应用到内核》 僵尸进程 进程退出时会进行内核清理&#xff0c;基本就是释放进程所有的资源&#xff0c;这些资源包括内存资源、文件资源、信号量资源、共享内存资源&#xff0c;或者引用计数减一&#xff0c;或者彻底释放。…...

【LeetCode热题100】【二叉树】二叉树的最大深度

题目链接&#xff1a;104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 最大深度等于左子树的最大深度和右子树的最大深度中的较大者加一 class Solution { public:int maxDepth(TreeNode *root) {if (!root)return 0;return max(maxDepth(root->left), max…...

想做产品经理,应该选择什么专业?

产品经理作为互联网公司的核心职位&#xff0c;一直以来备受关注。随着互联网的不断发展&#xff0c;产品经理的需求也越来越高&#xff0c;很多人都想要了解哪些专业适合做产品经理。本文将为大家介绍几个适合做产品经理的专业。 1、心理学相关专业 C端产品工作的本源&#x…...

[机器学习Day 1~3

[机器学习]Day 1~3 数据预处理第1步&#xff1a;导入库第2步&#xff1a;导入数据集第3步&#xff1a;处理丢失数据第4步&#xff1a;解析分类数据创建虚拟变量 第5步&#xff1a;拆分数据集为训练集合和测试集合第6步&#xff1a;特征量化 简单线性回归模型第一步&#xff1a;…...

Day106:代码审计-PHP原生开发篇文件安全上传监控功能定位关键搜索1day挖掘

目录 emlog-文件上传&文件删除 emlog-模板文件上传 emlog-插件文件上传 emlog-任意文件删除 通达OA-文件上传&文件包含 知识点&#xff1a; PHP审计-原生开发-文件上传&文件删除-Emlog PHP审计-原生开发-文件上传&文件包含-通达OA emlog-文件上传&文件…...

数码视讯Q7盒子刷armbian遇到的坑之二

继续&#xff0c;nand的q7 搜遍全网&#xff0c;这个盒子能用的安卓映像有两个&#xff0c;一个本站付费下载的那个&#xff0c;另一个是20191218-Q7-nand-4.4.2-root-twrp-Milton这个映像&#xff08;具体地址自己搜索吧&#xff09;。第一个需要license&#xff0c;需要自己…...

vue2 使用vue-org-tree demo

1.安装 npm i vue2-org-tree npm install -D less-loader less安装 less-loader出错解决办法&#xff0c;直接在package.json》devDependencies下面加入less和less-loader版本&#xff0c;然后执行npm i &#xff0c;我用的nodejs版本是 16.18.0&#xff0c;“webpack”: “^4…...

【数据结构】考研真题攻克与重点知识点剖析 - 第 7 篇:查找

前言 本文基础知识部分来自于b站&#xff1a;分享笔记的好人儿的思维导图与王道考研课程&#xff0c;感谢大佬的开源精神&#xff0c;习题来自老师划的重点以及考研真题。此前我尝试了完全使用Python或是结合大语言模型对考研真题进行数据清洗与可视化分析&#xff0c;本人技术…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

Mac软件卸载指南,简单易懂!

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...