Прозрачное изображение наложения Mapbox GL JS

Question

Я хочу нарисовать круг вокруг объекта в Mapbox GL JS, но он, похоже, не поддерживает рисование чего-то подобного. Поэтому я попытался создать PNG с красным кружком и прозрачным фоном в Photoshop. Но когда я загружаю изображение на карту, изображение теряет прозрачность.

Код я использовал для создания этого:

var sourceObj = new mapboxgl.ImageSource({ 
     url: '/img/circle-red.png', 
     coordinates: [ 
      [-80.425, 46.437], 
      [-71.516, 46.437], 
      [-71.516, 37.936], 
      [-80.425, 37.936] 
     ] 
}); 

map.addSource('someimage', sourceObj); 

map.addLayer({ 
    "id": "someimage", 
    "source": "someimage", 
    "type": "raster" 
}); 

Знает ли кто, как я могу достичь прозрачный фон? Или кто-то знает альтернативный способ нарисовать круг на карте?

Заранее спасибо.

Answer 1

У меня такая же проблема. Моим текущим решением являются 8-битные PNG, но у них есть только один прозрачный цвет.

Answer 2

Я знаю, что это год спустя, но если кто-то снова столкнется с этим, на слое есть свойство растрового непрозрачности. См. https://www.mapbox.com/mapbox-gl-js/example/adjust-layer-opacity/.

map.addLayer({ 
    "id": "current_image", 
    "source": "current_image", 
    "type": "raster", 
    "paint" : { 
    "raster-opacity" : 0.5 
    } 
}); 

Если вы работаете с изображением, где будете знать непрозрачность, это должно сделать трюк!