2015-11-05 2 views
1

Я хотел бы отображать статические изображения в виде карт, используя слой StaticImage в ol3, при 100% от размера изображения в пикселях. Я считаю, что это должно определяться переменными масштаба и масштабирования, но отображаемые изображения не всегда правильного размера, в зависимости от изображения, поэтому я явно что-то недопонимаю, несмотря на все записи в форуме, которые я прочитал.Отображение статических изображений при 100% в OpenLayers

Это fiddle, демонстрирующие неправильные размеры изображения. Ориентировочное изображение составляет 128x128 пикселей, но отображаемое изображение немного больше при масштабировании 0.

provided example from OpenLayers работает просто отлично, если используется в моей скрипке, и мы, похоже, узнаем, что если переменная степени [0,0, wid , len], затем увеличьте: 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) 

ответ

0

Я, наконец, нашел ответ на эту проблему. Вместо использования переменной «масштабирования» в представлении карты вместо этого используйте параметры «разрешения».

Установка следующее, в дополнение к сказанному выше, приводит изображение, отображаемое на 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.

Смежные вопросы