web-dev-qa-db-ja.com

mapbox gljsを介してmapboxのマップにいくつかの基本的なマーカーを追加します

Mapbox studioでスタイル設定されたマップを持っていますが、基本的なマーカーを追加するのに苦労していますが、マーカーがあるべき場所にマーカーが表示されていることを示すテキストが表示されています。

そのマップスタイルのコードは次のとおりです。

mapboxgl.accessToken = 'pk.eyJ1Ijoic21pY2tpZSIsImEiOiJjaWtiM2JkdW0wMDJudnRseTY0NWdrbjFnIn0.WxGYL18BJjWUiNIu-r3MSA';
var map = new mapboxgl.Map({
    container: 'map',
    style: "mapbox://styles/smickie/cikb3fhvi0063cekqns0pk1f1",
    center: [-30.50, 40],
    zoom: 2,
    interactive: false
});

そしてここにいくつかのマーカーがAPIの例から追加されています：

map.on('style.load', function () {

    map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": [{
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-77.03238901390978, 38.913188059745586]
                },
                "properties": {
                    "title": "Mapbox DC",
                    "marker-symbol": "monument"
                }
            }, {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [-122.414, 37.776]
                },
                "properties": {
                    "title": "Mapbox SF",
                    "marker-color": "#ff00ff"
                }
            }]
        }
    });

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

ただし、アイコンではなくテキストのみが表示されます。

質問は、特別なアイコンのマーカーではなく、通常の基本的な色のマーカーだけをこのマップに追加するにはどうすればよいですか？

ありがとう。

javascriptmapbox
11
MintDeparture

ここでの問題は、選択したテンプレートであるMapbox Studioのスタイルの開始点に、レイヤーレイアウトで参照しているグリフ/スプライトがないことです。使用した例で使用しているのと同じスタイルに切り替えると、mapbox://styles/mapbox/streets-v8マーカーが表示されます。それは、それらがそのスタイルに追加されたためです。あなたがあなたのスタイルに戻ると、彼らは再び消えてしまいます。

これがあなたのスタイルのスプライトのconsole.logです：

enter image description here

そして、これがMapboxストリートスプライトのconsole.logです。

enter image description here

ご覧のとおり、mapboxには数十個ありますが（スクリーンショットよりも多い）、2個しかありません。プロパティ名を使用するだけで、お持ちのものを使用できます：default_markerおよびsecondary_marker：

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [-77.03238901390978, 38.913188059745586]
    },
    "properties": {
       "title": "Mapbox DC",
       "marker-symbol": "default_marker"
    }
}

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "symbol",
    "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"
    }
});

プランカーの例： http://plnkr.co/edit/W7pfGHVBzJj8U3AmPyzf?p=preview

さらに必要な場合は、使用するスプライト/グリフをMapboxスタジオのスタイルに追加する必要があります。残念ながら、これは「プログラミング」とはほとんど関係がありません。これは、ソフトウェアツールであるMapbox Studioに関連しているため、ここではスタックオーバーフローの一種の「オフトピック」です。

スプライト/グリフさえ必要ない場合は、type: circleプロパティとPaintプロパティを使用して単純な円を作成することもできます。

map.addLayer({
    "id": "markers",
    "source": "markers",
    "type": "circle",
    "Paint": {
        "circle-radius": 10,
        "circle-color": "#007cbf"
    }
});

プランカーの例： http://plnkr.co/edit/QDtIBtDIimKy6TUmKxcC?p=preview

スタイルとスプライトの詳細については、こちらをご覧ください。

12
iH8