如何使用Vue将geojson标记添加到Mapbox中

Question

我正在尝试在Vue中使用多个组件来显示包含geojson标记的地图。

主要组件采用从api提取中获取的geojson并将其作为道具传递给该组件。

在initMap（）中，将包含geojson的道具传递给data（）中的eventsObject，然后将其作为源{data：}的值传递给addLayer（{}）。

我没有将任何内容传递给layout {}，因为我不知道在其中放置什么用于显示标记。

我知道prop和eventsObject的值是来自api提取的geojson，但是我不知道addLayer（{}）是否传递了正确的参数。

该地图除了无法显示任何标记外，还可以完美运行。

<template lang="html">
  <div id="event-map"></div>
</template>

<script>
export default {
  name: 'event-map',
  props: ['events'],
  data(){
    return {
      mapObject: null,
      eventsObject: null,
    };
  },
  mounted(){
    this.initMap();
    this.handleContextLoss();
  },
  methods: {
    initMap(){
      var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');

      mapboxgl.accessToken = 'my token';

      this.mapObject = new mapboxgl.Map({
        container: 'event-map',
        style: 'mapbox://styles/mapbox/satellite-v9',
      });

      this.eventsObject = this.events;

      this.mapObject.on('load', function(){

        this.mapObject.addLayer({
          "id": "points",
          "type": "symbol",
          "source": {
            "type": "geojson",
            "data": this.eventsObject,
          },
          "layout": {

          }
        });
      });
    },
    handleContextLoss(){
      var canvas = document.getElementById("event-map");
      canvas.addEventListener("webglcontextlost", function(event) {
        event.preventDefault();
      }, false);
    },
  },
}
</script>