Вставьте файлы KMZ в карту Leaflet

Основываясь на запросе, опубликованном некоторое время назад здесь:

Использование файла KMZ на карте листовки

Я попадаю в репозиторий GitHub:

https://github.com/engrabid411/kmzol3

откуда я использовал код для своих собственных файлов.

В основном код вообще не работает в репозитории, показывая только пустую карту.

Однако, даже если вы реализуете свой собственный файл, он не изменится.

Код выглядит следующим образом:

 var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var nestedKMZData = new Array();
var nestedKMZLinks = new Array();
var hasOwnProperty = Object.prototype.hasOwnProperty;

function isEmpty(obj) {
    if (obj == null)return true;
    if (obj.length > 0)return false;
    if (obj.length === 0)return true;
    for (var key in obj) {
        if (hasOwnProperty.call(obj, key)) return false;
    }
    return true;
}
var deferred = $.Deferred();
function readKMZ( url , callback){

    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
        url = "http://" + url;
    }
    JSZipUtils.getBinaryContent(
        'proxy/index.php?url='+url, 
        function(err, data) {
          if(err) {
            throw err; 
          }

        var zip = new JSZip(data);
        for(f in zip.files){
            var extractData = zip.files[f].asText(); 

            if (window.DOMParser) {
              parser=new DOMParser();
              xmlDoc=parser.parseFromString(extractData,"text/xml");
            } else { // Internet Explorer
              xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              xmlDoc.async=false;
              xmlDoc.loadXML(extractData); 
            }


            var NetworkLink = xmlDoc.getElementsByTagName('NetworkLink');

            if(isEmpty(NetworkLink) == true){
                nestedKMZData.push(extractData);
                deferred.resolve(nestedKMZData);
            }


            for(var L in NetworkLink){

                if(typeof NetworkLink[L] === "object" ){
                    deferred.notify();
                    var Link = NetworkLink[L].getElementsByTagName('Link');
                    var href = Link[0].getElementsByTagName('href')[0].innerHTML;

                    readKMZ(href);

                }

            }

        }
    }); 
    return deferred.promise();
}

  var data = readKMZ('http://xjubier.free.fr/download/GE/en/TSE_2001_06_21.kmz');
data.done(function(d){ console.log(d);});

После запуска консоль пишет:

Доступ к XMLHttpRequest по адресу 'http://xjubier.free.fr/download/GE/en/TSE_2001_06_21.kmz' из источника 'http://localhost' заблокирован политикой CORS: Нет Заголовок Access-Control-Allow-Origin присутствует в запрошенном ресурсе.

а также:

Uncaught Error: InvalidStateError: Не удалось прочитать свойство «responseText» из «XMLHttpRequest»: значение доступно только в том случае, если «responseType» объекта имеет значение «» или «текст» (было «arraybuffer»). в XMLHttpRequest.xhr.onreadystatechange (jszip-utils.js:93)

По моему скромному мнению, ошибка здесь:

function readKMZ( url , callback){

    if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
        url = "http://" + url;
    }
    JSZipUtils.getBinaryContent(
        'proxy/index.php?url='+url, 
        function(err, data) {
          if(err) {
            throw err; 
          }

где я не понимаю 'proxy/index.php?url='+url, . Есть ли какое-то решение, чтобы заставить этот код работать? Я также спрашиваю о файлах .kmz, размещенных на моем локальном хосте, а не на веб-сервере.


javascript leaflet kmz
person MKR    schedule 09.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Первый код, который вы показываете, сделан для OpenLayers.

Затем второй код, который вы показываете, похоже, полагается на внутренний сервер PHP, который действует как прокси для загрузки целевого файла KMZ, возможно, для обхода проблемы CORS.

Он также содержит собственный алгоритм для извлечения вложенных связанных файлов.

Если ваша цель состоит в том, чтобы просто получить простой файл KMZ, которым вы управляете, разархивировать его и проанализировать его содержимое KML, то вам вообще не нужен такой прокси-сервер и пользовательский анализ: - получить файл KMZ как двоичный через AJAX (с , jQuery и т. д.) – разархивируйте файл (JSZip...) – найдите встроенный контент KML и проанализируйте его (например, с помощью листовки omnivore kml.parse)

person ghybs    schedule 10.10.2019
comment
Спасибо, я видел аналогичный ответ по другому запросу. Проблема в том, что мне нужен .kmz, потому что внутри у меня есть изображения (карты). Я пытался связать изображение в разделе ‹icon› в файле .kml. - person MKR; 10.10.2019
comment
К сожалению, я не видел ни одной библиотеки, которая бы делала такое связывание автоматически. Вам нужно будет сделать это самостоятельно. - person ghybs; 10.10.2019
comment
Как насчет того, чтобы удалить «proxy/index.php?url=»+url из кода? - person MKR; 10.10.2019