Mapbox 非聚集圓圈更改為圖標

Question

如何將其更改為圖標而不是帶有顏色的圓圈？ 我嘗試使用“布局”和“選項”而不是“繪畫”。 我也在這里查看，但沒有找到任何適合此的東西。 我還是 Mapbox/Leaflet 的新手。

                 map.addLayer({
                 id: 'unclustered-point',
                 type: 'circle',
                 source: 'people',
                 filter: ['!', ['has', 'point_count']],
                 paint: {
                 'circle-color': '#21ba45',
                 'circle-radius': 11,
                 'circle-stroke-width': 3,
                 'circle-stroke-color': '#fff'
                 }
                 });

Answer 1

為了在 Mapbox 中使用圖標，您需要先加載圖像（png、webp 或 jpg 格式）：

map.loadImage(
  './marker-icon.png', // Path to your image here
  (error, image) => {
  if (error) throw error;
     map.addImage('icon_name', image);
});  

然后，您必須將圖層類型從circle更改為symbol 。

fill適用於表單但不適用於圖像，因此您必須改用layout 。 這是一個例子：

map.addLayer({
  'id': 'layer_id',
  'type': 'symbol',
  'source': {
    'type': 'geojson',
    'data': data
  },
  'layout': {
    'icon-image': 'icon_name', // The name has to match with the image loaded
    'icon-size': 0.85,
    "icon-allow-overlap": false // This can be 'true' if you want to display all the markers 
    },
});