在 Leaflet 上缓慢加载 KML 文件...我可以加载其中的一部分吗？答案

【问题标题】：Slow loading KML file on Leaflet...can I load portion of it?在 Leaflet 上缓慢加载 KML 文件...我可以加载其中的一部分吗？
【发布时间】：2019-09-04 23:38:02
【问题描述】：

我有一张使用 ESRI 传单和杂食动物加载 34MB KML 文件的简单地图。加载大约需要 1 分钟。有没有办法根据地图的边界来加载它？我需要在点击时访问每个多边形的一些属性，所以这可能会限制我在将 KML 转换为图像等方面的一些选项。为了获得我正在使用的 KML 文件，我将 shapefile 通过转换为 KML谷歌地球。

我在文档中注意到了这个选项： .kml.parse(kmlString | gpxDom)：从一串 XML 或 XML DOM 中解析 KML，并返回层。有没有办法基于一些纬度/经度过滤器预解析 KML……或基于地图边界……然后显示 KML 的一小部分？还是我需要将 KML 转换为其他更灵活的显示方式？

这是我加载 KML 文件的方式。

var glacier_np_layer = omnivore.kml('counties.kml', null, L.geoJson(null, {style: countystyle }));
glacier_np_layer.addTo(map1);

这是一个链接：http://blueandthegreen.com/ltg/county.html 和 http://blueandthegreen.com/ltg/counties.kml 抱歉没有 jsfiddle，但我很难链接到那里的大型 KML。

感谢您的帮助。

【问题讨论】：

您可以使用 qgis 将 kml 拆分为多个部分，然后分别加载每个部分。或者您可以尝试提供纯 geojson 而不是 kml

标签： javascript leaflet

【解决方案1】：

您可能有 2 个瓶颈：

下载 34 MB 文件
将多边形渲染为单独的 SVG 形状。

分析每个步骤所花费的时间将为您提供有关在哪里工作的数据。例如。在加载文件之前、在杂食动物就绪事件中以及添加到地图之后（假设您在就绪事件之后添加），您 cpuld 控制台日期

至于第 1 点，您可以将数据转换为矢量切片/GeoJSON 切片。

至于第 2 点，您可以先尝试使用画布渲染器而不是默认的 SVG 渲染器。第 1 点的解决方案也会有很大帮助。

【讨论】：

感谢 ghybs 和 Marcel Gangswitch 抽出宝贵时间回答。我最终使用了 ArcGIS online，它显着加快了 shapefile 的处理/渲染速度。令人惊讶的是，这个平台非常灵活，它让我能够完成我需要做的事情。

【解决方案2】：

我相信，您可以通过放置引用单个 .kml 文件的 javascript 代码来做到这一点，如下所示：

fetch('lotB.kml')
      .then( res => res.text() )
      .then( kmltext => {

            // Create new kml overlay
            parser = new DOMParser();
            kml = parser.parseFromString(kmltext,"text/xml");

            console.log(kml)

            const track = new L.KML(kml)
            map.addLayer(track)

            // Adjust map to show the kml
            const bounds = track.getBounds()
            map.fitBounds( bounds )

      })

fetch('Schematic.kml')
      .then( res => res.text() )
      .then( kmltext => {

            // Create new kml overlay
            parser = new DOMParser();
            kml = parser.parseFromString(kmltext,"text/xml");

            console.log(kml)

            const track = new L.KML(kml)
            map.addLayer(track)

            // Adjust map to show the kml
            const bounds = track.getBounds()
            map.fitBounds( bounds )

      })

我相信，我们还可以在fetch() 命令中放入超过 1 个文件。

【讨论】：