Как добавить маркеры геойсона в Mapbox с помощью Vue - PullRequest
Новая
       35

Как добавить маркеры геойсона в Mapbox с помощью Vue

0 голосов
/ 25 февраля 2019

Я пытаюсь использовать несколько компонентов в Vue для отображения карты, содержащей маркеры геойсона.

Основной компонент берет геойсон, полученный из API-выборки, и передает его этому компоненту в качестве реквизита.

В initMap () реквизит, содержащий геойсон, передается в eventsObject в data (), который впоследствии передается в addLayer ({}) как значение для его источника {data:}

У меня нет 'я не передал что-либо в макет {}, потому что я не знаю, что туда добавить для отображения маркеров.

Я знаю, что значения prop и eventsObject - это геоджон из api fetch, но я неt знать, передается ли правильному аргументу 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>
...