Question

地图使用KML文件生成单个geoJSON对象以传递给VectorGrid的切片器函数。为了提高性能，文件作为单个KMZ提供，并使用JSZip库提取。然后我们循环遍历每个文件（KML），解析它并转换为geoJSON。这些功能连接到一个单独的数组，用于创建最终的geoJSON对象（一种廉价的合并方式）。

var vectorGrid;

JSZipUtils.getBinaryContent('/pathto/file.kmz', function (error, data) {
    JSZip.loadAsync(data).then(function (zip) {

        var featureArray = [];

        zip.forEach(function (path, file) {
            file.async('string').then(function (data) {
                // convert to geoJSON, concatenate features array
                featureArray = featureArray.concat(geoJSON.features);
            }
        }

        var consolidatedGeoJSON = {
            'type': 'FeatureCollection,
            'features': featureArray
        };

        vectorGrid = L.vectorGrid.slicer(consolidatedGeoJSON, options);

    }
}

这个想法是，一旦该操作完成，我就可以使用最终的geoJSON并将其传递给切片器。但是，由于promises的性质，它总是首先构造切片器，然后解析文件。

为了解决这个问题，我被迫将切片器函数放在forEach中，但在if语句中检查当前文件是否是zip中的最后一个。这允许在地图上绘制矢量，但现在我不能单独在每个图层上启用悬停效果（每个KML包含一个特定图层，用作交互的区域轮廓）。

vectorGrid滑块选项允许您指定getFeatureId函数，但我不了解如何将该id传递给事件处理程序中的setFeatureStyle函数。

Answer 1

基本问题是，在为featureArray指定值之前，尝试将值赋给vactorGrid 。我认为您需要使用Promise.all(..)。这样的事情：

var zips=[]; zip.forEach(function(path,file) { zips.push(file.async('string'); }); Promise.all(zips).then(function(data){ return data.map(function(value){ return value.features; }); }).then(function(featureArray) { vectorGrid = L.vectorGrid.slicer( {type:'FeatureCollection',feature:featureArray}, options); });

使用JSZip为Leaflet VectorGrid

1 个答案: