无法在 Mapbox GL JS 中使用自定义标记

Question

我已经关注了 Mapbox 网站上的 example 和 GitHub 上的 this instruction，但无法在我的地图上显示标记：

http://codepen.io/znak/pen/waPPRj（使用 Mapbox 样式和精灵） http://codepen.io/znak/pen/PqOEyV（使用自定义样式和精灵）

var center = [51.5, -0.1];

var map = new mapboxgl.Map({
    container: 'map',
    center: center,
    zoom: 8,
    style: 'https://www.mapbox.com/mapbox-gl-styles/styles/mapbox-streets-v7.json'
});

// Markers
map.on('style.load', function() {
    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [51.48, -0.08]
                },
                "properties": {
                    "title": "Lorem",
                    "marker-symbol": "default_marker"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [51.52, -0.12]
                },
                "properties": {
                    "title": "Ipsum",
                    "marker-symbol": "secondary_marker"
                }
            }]
        }
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}",
            "text-field": "{title}",
            "text-font": "Open Sans Semibold, Arial Unicode MS Bold",
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        },
        "paint": {
            "text-size": 14
        }
    });
});

所有带有标记的样式、JSON 和 PNG 文件似乎都可以正确加载。 有什么想法吗？

Answer 1

Mapbox GL JS 的 GeoJSON 图层类型遵循GeoJSON 规范，要求坐标按经度、纬度顺序排列。你的例子把它们颠倒了。 Flipping them 显示具有正确图标的标记。

"geometry": {
    "type": "Point",
    "coordinates": [-0.12, 51.52]
}