如何将base64解码后的图像添加到openlayer地图中？
如何将base64解码后的图像添加到openlayer地图中？
提问于 2015-07-10 22:51:41
这是我的版本。但它不起作用。将显示画布，但不响应拖拽和缩放。
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()
})
});回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-14 19:38:50
我找到答案了！只需使用ol.source.ImageStatic和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 : ''
})
});Stack Overflow用户
发布于 2018-08-31 07:57:06
这是有效的(实际代码)：
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
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31343876
复制相关文章
相似问题