Leaflet 在传单上加载KML层的最佳方式是什么？_Leaflet_Kml

Leaflet 在传单上加载KML层的最佳方式是什么？

leaflet

Leaflet 在传单上加载KML层的最佳方式是什么？,leaflet,kml,Leaflet,Kml,我必须在传单应用程序上加载KML层。经过一番浏览，我发现一个叫做传单kml的图书馆就是这样做的。有两种方法可以加载KML层：通过KML层的URI或KML字符串。KML存储在服务器中，我有一个后端代码来检索URI和字符串表示下面是使用URI的方法 function LoadKML(containerName, name) { let kmlURL = GetKmlURI(containerName, name); let kmlLayer = new L.KML(kmlU

我必须在传单应用程序上加载KML层。经过一番浏览，我发现一个叫做传单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

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

您可以使用传单杂食器。它是加载KML文件的最佳插件（）

有插件传单kml

使用它，您可以编写如下代码：

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


//制作底图
constmap=newl.map（'map'，{center:newl.LatLng（58.4,43.0），zoom:11}，）
，osm=newl.TileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'））
map.addLayer（osm）
//加载kml文件
获取（'Coventry.kml'）
。然后（res=>res.text（））
。然后（kmltext=>{
//创建新的kml覆盖
parser=新的DOMParser（）；
kml=parser.parseFromString（kmltext，“text/xml”）；
console.log（kml）
常数轨道=新的L.KML（KML）
map.addLayer（轨迹）
//调整地图以显示kml
const bounds=track.getBounds（）
map.fitBounds（边界）
})

它应该会起作用的，rgds

你很接近！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);
}

我不知道那个插件，但我的直觉是将kml转换成GeoJSON，这是本机的传单。你确定你正确加载了库吗？该错误不是解析错误，而是您正在执行的代码的类型错误。Github上的L.KML.js文件显然将

this.parseStyles

定义为一个函数。您可以通过JSFIDLE或类似的服务共享问题的最小复制吗？kml文件只能通过与后端通信来访问。是否有我可以参考的在线KML，以便重现错误？

<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>

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);
}