在 OpenLayers 中以 100% 显示静态图像答案

【问题标题】：Displaying Static Images at 100% in OpenLayers在 OpenLayers 中以 100% 显示静态图像
【发布时间】：2015-11-05 13:50:01
【问题描述】：

我想使用 ol3 中的 StaticImage 图层以 100% 的图像大小（以像素为单位）将静态图像显示为地图。我认为这应该由范围和缩放变量定义，但显示的图像并不总是正确的大小，具体取决于图像，所以尽管我阅读了所有论坛条目，但我显然误解了一些东西。

这是一个fiddle，展示了不正确的图像尺寸。参考图像为 128x128 像素，但在缩放 0 时显示的图像略大。

provided example from OpenLayers 如果在我的小提琴中使用就可以正常工作，而且我们似乎知道如果范围变量是 [0,0,wid,len]，那么 zoom: 2 是 100%。但这并不适用于所有图像。

如何才能以 100% 的像素大小可靠地显示静态图像？

提前感谢您的帮助。

var extent = [0,0,128,128]  // image size is 128x128 px
var projection = new ol.proj.Projection({
    code: 'local_image',
    units: 'pixels',
    extent: extent
});

var map = new ol.Map({
    target: 'map',
    view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 0,
    }),
    controls: [],
});

var im_layer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        url: 'http://img4.wikia.nocookie.net/__cb20071014061100/freeciv/images/1/1c/Crystal_128_penguin.png',  // image size is 128x128 px
        projection: projection,
        imageExtent: extent
    })
})
map.addLayer(im_layer)

【问题讨论】：

标签： javascript css image openlayers-3

【解决方案1】：

我终于找到了这个问题的答案。不要在地图视图中使用“缩放”变量，而是使用“分辨率”参数。

除上述之外，设置以下内容会导致图像以 100% 显示：

var map = new ol.Map({
    view: new ol.View({
        resolution: 1,        // important for 100% image size!
        maxResolution: 2,     // must be >= 1
        //minResolution: .5,  // also set-able
        //zoom: 0,            // don't use this
        ...
    })
    ...
})

这是updated fiddle。

【讨论】：