CODEWITHSUNDEEP
javascripthtmlopenlayers-3
Aleksandr
Aleksandr

Reputation: 71

How can I add the base64 decoded image to openlayer map?

This is my version. But it is not working. Canvas is displayed, but does not respond to the tug and zoom.

               var layer = new ol.layer.Image({
                source: new ol.source.ImageCanvas({
                    canvasFunction: function(){
                        var canvas = document.createElement('canvas');
                        var context = canvas.getContext('2d');
                        var image = new Image();

                        canvas.setAttribute('width', attachment.width);
                        canvas.setAttribute('height', attachment.height);

                        image.onload = function(){
                            context.drawImage(image, 0, 0);
                        };

                        image.src = attachment.src;

                        return canvas;
                    },
                    projection: view.getProjection()
                })
            });

Upvotes: 3

Views: 3022

Answers (2)

tony gil
tony gil

Reputation: 9554

This works (real code):

    var projection = ol.proj.get('EPSG:3857');     
    var bing = new ol.layer.Tile({
                source: new ol.source.BingMaps({
                  imagerySet: 'Aerial',
                  key: 'yourBingKey'
                })
            });

    var minLon = -40.145761184967;
    var minLat = -12.838585358413;
    var maxLon = -40.13793299178;
    var maxLat = -12.830532582642;
    var extent = new ol.extent.applyTransform([minLon, minLat, maxLon, maxLat], ol.proj.getTransform("EPSG:4326","EPSG:3857"));

    var src = "data:image/png;base64,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";
    var pngImageBase64Layer = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            imageExtent: extent,
                    imageLoadFunction : function(image){
                            image.getImage().src = src;
                    }
        })
            });

    var map = new ol.Map({
        layers: [bing, pngImageBase64Layer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: ol.proj.fromLonLat([-40.135,-12.83]),
          projection: projection,
          zoom: 14 
        })
    });

Upvotes: 0

Aleksandr
Aleksandr

Reputation: 71

I find answer! Just use ol.source.ImageStatic and imageLoadFunction :

            var layer = new ol.layer.Image({
            source : new ol.source.ImageStatic({
                imageExtent : view.getProjection().getExtent(),
                size : [attachment.width, attachment.height],
                imageLoadFunction : function(image){
                    image.getImage().src = attachment.src;
                },
                projection : view.getProjection(),
                url : ''
            })
        });

Upvotes: 4

Related Questions