2

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 ファイルは正しく読み込まれるようです。何か案は？

4

1 に答える 1

8

Mapbox GL JS の GeoJSON レイヤー タイプは、座標が経度、緯度の順序である必要があるGeoJSON仕様に従います。あなたの例ではそれらが逆になっています。それらを裏返すと、正しいアイコンを持つマーカーが表示されます。

"geometry": {
    "type": "Point",
    "coordinates": [-0.12, 51.52]
}
于 2015-06-24T16:14:36.573 に答える