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框架从入…

HTML简化

1.删除所有属性 javascript - Remove all attributes - Stack Overflow function delAttribute(element) {while (element.attributes.length > 0)element.removeAttribute(element.attributes[0].name); } var table document.getElementsByTagName(table); for (var i…

Linux修改服务器hostname方法

为了更好的区分服务器的辨识度&#xff1a; 提示&#xff1a;要修改两个文件&#xff0c;单一的修改一个后续怕出现不可预知的问题 修改hostname文件命令如下&#xff1a; seven-71则是我要修改的新hostname名称&#xff0c;下面三条命令&#xff0c;按顺序执行即可 hostnam…

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

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

C++后端开发--网络编程基础

目录 一、网络编程基础概念 1.1 网络协议 1.2 IP地址和端口号 1.3 Socket 1.4 TCP协议的三次握手和四次挥手 TCP的三次握手 TCP的四次挥手 整个流程更通俗易懂 TCP 三次握手流程图 TCP 四次挥手流程图 1.5 详细介绍一下http协议 HTTP协议的主要特点 HTTP请求 HTT…

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全部…

一文入门“机器学习-参数调整”实操

作者前言: 通过向身边的同事大佬请教之后&#xff0c;大佬指点我把本文的宗旨从“参数调优”改成了“参数调整”。实在惭愧&#xff0c;暂时还没到能“调优”的水平&#xff0c;本文只能通过实操演示“哪些操作会对数据训练产生影响”&#xff0c;后续加深学习之后&#xff0c;…

Python 学习中,什么是列表,如何操作列表?

什么是列表 在Python中&#xff0c;列表&#xff08;List&#xff09;是一种内置的数据结构&#xff0c;用于存储一系列有序的元素。列表中的元素可以是任意类型&#xff0c;比如整数、字符串、浮点数&#xff0c;甚至是另一个列表。列表是可变的&#xff08;mutable&#xff…

Android系统常见的crash分类error有那些?

Android系统常见的crash分类及其对应的error主要包括以下几类&#xff1a; 一、Java Application Crash Java Application Crash通常是由于Java层线程因未捕获异常而终止&#xff0c;由系统的void uncaughtException(Thread t, Throwable e)方法进行捕获和处理。这类crash常见…

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

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

git clone报错RPC failed; curl 92 HTTP/2 stream 7 was not closed cleanly

问题描述 git clone github上的项目报错: RPC failed; curl 92 HTTP/2 stream 7 was not closed cleanly: CANCEL (err 8) 4796 bytes of body are still expected fetch-pack: unexpected disconnect while reading sideband packet early EOF fetch-pack: invalid index-pac…

Selenium:原理与使用指南

文章目录 简介Selenium 的原理安装 Selenium基本使用示例代码说明 常用操作查找元素交互操作等待处理弹窗 高级功能截屏执行 JavaScript切换窗口 结论 简介 Selenium 是一个用于 Web 应用程序自动化测试的强大工具。它提供了一系列库和工具&#xff0c;支持多种浏览器和编程语…

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

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

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

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