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 = map
		window.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
达咩