我需要在某些地方显示特定的地图。地图存储在具有已知地理参考的图像文件(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]
})
})
它每层给我1张图片。由于我在地图上有大约200个这样的地方,我需要创建200个图层。我相信,它会扼杀客户的电脑。有没有办法,如何使用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重新投影了200层:4326到EPSG:3857确实杀了浏览器:
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'
})
});