Mapbox GL AddLayer：アイコン画像はどこから来ていますか

多くの例では、常に次のようにアイコン画像が読み込まれます（例：https : //www.mapbox.com/mapbox-gl-js/example/geojson-markers/）：

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"
    }
});

このアイコンはどこに保存され、ローカルのpngまたはsvgにリンクするにはどうすればよいですか？または、どのようにして自分のものmarkersをソースに入れることができますか？この例はあまり文書化されていません。

例に従うと、特定のスタイルのスプライトシートで読み込まれるスプライトのみが取得されます。これは、必ずしも他のスタイルとの1対1の一致ではありません。

例：emerald-v8には、streets-v8を使用する例のように、 "icon-image"： "harbor-15"はありません。

対応するスタイルから利用可能なスプライトのリストを表示するには：https : //github.com/mapbox/mapbox-gl-styles/tree/master/sprites

次のように、エメラルドv8リポジトリから「ハーバー」アイコンを選択できます。

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

ここに私がすべてをまとめるのを助けたリソースがあります、そしてそれはあなた自身のアイコンを作成する方法を説明します：https : //www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

編集：

基本的に、独自のアイコンの1つを追加するには、Mapbox studioに移動し、独自のスタイルを作成するか、アイコンの1つを編集します。独自のSVGの1つを追加するだけで、そのアイコンがカスタムスプライトシートに表示されます。

また、最初にicon-image使用するかのように、外部/生成されたアイコンを使用することもできます。map.loadImage()map.addImage()

例：

地図にアイコンを追加する

生成されたアイコンをマップに追加します

sprite docsで述べ"sprite": "https://link"られているように、spritezero-clilinkで生成されたjsonへのリンクがどこにあるかを自分のスタイルに渡します。spritezero-cliはsvg形式のアイコンのリストからpngスプライトを生成しました。シンボルレイヤーのアイコンをとして使用できること'icon-image'。