无法让自定义标记在 Mapbox GL JS 中工作

Question

我在 GitHub 上关注了 example at Mapbox site and 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 specification, which requires that coordinates be in longitude, latitude order. Your examples have them reversed. Flipping them 显示的标记，具有正确的图标。

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

无法让自定义标记在 Mapbox GL JS 中工作

Can't get custom markers to work in Mapbox GL JS

mapbox

mapbox-gl-js

mapbox-gl