在 Leaflet 上加载 KML 图层的最佳方式是什么？答案

【问题标题】：What is the best way to load KML layers on Leaflet?在 Leaflet 上加载 KML 图层的最佳方式是什么？
【发布时间】：2021-01-08 02:57:08
【问题描述】：

我必须在 Leaflet 应用上加载 KML 层。经过一番浏览后，我发现了一个名为leaflet-kml 的库，它可以做到这一点。我可以通过两种方式加载 KML 图层：通过 KML 图层的 URI 或 KML 字符串。 KML 存储在服务器中，我有检索 URI 和字符串表示的后端代码。

这是使用 URI 的方法。

function LoadKML(containerName, name)
{
     let kmlURL = GetKmlURI(containerName, name);  
     let kmlLayer = new L.KML(kmlURL);
     map.addLayer(kmlLayer);
}

这是使用 kml 字符串的方法。

function LoadKML(containerName, name)
{
     let kmlString = GetKmlString(containerName, name);  
     let kmlLayer = new L.KML.parseKML(kmlString);
     map.addLayer(kmlLayer);
}

由于 CORS 限制，我无法使用第一种方法获取 URL。第二种方法返回一个字符串，但无法正确解析。

KML.js:77 Uncaught TypeError: this.parseStyles is not a function
    at new parseKML (KML.js:77)
    at LoadKML (Account:470)
    at Account:461

应该如何调用leaflet-kml中的函数？是否有可以轻松将 KML 加载到传单中的库？

【问题讨论】：

我不知道那个插件，但我的直觉是将 kml 放入 Leaflet 原生使用的 GeoJSON。
您确定您正在正确加载库吗？该错误不是解析错误，而是您正在执行的代码的类型错误。 Github 上的 L.KML.js 文件显然将this.parseStyles 定义为一个函数。您能否通过 JSfiddle 或类似服务分享该问题的最小复制？
只有与后端通信才能访问kml文件。是否有任何在线 KML 可供我参考以便重现错误？

标签： leaflet kml

【解决方案1】：

您可以使用传单杂食。这是加载KML文件的最佳插件（https://github.com/mapbox/leaflet-omnivore）

var kmlData = omnivore.kml('data/kmlData.kml', null, customLayer);

【讨论】：

【解决方案2】：

有插件leaflet-kml

https://github.com/windycom/leaflet-kml

使用它，您可以像这样编写代码：

<head>
<script src="L.KML.js"></script>
</head>

<script type='text/javascript'>

// Make basemap
const map = new L.Map('map', {center: new L.LatLng(58.4, 43.0), zoom: 11},)
, osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')

map.addLayer(osm)

// Load kml file
fetch('Coventry.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 )
      })

  </script>
 </body>

它应该可以工作，rgds

【讨论】：

【解决方案3】：

你很接近！ parseKML 需要一个已解析的 DOM xml。结果是一个特征列表，您也必须将其包装为一个层。

function LoadKML(containerName, name)
{
     let kmlString = GetKmlString(containerName, name);  
     const domParser = new new DOMParser();
     const parsed = parser.parseFromString(userLayer.kml, 'text/xml');
     let kmlGeoItems = new L.KML.parseKML(parsed); // this is an array of geojson
     const layer = L.layerGroup(L.KML.parseKML(parsed));
     map.addLayer(layer);
}

【讨论】：