vue2由mapbox2升级为mapbox3遇到的矢量底图样式丢失问题解决办法

贴个群号

WebGIS学习交流群461555818,欢迎大家

心路历程

当vue2由mapbox2升级为mapbox3的时候,您可能会遇到以下的问题
所有的代码都没有改变,升级为mapbox3就会出现部分矢量底图样式丢失,表现为图层已经成功加上,但是打印图层信息的话,会发现属性layout和paint属性没有,虽然我们加图层的前一秒打印layer信息,layout和paint信息都在,但是addlayer之后,却不存在了。

开始我以为是style出现的问题,因为我们使用的style是自己搞的,后来使用官方的矢量底图进行测试,也是同样的问题,而且不是写法的问题,mapbox2和mapbox3的写法是相同的。后来以为是setstyle一下加了太多的图层,mapbox没有反应过来,于是搞了一下一个一个的加,问题还是没有解决。但是好奇的是我们在使用官方的那些示例html其实不会出现这种问题,只有将其引入vue2才会出现问题。

于是我们就观察两种方法的区别,写法完全一样,区别貌似只有在声明map的时候,一个是var let,一个是this.map = …存在了data里面,这个会不会是问题出现的原因呢?抱着试试看的想法,使用let 来声明map,不将map实例存在data里面,结果还真的好使了。

至于为什么存在data里面就不好使了,研究了很久还是不清楚原因。但是我们为了组件通信,还是很有必要解决这个问题的,于是就想到了别的办法,比如vuex来存map实例,但是试了一下也是不行的。经过多方面的测试,终极解决办法只有两个,一是升级为vue3,二是将map挂载到window下。其实在cesium使用中,挂载到window中是很常见的写法,但是在mapbox中却是没有这样考虑过,这下我们就使用window来挂载map。

实操

接下来是更新mapbox3由window来挂载map的一些细节
1、声明map

		let map = new ....window.map = mapwindow.map.on(...)

2、样式调整,诸如popup、ctrl等的class名字可能会有变更,需要重新找一下更改一下对应的class名字

3、将map通过组件传值的方法

由于map不存在于data中了,所以这种传值要改掉,但是也不能改为window.map,因为这种写法会认为你在data里面有一个window对象,,,建议不传值了,反正都是window.map,别的页面也就直接用就完事儿了

<aaaa :map="map"></aaaa>

4、跟map有关的其他控件
比如popup、marker等相关的也不能在data里面存了,也挂在window下
5、跟map有关的插件
比如draw绘画插件、compare卷帘插件等等,声明的时候也不可以在data里面,改为挂在window下
6、在vuex里存的map内容
不能在data里面存,也不能在vuex里面存了
7、class类里传进来的map
达咩

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

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

相关文章

算法力扣刷题 三十一【150. 逆波兰表达式求值】

前言 栈和队列篇。 记录 三十一【150. 逆波兰表达式求值】 一、题目阅读 给你一个字符串数组 tokens &#xff0c;表示一个根据 逆波兰表示法 表示的算术表达式。 请你计算该表达式。返回一个表示表达式值的整数。 注意&#xff1a; 有效的算符为 、-、* 和 / 。 每个操作…

Django创建项目(1)

运行 注意 在本次创建Django项目时&#xff0c;出现了一点小问题&#xff0c;由于我之前pip换源过&#xff0c;换源用的是http&#xff0c;结果在创建时&#xff0c;pip只支持https&#xff0c;所以如果出现创建项目失败的问题&#xff0c;那么有可能是因为换源的问题&#xf…

(三十一)Flask之wtforms库【剖析源码下篇】

每篇前言&#xff1a; &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;【孤寒者】—CSDN全栈领域优质创作者、HDZ核心组成员、华为云享专家Python全栈领域博主、CSDN原力计划作者 &#x1f525;&#x1f525;本文已收录于Flask框架从入门到实战专栏&#xff1a;《Flask框架从入…

AlphaGo 背后的人工智能:机器学习和神经网络

文章目录 一、说明二、背景三、围棋游戏四、AlphaGo 算法五、神经网络六、AlphaGo 的未来七、人工智能的未来八、结论 一、说明 棋盘游戏围棋被视为人工智能最具挑战性的任务之一&#xff0c;因为它“复杂、基于模式且难以编程”。计算机程序 AlphaGo 战胜李世石成为人工智能和…

Redis 五大数据类型底层原理

0、前言 本文涉及的主题&#xff1a; redis 对象存储 底层数据结构&#xff1a;int、embstr、raw、ziplist、listpack、quicklist、skiplist、intset、hashtable redis 数据类型&#xff1a;string、list、set、zset、hash 1、对象存储、底层编码、数据类型 1.1 对象存储…

14-23 深度神经网络的主要架构(RNN/LSTM/CNN)

神经网络架构 神经网络的架构决定了这些网络如何运行&#xff0c;这是执行各种任务和扩展神经网络应用的关键因素&#xff0c;主要有两种方法&#xff1a;前馈神经网络和反馈神经网络。在本文中&#xff0c;在彻底分析每种方法之后&#xff0c;我们将对这两种架构进行深入比较…

规则·理解·成长:与自闭症儿童共绘记忆蓝图

