在Mapbox GL JS上选择标记和设置标记样式的正确方式是什么？

Question

我正在使用一个有点的Mapbox地图。我想知道添加标记符号的正确步骤。这是我的GeoJSON：

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89.12312324,
          13.686886
        ]
      },
      "properties": {
        "title": "Random Location",
        "description": "Individual"
      }
    }
]

以下是Mapbox文档中的一个示例：

map.addLayer({
        "id": "airport",
        "source": "airports",
        "source-layer": "ne_10m_airports",
        "type": "symbol",
        "layout": {
            "icon-image": "airport-15",
            "icon-padding": 0
        },
        "filter": ["in", "abbrev", ""]
    });

当我使用这个的时候

"layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }

我得到的是棕色的小圆点，而不是经典的记号笔。我正在使用

<script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />

我使用的是

style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location

我的整个脚本如下所示：

mapboxgl.accessToken = 'pk.mylongAkey';

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
        center: [-88.866245, 13.770391], // starting position
        zoom: 6 // starting zoom
    });

    var url = '/maps/index.json';
        var source = new mapboxgl.GeoJSONSource({
        data: url
    });

    map.on('load', function () {
        map.addSource('location', source);
        map.addLayer({
            "id": "map",
            "type": "symbol",
            "source": "location",
            "source-layer": 'location',
            "layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }
        });
    });

    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        // Populate the popup and set its coordinates
        // based on the feature found.
        var popup = new mapboxgl.Popup()
            .setLngLat(feature.geometry.coordinates)
            .setHTML(feature.properties.title)
        .addTo(map);
    });

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });

我是不是遗漏了什么？此外，弹出窗口不会弹出到点上方，而是弹出到图标上方。你不能用这个棕色的小点来区分，但是以火箭为例，弹出窗口在火箭的中间。谢谢!

这是一个截图

​

​

Answer 1

我正在使用一个有点的Mapbox地图。我想知道添加标记符号的正确步骤。在GeoJSON中这样做是否更好：

..。

或者更好地使用这样的布局：

..。

在GeoJSON中嵌入样式信息(前者)是一个名为simplestyle的规范，在GL JS中不受支持。使用布局(后者)是在GL JS中设置要素样式的唯一方法。

我得到的是棕色的小圆点，而不是经典的记号笔。

你能提供这个的截图吗？

Answer 2

在Mapbox Studio Editor中，您需要确保在图标库中确实有一个名为“marker 11”的图标。如果不是，它就不知道你引用的是什么，将默认为一个点。

否则，其他一切看起来都很好。