带有创建的 PNG 的传单叠加层

Question

我创建了一张 png 图片并希望它显示在传单地图上。

我在下面的代码中尝试过，但它不起作用。

(net::ERR_FILE_NOT_FOUND)

有什么办法可以做到这一点吗？这是代码。

    var pic = new PNGlib(200, 200, 256);      
    var background = pic.color(23, 0, 0, 50); 

    var my_png = pic.getBase64()

    var overlay = new L.ImageOverlay(  my_png   , bounds, {opacity: 0.5,});
    mymap.addLayer(overlay);

Answer 1

我认为您的 URI 有问题。您需要添加 "data:image" 才能显示您的图像。 MDN data URLs

您可以看到适用于我的 codesandbox 的示例。

var pic = new PNGlib(200, 200, 256);      
var background = pic.color(23, 0, 0, 50); 

var my_png = pic.getBase64()
const b64ImgUrl = `data:image/png;base64,${my_png}`;

var overlay = new L.ImageOverlay(  b64ImgUrl   , bounds, {opacity: 0.5,});
mymap.addLayer(overlay);

带有创建的 PNG 的传单叠加层

Leaflet Overlay with created PNG

html

javascript

png

overlay

leaflet