javascript - 无法使用mapbox-gl.js向mapbox map 添加标记

Question

我拼命尝试使用带有 typescript 的mapbox-gl-js 向mapbox map 添加一些标记，并且我遵循了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 map 对象的图层。 map 显示没有任何问题，但我无法添加一些具有所需 geojson 格式的标记。

我的目标是动态添加标记，但这里我坚持添加一些静态标记。

你知道这里出了什么问题吗？

问候马可

Answer 1

有两种主要方法可以将“标记”添加到 Mapbox GL JS，

1. 使用标记，例如 https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/这会将图像添加为 DOM 元素。

2. 使用符号，例如 https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/这会将图像添加为 WebGL Canvas 的一部分。您需要确保加载您使用的图像，例如。 https://docs.mapbox.com/mapbox-gl-js/example/add-image/