Не могу добавить маркеры на карту mapbox с mapbox-gl.js - PullRequest
Новая
       20

Не могу добавить маркеры на карту mapbox с mapbox-gl.js

0 голосов
/ 24 мая 2019

Я отчаянно пытаюсь добавить некоторые маркеры на карту mapbox, используя mapbox-gl-js с машинописью, и я следовал нескольким учебникам с сайта mapbox, но у меня это не работает. 

    mapboxgl.accessToken = 'mykey';

    this.map = new mapboxgl.Map({
      container: 'map',
      style: this.style,
      zoom: 13,
      center: [12, 12]
    });

    this.map.on('load', (event) => {

      this.map.addSource('testSrc', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [ 12, 12]
            },
            properties: {
              title: 'Mapbox',
              description: 'Washington, D.C.'
            }
          },
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-122.414, 37.776]
              },
              properties: {
                title: 'Mapbox',
                description: 'San Francisco, California'
              }
            }]
        }
  });

      this.map.addLayer({
        id: 'testSrc',
        source: 'testSrc',
        type: 'circle',
        layout: {
          'text-field': '{message}',
          'text-size': 24,
          'text-transform': 'uppercase',
          'icon-image': 'rocket-15',
          'text-offset': [0, 1.5]
        },
        paint: {
          'text-color': '#f16624',
          'text-halo-color': '#fff',
          'text-halo-width': 2
        }
      });

      this.map.addControl(new mapboxgl.NavigationControl());

    });

Я создал источник с некоторыми статическими данными и установил его на слой объекта карты mapboxgl. Карта отображается без проблем, но я не могу добавить некоторые маркеры с требуемым форматом geojson.

Моя цель - динамически добавлять маркеры, но здесь я застрял в добавлении некоторых статических.

Ты хоть представляешь, в чем тут проблема?

С уважением, Марко

1 Ответ

1 голос
/ 24 мая 2019

У вас есть два основных способа добавить «маркеры» в Mapbox GL JS,

  1. , используя маркер, например https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/, который добавит изображение в DOM-элемент.

  2. с использованием Symbol, пример https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/, который добавит изображение как часть холста WebGL.Вы должны убедиться, что изображение, которое вы используете, загружено, например.https://docs.mapbox.com/mapbox-gl-js/example/add-image/

...