将 KMZ 文件输入到 Leaflet 地图中

Question

根据刚才在此处发布的查询：

Using KMZ file in Leaflet Map

我进入 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);});

运行后控制台提示：

从源“http://localhost”访问位于“http://xjubier.free.fr/download/GE/en/TSE_2001_06_21.kmz”的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

还有：

未捕获的错误：InvalidStateError：无法从“XMLHttpRequest”读取“responseText”属性：只有当对象的“responseType”为“”或“text”（原为“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, 。 是否有一些解决方案可以使此代码运行？我也在询问放置在我的本地主机而不是 Web 服务器上的 .kmz 文件。

Answer 1

您展示的第一个代码是为 OpenLayers 制作的。

那么您显示的第二个代码似乎依赖 PHP 后端服务器充当代理来下载目标 KMZ 文件，可能是为了解决 CORS 问题。

它似乎还包含一个自定义算法来获取嵌套的链接文件。

如果您的目标只是检索您可以控制的简单 KMZ 文件、解压缩并解析其 KML 内容，那么您根本不需要此类代理和自定义解析： - 通过 AJAX 将 KMZ 文件检索为二进制文件（使用 fetch、jQuery 等） - 解压文件（JSZip...） - 找到嵌入的 KML 内容并对其进行解析（例如，使用传单omnivore kml.parse）