MapBoxGLカスタム色のGeoJSON円形マーカーを追加します。

Question

GeoJSONデータを使用してmapboxglマップにマーカーを追加する必要があります.AJAX経由で取得します。私はにGeoJSON層をこのように追加します。

geoJSONSource = new mapboxgl.GeoJSONSource({ 
     data: geodata 
    }); 

    map.addSource('markers', geoJSONSource); 
    map.addLayer({ 
     "id": "markers", 
     "interactive": true, 
     "type": "symbol", 
     "source": "markers", 
     "layout": { 
      "icon-image": "{marker-symbol}-15", // stuff in {} gets replaced by the corresponding value 
      "icon-allow-overlap": true, 
      "icon-size": 1 // size of the icon 
     } 
    }); 

にGeoJSONデータ自体では、私はマップににGeoJSONを追加する前にループの「ロケット」にプロパティ「マーカーシンボル」を持っている各機能を設定します。しかし、私が必要とするのは、ロケットではなく、それぞれの点について小さな円形の画像です。 GeoJSONに含まれるデータに応じて、ポイントを3つの色のうちの1つの小さい円形のイメージに設定したいと思います。 GeoJSONをマップに追加する前に、ループ内でsvgイメージを選択する予定です。

カスタムアイコン画像を追加するにはどうすればよいですか？私がアイコン画像フィールドに不器用な文字を入力しても、Mapboxのあらかじめ作成されたマーカーシンボルからのロケット画像が読み込まれるようです。それ以外の場合は、カスタムマーカーシンボルを追加するにはどうすればよいですか？

私はstreets-v8マップボックススタイルを使用しています。私はこのリンクに従ってマーカーのカスタム画像にアクセスする独自のスタイルを試してみました：

https://www.mapbox.com/help/custom-markers/#use-images-in-mapbox-gl-js 

私はそれを理解できませんでした。

Answer 1

マーカーアイコンは、スタイルで設定されたcurrent sprite sheetに基づいてロードされます。

カスタムアイコンイメージを読み込むには、style.jsonでカスタムスプライトjsonファイルを指定する必要があります。ここでは詳細と対応githubの議論である：customstyle.jsonと呼ばhttp://codepen.io/znak/pen/PqOEyV

マップは、ファイルに定義されたカスタムスタイルを使用しています：ここでhttps://github.com/mapbox/mapbox-gl-js/issues/822

は、カスタムスプライトを使用した例である

var map = new mapboxgl.Map({ 
    container: 'map', 
    center: center, 
    zoom: 8, 
    style: 'http://www.lenart.pl/assets/codepen/customstyle.json' 
}); 

customstyle.jsoncustomsprite.json

"sprite": "http://www.lenart.pl/assets/codepen/customsprite", 

スプライトJSONとSVGファイルの完全なディレクトリのうち、対応するPNGのspritesheetを生成するhttps://github.com/mapbox/spritezero-cli：

http://www.lenart.pl/assets/codepen/customsprite.png 

あなたはまた、このユーティリティを使用することができます：はここにある対応するPNGのspritesheetをトリミングする方法を指定します。