在星贝育园&#xff0c;作为专注于自闭症儿童康复的专业教育者&#xff0c;我们常常遇到家长的疑惑&#xff1a;“为什么我的孩子总是记不清楚规则&#xff1f;”这个问题触及了自闭症谱系障碍&#xff08;ASD&#xff09;儿童在理解与遵守规则方面面临的独特挑战。下面&#x…

每日一题——Python实现PAT乙级1005 继续(3n+1)猜想(举一反三+思想解读+逐步优化)五千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码逻辑概述 时间复杂度分析 空间复杂度分析 总结 我要更强 代码优化点…

【MySQL基础篇】函数及约束

1、函数 函数是指一段可以直接被另一段程序程序调用的程序或代码。 函数 - 字符串函数 MySQL中内置了很多字符串函数&#xff0c;常用的几个如下&#xff1a; 函数功能CONCAT(S1,S2,...,Sn)字符串拼接&#xff0c;将S1,S2,...,Sn拼接成一个字符串LOWER(str)将字符串str全部…

【热部署】✈️Springboot 项目的热部署实现方式

目录 &#x1f378;前言 &#x1f37b;一、热部署和手动重启 &#x1f37a;二、热部署的实现 2.1 手动启动热部署 2.2 自动检测热部署 2.3 关闭热部署 &#x1f49e;️三、章末 &#x1f378;前言 小伙伴们大家好&#xff0c;书接上文&#xff0c;通过Springboot 中的 actu…

提升TK直播体验:使用美国直播网络的六大优势

国内有许多公司想在TikTok上进行美国直播&#xff0c;但由于TikTok的政策限制&#xff0c;在国内直接访问存在困难。然而&#xff0c;通过使用Ogcloud的美国直播网络&#xff0c;这一问题得以解决。那么&#xff0c;TikTok海外直播使用美国直播网络具体有哪些优势呢&#xff1f…

【懒删除堆 优先队列】1172. 餐盘栈

本文涉及知识点 懒删除堆 优先队列 LeetCode1172. 餐盘栈 我们把无限数量 ∞ 的栈排成一行&#xff0c;按从左到右的次序从 0 开始编号。每个栈的的最大容量 capacity 都相同。 实现一个叫「餐盘」的类 DinnerPlates&#xff1a; DinnerPlates(int capacity) - 给出栈的最大…

stm32中IIC通讯协议

参考资料&#xff1a;大部分均引用b站江协科技课程、GPT及网络资料 什么是IIC&#xff08;i2C&#xff09;通讯协议&#xff1f; 关键字&#xff1a;SCL、SDA、半双工、同步、串行。 IIC&#xff08;Inter-Integrated Circuit&#xff09;&#xff0c;也称为I2C&#xff08;In…

不同的llm推理框架

vLLM适用于大批量Prompt输入&#xff0c;并对推理速度要求比较高的场景。 实际应用场景中&#xff0c;TensorRT-LLM通常与Triton Inference Server结合起来使用&#xff0c;NVIDIA官方能够提供更适合NVIDIA GPU运行的高效Kernel。 LightLLM比较轻量、易于扩展、易于上手&…

Linux—KVM虚拟化中使用基本命令管理虚拟机(纯实例)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f468;‍&#x1f4bb;Linux高级管理专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年7月2日11点11分 &#x1f004;️文章质量&#xff1a;94分 文章目录 前言 1.查看命令帮助 2.查看KVM 的…

c/c++语言的一种日志的编写办法

今日分享一下&#xff0c;从某源码中看到这种日志编写方式&#xff0c;很强。可以借鉴。 这个函数调用的日志函数是不一样的&#xff0c;仔细观看&#xff1a; 这几种日志输出函数&#xff0c;背后都调用了相同的调用。 与之对应的区别就是&#xff0c;函数名称的差异取决于…

mpeg格式怎么转换成mp4?这四种转换方法非常好用!

mpeg格式怎么转换成mp4&#xff1f;在数字视频领域中&#xff0c;MPEG格式算是相对冷门的一种选择&#xff0c;然而&#xff0c;选择这种格式却不是没有代价的&#xff0c;首先&#xff0c;MPEG采用了有损压缩技术&#xff0c;这意味着在视频处理过程中&#xff0c;会丢失一些细…

单个企业年收入达24.7亿!银发游学市场按下“加速键”,兴趣教育平台抢滩布局

干货抢先看 1. 银发游学市场渐趋火热&#xff0c;美国最大的银发游学机构Road Scholar最新披露的财报显示&#xff0c;上个财年公司收入达3.395亿美元&#xff08;约合人民币24.7亿&#xff09;。 2. 在国内&#xff0c;一批专注银发兴趣教育的品牌纷纷入局&#xff0c;拓展游…

MYSQL8.0配置

1、下载安装包 2、解压软件包 将MySQL软件包解压在没有中文和空格的目录下 3、设置配置文件my.ini my.ini中加入以下内容 [client] #客户端设置&#xff0c;即客户端默认的连接参数 # 设置mysql客户端连接服务端时默认使用的端口 port3306#默认编码 default-character-set…

一个使用 g++ 模块化编译的 hello world 示例( Ubuntu 20.04 )

1. 确认 ubuntu 版本&#xff1a; 2. 文件夹结构&#xff1a; 3. 各个文件内容&#xff1a; 3.1. myadd.cpp&#xff1a; #include<iostream> using namespace std; int add_xxx( int a,int b ){int result a b;cout << a << " " << …