在OL3中加載本地縮放地圖集

Question

我從某些數字化地圖圖像生成了縮放地圖集，現在想使用OL3在網站上顯示該地圖。然而，我的腳本目前無法從本地文件uri加載該映射（稍後，在生產中，我將上傳某些Web服務器上的拼貼，並使用HTTP引用這些拼貼）。以下是我迄今爲止：

var url = 'file:///home/user/map_zoomfiy/'; 
    var imgWidth = 17244; 
    var imgHeight = 9684; 

    var imgCenter = [imgWidth/2, - imgHeight/2]; 

    var proj = new ol.proj.Projection({ 
    code: 'ZOOMIFY', 
    units: 'pixels', 
    extend: [0, 0, imgWidth, imgHeight] 
    }); 

    var source = new ol.source.Zoomify({ 
    url: url, 
    size: [imgWidth, imgHeight], 
    crossOrigin: 'anonymous' 
    }); 

    var map = new ol.Map({ 
    target: 'map', 
    layers: [ 
     new ol.layer.Tile({ 
     source: source 
     }) 
    ], 
    view: new ol.View({ 
     projection: proj, 
     center: imgCenter, 
     zoom: 1 
    }) 
    }); 

</script> 

任何想法，爲什麼失敗？謝謝。

Answer 1

這不是正確的方式e.g https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction#file

我不明白爲什麼你不做，而不是戰鬥與本地URL來訪問您的文件的本地服務器。

前段時間，我編譯some recipes這樣做。

打開你的命令行，進入你的代碼根目錄，並根據你喜歡的編程語言遵循食譜。

Answer 2

如果瓦片在子目錄（例如，tiles_zoomify）以下應該工作

var url = 'tiles_zoomify/'; 
var imgWidth = 17244; 
var imgHeight = 9684; 

var imgCenter = [imgWidth/2, - imgHeight/2]; 

var proj = new ol.proj.Projection({ 
    code: 'ZOOMIFY', 
    units: 'pixels', 
    extend: [0, 0, imgWidth, imgHeight] 
}); 

var source = new ol.source.Zoomify({ 
    url: url, 
    size: [imgWidth, imgHeight], 
    crossOrigin: 'anonymous' 
}); 

var map = new ol.Map({ 
    target: 'map', 
    layers: [ 
    new ol.layer.Tile({ 
     source: source 
    }) 
    ], 
    view: new ol.View({ 
    projection: proj, 
    center: imgCenter, 
    zoom: 1 
    }) 
});