Question

我正在尝试将图像加载到我的openlayers画布中，最终目标是将地图图例的png文件作为图层添加到地图上。我已经能够使用div标签将图例浮动到地图上方，但是我们需要在画布中捕获图例，以便用户可以将其保存到{{1}的png文件中功能。

我没有收到任何可以找到的错误，但我的图片没有出现在我的地图上。

我的Javascript：

canvas.toBlob()

HTML：

var pixelProjection = new ol.proj.Projection({
    code: 'pixel',
    units: 'pixels',
    extent: [0, 0, 800, 600]
})


var mapLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
        url: 'http://184.185.140.81/osm_tiles/{z}/{x}/{y}.png'
    }),
    opacity: 0.3,
    isBaseLayer: false
});

var imageLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        //url: 'http://184.185.140.81/Futura_sample.PNG'
        url: 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
        imageSize: [800, 600],
        projection: pixelProjection,
        imageExtent: pixelProjection.getExtent()
    })
})

var map = new ol.Map({
    layers: [
        mapLayer,
        imageLayer
    ],
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine()
    ]),
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
        zoom: 4,
        minZoom: 1,
        maxZoom: 20,
    })
});


$('#exportMap').on('click', function() {
    console.log('click');
    canvas = document.getElementsByTagName('canvas')[0];
    canvas.toBlob(function (blob) {
        window.saveAs(blob, 'map.png');
    })
});

这段代码只是试图用维基百科的样本png测试功能，因为我还没有准备好我们的传奇。评论<div id="map"></div> <div id="exportMapDiv"> <input type="button" id="exportMap" value="download map"> </div>是我保存到url:

的另一个示例图片

我做错了什么？

编辑：已解决。我需要修复我的图像投影。它渲染和投影图像很好，但在另一个星系的某个地方可以这么说。

将静态图像加载为openlayers地图图层

0 个答案: