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编辑器中，您需要确保实际上有一个名为＆＃34; marker-11＆＃34;的图标。在你的图标库中。如果没有，它不知道你在引用什么，并默认为一个点。

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

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

2 个答案: