Mapbox GL JS、カスタムマーカーを追加

Question

Mapbox JSのように、マップに簡単なカスタムマーカーを作成できるアプローチを探しています。

ウェブの周りを深く見ていて、これを実現するための明白な、またはまっすぐな前方方法はないようです。これは私が推測していないかなりの機能です。

Mapbox Studioで作業しようとする人が少しいますが、カスタムSVGをアップロードして参照できるようにする方法がわかりにくいので、運がまだありません。

この例では、Mapbox Studioというカスタムマップを作成しましたが、使用できるアイコンがない限り見ることができます。スプライトシートと呼ばれるものを探すことを試みましたが、私はそのようなアプローチでは一度も作業していなかったので、どうやってやるのか分かりません。

私のためだけではなく、新しいガイドを添付してMapbox GL JSのような新しいものを学び始めた多くの人にとって、非常に重要です。

あなたが推測できるように、これはいくつかのカスタムマーカー

markers = { 

    "type": "FeatureCollection", 
    "features": [{ 
    "type": "Feature", 
    "properties": { 
     "marker-symbol": "golf", 
     "type": "journey-step", 
     "previous": "0", 
     "current": "1", 
     "next": "2" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.98114013671872, 
     19.70207180765683 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 
     "marker-color": "#7f201e", 
     "marker-size": "medium", 
     "marker-symbol": "music", 
     "type": "journey-step", 
     "previous": "1", 
     "current": "2", 
     "next": "3" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.67352294921875, 
     19.01278705937288 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 

     "icon-symbol": "Four", 
     "type": "journey-step", 
     "previous": "2", 
     "current": "3", 
     "next": "4" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.2423095703125, 
     19.42644883261674 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 
     "marker-color": "#7f201e", 
     "marker-size": "medium", 
     "marker-symbol": "theatre", 
     "type": "journey-step", 
     "previous": "3", 
     "current": "4", 
     "next": "5" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.10223388671875, 
     19.698193071745962 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 
     "marker-color": "#7f201e", 
     "marker-size": "medium", 
     "marker-symbol": "alcohol-shop-12", 
     "type": "journey-step", 
     "previous": "4", 
     "current": "5", 
     "next": "6" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.38787841796872, 
     20.04303061200023 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 
     "marker-color": "#7f201e", 
     "marker-size": "medium", 
     "marker-symbol": "theatre", 
     "type": "journey-step", 
     "previous": "5", 
     "current": "6", 
     "next": "7" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.8575439453125, 
     20.229986070955245 
     ] 
    } 
    }, { 
    "type": "Feature", 
    "properties": { 
     "marker-color": "#7f201e", 
     "marker-size": "medium", 
     "marker-symbol": "theatre", 
     "type": "journey-step", 
     "previous": "6", 
     "current": "7", 
     "next": "8" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [-155.89599609375, 
     19.46400263520258 
     ] 
    } 
    }] 

}; 
map.addSource("markers", { 
    "type": "geojson", 
    "data": markers 
}); 

map.addLayer({ 
    "id": markers, 
    "type": "symbol", 
    "source": "markers" 
}); 

を作成する点で私のコードの一部、私のマップは、任意のアイコンが表示されません。

マップライブラリにとって重要なことを達成するための、わかりやすい方法を提案する人はいますか？

Answer 1

いくつかのリンク：

1. ドキュメントがStudioでカスタムマーカーを作成してMapbox GL JSマップに追加するには、ここであります：https://www.mapbox.com/help/custom-markers/

2. 私はこのようにそれをやって保証するものではありませだろうが、 http://bl.ocks.org/tristen/10b69f89b600ca0433fdc472db6a6cab

3. このコメント（とディスカッション！）は、カスタムマーカーを表示するようなユースケースを説明している理由についての裏付けを提供していますカップルの余分な手順が必要です。https://github.com/mapbox/mapbox-gl-js/issues/656#issuecomment-216305579

Answer 2

うーん...

ソリューションは、便利なリンクを投稿するため@tristenするおかげで、私は思ったより簡単だったと私は本当に人々がそれらが役に立つことを願っ。

これを行う最も簡単な方法は、次の簡単な手順に従うことです。

1）自分のマップの[プロパティ]をクリックします（左下隅）を編集する（画像にカスタムマーカー/アイコンをアップロードします）Mapbox Studio

2を使用してカスタムマップを作成 - >アイコン - - >任意の層の上にクリック>追加SVGイメージ（あなたが私がAdobe Illustratorを使っていたのと同じように、自分でカスタムアイコンを作ったのなら、それを古いフォーマットで保存してください...）、またはあなたのアイコンは黒と白になります） - >と保存ヒット）

3））あなたはこの

map = new mapboxgl.Map({ 
     container: 'map', // container id 
     style: 'mapbox://styles/username/aasdasdassdfsdfsdfsdf131', //stylesheet location 
     center: [ -115.15628814697266, 
      36.173079792635654], // starting position 
     zoom: 10.5 
     // starting zoom 
    }); 

4のようなあなたのJavaScriptファイルで作成したマップを参照今、あなたはあなたを参照することができます例えば、私がアップロードしたSVGはgolf.svgと呼ばれています。私のレイヤーを定義するときに、私はこれを行うことができます："marker-symbol": "golf"

それはかなりです。