问开放层-基于ol.source.Zoomify的层不显示在另一层的顶部。
EN

Stack Overflow用户

提问于 2017-02-20 11:36:22

回答 1查看 239关注 0票数 2

我有两个不同大小的图片(但瓷砖大小是一样的)。图像是相互对应的，我想在另一个图像上显示它们，就像第二个图像被放大到对应的第一个图像一样。对于它们和转换的投影，我都使用ol.source.Zoomify源代码。但我连第二张照片都看不出来。

请参阅示例http://jsfiddle.net/sk5cLj4n/37/。

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
  code: 'PIXELS',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(primaryImageProjection);

// Overlay image projection
const overlayProjection = new ol.proj.Projection({
  code: 'OVERLAY',
  units: 'pixels',
  extent: [0,0, imWidth, imHeight],
  getPointResolution: function (resolution, point) { return resolution; }
});
ol.proj.addProjection(overlayProjection);

 // Transformations of projections
 function TransformOverlayToPixel(coordinate) {
   console.log('TransformOverlayToPixel');
   return [
     (coordinate[0]),
     (coordinate[1])
   ];
 }
 function TransformPixelToOverlay(coordinate) {
   console.log('TransformPixelToOverlay');
   return [
    (coordinate[0]),
    (coordinate[1])
   ];
 }
 ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
      TransformPixelToOverlay,
      TransformOverlayToPixel);


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({        
        opacity: 0.8,
      source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
        projection: 'PIXELS'
      })
    }),
    new ol.layer.Tile({        
            opacity: 0.8,
            source: new ol.source.Zoomify({
        size: [imWidth, imHeight], // temp
        url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
        projection: 'OVERLAY'
      })
    })
  ],    
  target: 'map',
  renderer: "canvas",
  view: new ol.View({
    projection: 'PIXELS',
    center: [imWidth / 2, imHeight / 2],
    zoom: 0
  })
});

对小提琴的简短解释：

蓝色边框的瓷砖是主要层的。
带有黑色边框的瓷砖用于第二层(覆盖层)
只有3个缩放级别可用于缩放。
目前，预测转换不起任何作用。这只是为了简化。应该有一个多倍拉伸第二图像。

openlayers-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-22 09:01:51

这里是如何解决http://jsfiddle.net/sk5cLj4n/41/问题的

const imWidth = 31871;       
const imHeight = 17770;

const imWidthSmall = 19122.6;   
const imHeightSmall = 10662;  

const koef = imWidth / imWidthSmall;

// Primary image projection
const primaryImageProjection = new ol.proj.Projection({
    code: 'PIXELS',
    units: 'pixels',
    extent: [0, -imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(primaryImageProjection);

    // Overlay image projection
    const overlayProjection = new ol.proj.Projection({
    code: 'OVERLAY',
    units: 'pixels',
    extent: [0,-imHeight, imWidth, 0],
    getPointResolution: function (resolution, point) { return resolution; }
    });
    ol.proj.addProjection(overlayProjection);

    // Transformations of projections
function TransformOverlayToPixel(coordinate) {
    console.log('TransformOverlayToPixel');
    return [
    (coordinate[0]) * koef,
    (coordinate[1]) * koef
    ];
}
function TransformPixelToOverlay(coordinate) {
    console.log('TransformPixelToOverlay');
    return [
            (coordinate[0]) / koef,
        (coordinate[1]) / koef
    ];
}
        ol.proj.addCoordinateTransforms('PIXELS', overlayProjection,
        TransformPixelToOverlay,
        TransformOverlayToPixel);


    var map = new ol.Map({
    layers: [
        new ol.layer.Tile({        
            opacity: 0.8,
        source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/primary/",
            projection: 'PIXELS'
        })
        }),
        new ol.layer.Tile({        
                opacity: 0.8,
                source: new ol.source.Zoomify({
            size: [imWidth, imHeight], // temp
            url: "http://207.154.205.4/testers_numbers_borders_resized_zoomify_256/overlay/",
            projection: 'OVERLAY'
        })
        })
    ],    
    target: 'map',
    renderer: "canvas",
    view: new ol.View({
        projection: 'PIXELS',
        center: [imWidth / 2, imHeight / 2],
        zoom: 0
    })
    });

查看如何指定范围。同时还应适当设置系数，使图像相互匹配。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42343520

复制

相似问题

问开放层-基于ol.source.Zoomify的层不显示在另一层的顶部。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问开放层-基于ol.source.Zoomify的层不显示在另一层的顶部。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问开放层-基于ol.source.Zoomify的层不显示在另一层的顶部。
EN