透明图像叠加Mapbox GL JS

时间:2016-06-11 19:46:04

标签: javascript mapbox-gl

我想在Mapbox GL JS中围绕一个对象绘制一个圆圈,但它似乎不支持绘制类似的东西。所以我尝试在Photoshop中创建一个带有红色圆圈和透明背景的PNG。但是当我在地图上加载图像时,图像会失去透明度。

enter image description here

我用来生成它的代码是:

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"
});

有人知道如何实现透明背景吗?或者有人知道在地图上绘制圆圈的另一种方法吗?

提前致谢。

2 个答案:

答案 0 :(得分:0)

我有同样的问题。我目前的解决方法是8位PNG,但它们只有一种透明的颜色。

答案 1 :(得分:0)

我知道它已经晚了一年,但是如果有人再次遇到这种情况,那么图层上就会出现光栅不透明属性。请参阅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
  }
});

如果你正在处理一个你不知道不透明度的图像,这应该可以解决问题!