Question

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

http://codepen.io/znak/pen/waPPRj（使用Mapbox样式和sprite） 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]
}

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

1 个答案: