Загрузите локальный набор масштабирования в OL3

Question

Я произвел масштабирование плитки с помощью некоторого оцифрованного изображения карты и теперь хотел бы использовать OL3 для отображения этой карты на Веб-сайте. Тем не менее, мой скрипт в настоящее время не загружает эту карту из локального файла uri (позже, в процессе производства, я загружу фрагменты на каком-то веб-сервере и ссылаюсь на плитки с использованием 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

Это не правильный путь например 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 
    }) 
});