如果你尝试将mapbox-gl引入vue环境,制作组件或者组件库,你会遇到这样的一个问题,就是你将mapbox-gl实例化以后的对象如果绑定到Vue的data选项里(将其设置为响应式对象)就会产生出一个很严重的bug,就是你调用addLayer接口的时候加载的图层样式发生错乱。
正常情况下你可能写出了如下的错误代码:
data(){
return{
map:null
}
},
mounted(){
this.map=new mapboxgl,Map({
zoom:10,
center:[100.52454,35.25451]
})
//处理别的业务逻辑...
this.map.addLayer({
id:'id',
source:{
type:'geojson',
data:data
},
paint:{
fill:'#5fe5ee',
}
})
}
然而你发现你写完addLayer方法之后,图层是加载到地图上了,但是它的样式不对。并且无论你如何改颜色,他都是保持一种样式不变。并且我发现每个人遇到的样式错乱还不一样,具体原因也不清楚,但是最核心的问题还是在于将这个实例