レイヤーを使用してマップボックスglにカスタムアイコンを追加することができます

Question

この例のようにカスタムアイコン/マーカーを追加する必要がありますhttps://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/マップボックスのレイヤーを使用します。この例はhttps://www.mapbox.com/mapbox-gl-js/example/add-image/です。最初の例のようにイメージを丸くすることはできますか？

Answer 1

丸みを帯びたエッジは、JavascriptやMapbox GLではなく、CSSで実現されます。

.marker { 
    display: block; 
    border: none; 
    border-radius: 50%; 
    cursor: pointer; 
    padding: 0; 
} 

重要なのは 'border-radius：50％'です。 divのクラス/ IDが適切に参照されていることを確認する必要があります。イメージが動的でも特異でもない場合は、クライアント側のリソースを使用するのではなく、透明なPNGを使用してこれを実現する方が適切かもしれません。