将 KMZ 文件输入 Leaflet 地图

Question

根据刚才在这里发布的查询：

我进入 GitHub 存储库：

从我为自己的文件使用代码的地方。

基本上代码在存储库中根本不起作用，只显示一张空白地图。

但是，即使您实施自己的文件，它也不会改变。

代码如下所示：

 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://xjubier.free.fr/download/GE/en/TSE_2001_06_21.kmz' from origin 'http://localhost”处的 XMLHttpRequest 的访问已被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header。

还有：

未捕获错误：InvalidStateError：无法从 'XMLHttpRequest' 读取 'responseText' 属性：只有 object 的 '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 问题。

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

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

将 KMZ 文件输入 Leaflet 地图

Input KMZ files into the Leaflet map

javascript

kmz

leaflet