地图层不会在初始加载后再次呈现

Question

我正在使用 VueMapbox (0.4.1) 在 Vue 项目中使用 Mapbox GL。

<template>
  <MglMap
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
    :repaint="true"
    @load="onMapLoaded">
    <MglMarker
      :coordinates="someCoordinates"
      class="map-marker-wrapper">
      <div
        slot="marker"
        class="map-marker">
      </div>
    </MglMarker>
  </MglMap>
</template>

<script>
import Mapbox from 'mapbox-gl'
import { MglMap, MglMarker } from 'vue-mapbox'
import * as MAP from '@/constants/map'

// Vue-Mapbox documentation: https://soal.github.io/vue-mapbox/guide/basemap.html#adding-map-component

export default {
  name: 'Map',
  components: {
    MglMap,
    MglMarker
  },
  props: {
    someCoordinates: {
      type: Array,
      required: true
    },
    darkMode: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      accessToken: MAP.ACCESS_TOKEN,
      mapbox: null,
      map: null,
      actionsDispatcher: null
    }
  },
  computed: {
    mapStyle () {
      return this.darkMode ? MAP.COLOR_PROFILES.DARK : MAP.COLOR_PROFILES.LIGHT
    }
  },
  created () {
    this.mapbox = Mapbox
  },
  methods: {
    async onMapLoaded (event) {
      this.map = event.map
      this.actionsDispatcher = event.component.actions
    
      await this.actionsDispatcher.flyTo({
        center: this.someCoordinates
      })
    }
  }
}
</script>

第一次加载时，一切正常：

但是如果我移动到不同的伪路线（比如从 /#/Map 到 /#/Profile 然后返回），我的 mapStyle 指定的某些地图图层（道路、城市名称，..）不再渲染（改为默认层）。即使我在模板中指定了 mapStyle.sync，地图也不再支持 mapStyle url 的任何更改。

如果我点击浏览器的重新加载按钮，它会按预期加载图层，因为整个应用程序是从头开始重新加载的，但不幸的是，默认情况下我不能这样做。

非常感谢任何想法。

Answer 1

尽管我不知道 Vue.js 的语法，但您面临的问题是您在 map.on('load', ... 中创建图层，这是一个只发生一次的事件，所以当发生样式更改，地图样式的所有图层（包括由自定义代码创建的图层）都将被删除。
如果您想在样式更改时重新创建图层，则必须在事件 map.on('style.load', ... 中执行此操作，但如前所述，我在您的 vue.js 代码中看不到执行此操作的位置。如果您分享 vue.js 调用方法的代码部分，它将更容易帮助您

Answer 2

我找到了解决方法，在vue-mapbox的例子中，变量map（this.map）被设置为“event.map”导致错误，因为之后没有刷新卡片。

在我的例子中，我只是在我的 onMapLoaded 函数中删除了那个 (this.map = event.map)，这很棒。

祝你有美好的一天。

地图层不会在初始加载后再次呈现

Map layers do not render again past initial load

javascript

mapbox

vue.js

mapbox-gl