添加图层时，Mapbox 样式在缩放时发生变化/中断

我有一个 mapbox 地图，使用 Outdoor-v9 样式初始化（​​尝试了其他样式，相同的行为）。当我向地图添加图层 - 标记或 geojson 源并缩放地图时，样式会发生变化或中断，我不确定是哪一个。

This is the map before the zoom

and after the zoom

这是初始化地图和添加标记的函数

mapboxgl.accessToken = "pk.*******";


buildMap: function() {
  const _self = this;
  _self.map = new mapboxgl.Map({
    container: "map",
    style: "mapbox://styles/mapbox/outdoors-v9",
    center: [-95.712891, 37.09024],
    zoom: 3
  });

  _self.map.on('load', function() {
    _self.map.addSource('route', {
      'type': 'geojson',
      'data': {
            "type": "FeatureCollection",
            "features": []
      } 
    });

    _self.map.addLayer({
        'id': 'route',
        'source': 'route',
        'type': 'line',
        'layout': {
          'line-join': 'round',
          'line-cap': 'round'
        },
        'paint': {
          'line-color': '#47576A',
          'line-width': 3
        }
      });
  });
}

...

const coords = [addressData.longitude, addressData.latitude];

const marker = new mapboxgl.Marker().setLngLat(coords).addTo(this.map);

我正在使用 Vue.js 渲染地图。 Mapbox 版本 v0.45.0

非常感谢任何帮助或线索

Vue data()属性是反应性的，它们有getters and setters，因此，当加载地图对象或添加矢量图块层（geojson）时，Vue 尝试向map & map.layers这会导致 vue 和 vue-dev-tools 崩溃并弄乱地图。

如果启用任何栅格图层，它将成功工作，因为栅格切片是通过 mapbox.css 加载的，而矢量切片是 geojson，会添加到map object.

最简单的解决方案是在 vue 中定义一个非响应变量，然后在任何地方重复使用它。

// 编辑：设置非反应性数据的正确/推荐方法：GitHub 链接 https://github.com/vuejs/vue/issues/2637#issuecomment-207076744