简体   繁体   English

openlayers 3:不要在图像外部放大

[英]openlayers 3: don't zoom in outside the image

I'm using openlayers to create a map of a body. 我正在使用openlayers创建人体贴图。 It shows the mri-scan of a person en on there are a lot of markers. 它显示了一个人的mri扫描,上面有很多标记。

Totally zoomed out, there's a lot of whitespace (or in my case black space as the background is black) I've set up openlayers with the extent parameter, so users are not able to pan further than the image is big. 完全缩小后,有很多空白(或者在我的情况下为黑色,因为背景是黑色的),我使用extent参数设置了openlayers,因此用户无法平移得比图像大。 However when the user hovers over the whitespace around it, and scrolls to zoom, the image is zoomed into based on the position of the cursor, so the body is out of view. 但是,当用户将鼠标悬停在其周围的空白上并滚动以进行缩放时,图像将根据光标的位置放大,因此主体不在视线范围内。 Once the user starts panning again, the extent comes in to play and jumps back to the edge of the image. 用户再次开始平移后,范围就会开始播放并跳回到图像的边缘。

Is there a way to disable zooming in/out when the cursor is outside the extent? 当光标在范围之外时,有没有办法禁用放大/缩小? Or if that is not possible, how can I trigger a move/pan so it jumps automatically to the edge of the image? 还是如果不可能,如何触发移动/平移,使其自动跳到图像边缘?

EDIT 14/12/2016: Created a JSFiddle to illustrate the issue. 编辑14/12/2016:创建一个JSFiddle来说明此问题。

And the code that is running there: 以及在那里运行的代码:

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();
});

This is a bug that was recently fixed. 这是一个最近修复的错误。 The first release to contain the fix will be v3.21.0. 包含此修复程序的第一个版本将是v3.21.0。 The ticket with links to the fixes is #5824 . 带有修复程序链接的凭单是#5824

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM