Javascript 在OpenLayers中100%显示静态图像
我想使用ol3中的StaticImage层将静态图像显示为地图,以100%的图像大小(以像素为单位)。我相信这应该由范围和缩放变量来定义,但是显示的图像并不总是正确的大小,这取决于图像,所以我显然误解了一些东西,尽管我已经阅读了所有的论坛条目 下面是一个演示错误图像大小的示例。参考图像为128x128像素,但缩放0时显示的图像稍大 如果在我的小提琴中使用,效果很好,我们似乎了解到,如果范围变量是[0,0,wid,len],那么zoom:2是100%。但这并不适用于所有图像 静态图像如何以100%的像素大小可靠地显示 提前感谢你的帮助Javascript 在OpenLayers中100%显示静态图像,javascript,css,image,openlayers-3,Javascript,Css,Image,Openlayers 3,我想使用ol3中的StaticImage层将静态图像显示为地图,以100%的图像大小(以像素为单位)。我相信这应该由范围和缩放变量来定义,但是显示的图像并不总是正确的大小,这取决于图像,所以我显然误解了一些东西,尽管我已经阅读了所有的论坛条目 下面是一个演示错误图像大小的示例。参考图像为128x128像素,但缩放0时显示的图像稍大 如果在我的小提琴中使用,效果很好,我们似乎了解到,如果范围变量是[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)
我终于找到了这个问题的答案。不要在地图视图中使用“缩放”变量,而是使用“分辨率”参数 除上述内容外,设置以下内容将导致图像以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
...
})
...
})
这是一个例子