0
我正在使用openlayers創建一個身體的地圖。它顯示了一個人的mri掃描有很多標記。openlayers 3:不要放大圖像
完全縮小,有很多空白(或者在我的情況下,黑色空間背景是黑色)我已經設置了帶有extent參數的openlayers,因此用戶無法進一步平移而不是圖像很大。 但是當用戶將鼠標懸停在其周圍的空白處並滾動以進行縮放時,圖像將根據光標的位置放大,因此身體不在視野中。一旦用戶再次開始平移,程序就會播放並跳回到圖像的邊緣。
有沒有辦法在遊標超出範圍時禁用放大/縮小?或者如果這是不可能的,我怎樣才能觸發一個移動/平移,所以它會自動跳轉到圖像的邊緣?
編輯14/12/2016:創建一個JSFiddle來說明問題。
,這是有運行代碼:
var pbm = {};
pbm.vars = {};
pbm.vars.extent = [0, 0, 1536, 5120];
pbm.vars.projection = new ol.proj.Projection({
code: 'xkcd-image',
units: 'pixels',
extent: pbm.vars.extent
});
/**
* initMap
* --------
* triggered by pbm.parseCases!
* outputs the bodymap to the #body-div
* this functions needs all the other ol-elements to work!
*/
pbm.initMap = function(){
pbm.map = new ol.Map({
layers: [
new ol.layer.Image({
source: new ol.source.ImageStatic({
url: 'https://s3-eu-west-1.amazonaws.com/norvell-philips/bodymap-static-hiress.jpg',
projection: pbm.vars.projection,
imageExtent: pbm.vars.extent
})
})
],
target: 'body',//Div#body
view: new ol.View({
projection: pbm.vars.projection,
center: ol.extent.getCenter(pbm.vars.extent),
zoom: 2,
maxZoom: 5,
minZoom: 1,
extent: pbm.vars.extent
}),
renderer: 'canvas',
controls: ol.control.defaults({attribution:false, rotate: false, zoom:false}),
interactions: pbm.vars.interactions
});
}
$(document).ready(function(){
pbm.initMap();
});
創建一個plunker示例。它會幫助我們解決你的問題? –
我已經添加了一些代碼和jsfiddle示例 –