OpenLayers 多个地理参考图像

Question

我需要在特定地点显示特定地图。地图存储在具有已知地理参考的图像文件 ( JPG ) 中。视图的其余部分由标准 XYZ 磁贴填充。

为了显示 1 张图像（根据文档），我可以使用

new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'myimage.jpg',
    projection: 'EPSG:3857',
    imageExtend: [486303.9778100852272473,
                  800886.4222691040486097, 
                  486822.4427326705190353, 
                  6801434.6447209259495139]
  })
})

它每层给我一张图片。因为我的地图上有大约 200 个这样的地方，所以我需要创建 200 个图层。我相信，它会杀死客户的电脑。有没有办法，如何使用一层显示所有图像？

Answer 1

只要不重新投影图像，一旦加载所有图像，性能开销似乎就很小。加载所有图像（或具有不同虚拟参数的图像以打破缓存并模拟不同的图像）确实非常耗时，但无论如何加载它们都是不可避免的。这是一个快速测试脚本：

var raster_OSM = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({        
    layers: [raster_OSM],
    target: 'map',
    view: new ol.View({
        center: [0,0],
        zoom: 2
    })        
});

for (var i=0; i<20; i++) {
    for (var j=0; j<10; j++) {
        var raster_image = new ol.layer.Image({
            source: new ol.source.ImageStatic({         
                url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
                imageExtent: ol.proj.transformExtent([-170+i*15, 75-j*15, -160+i*15, 65-j*15],'EPSG:4326','EPSG:3857')
            })
        });
        map.addLayer(raster_image);
    }
}

但是从 EPSG:4326 重新投影到 EPSG:3857 的 200 层确实会杀死浏览器：

    var raster_image = new ol.layer.Image({
        source: new ol.source.ImageStatic({         
            url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
            imageExtent: [-170+i*15, 75-j*15, -160+i*15, 65-j*15],
            projection: 'EPSG:4326'
        })
    });

OpenLayers 多个地理参考图像

OpenLayers multiple georeferenced images

image

layer

openlayers