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

Question

我已经按照Mapbox网站上的示例和GitHub上的这条说明进行操作,但无法在我的地图上显示标记:

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规范,该规范要求坐标以经度,纬度顺序排列.你的例子让他们逆转了.翻转它们会显示标记,其中包含正确的图标.

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