私は自分のマップに単純なカスタム マーカーを作成できるようにするアプローチを探してMapbox JSいます。
Web を詳しく調べたところ、これを達成するための明白な、または非常に簡単な方法はないようです。これは、見逃されているかなりの機能だと思います。
で作業を数回試みましたが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"
});
ご想像のとおり、私のマップにはアイコンが表示されません。
Map ライブラリにとって重要なことを達成するための、適切でわかりやすい方法を誰か提案できますか?