Question

我搜索了这个主题但找不到任何其他实例。我正在尝试使用leaflet-omnivore将KML图层添加到我的Mapbox地图中，但每次加载地图时，底图都会起作用，但KML图层（应该在相同范围内）不会加载。 HTML文档和KML图层托管在同一个域中。我是新手使用leaflet-omnivore，并想知道我做错了什么？ KML的坐标系也是WGS84，所以我也看不出这是怎么回事。我基本上复制并粘贴了示例中的代码并运行该代码，而不是替换我自己的URL作为示例，以及调整地图底图，范围和密钥。

感谢任何帮助或见解。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>KML Data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.2.0/leaflet-omnivore.min.js'></script>

<div id='map'></div>

<script>
L.mapbox.accessToken = 'deleted for post';
var map = L.mapbox.map('map','mapbox.light').setView([41.5, -72.67], 9);

// omnivore will AJAX-request this file behind the scenes and parse it:
// note that there are considerations:
// - The file must either be on the same domain as the page that requests it,
//   or both the server it is requested from and the user's browser must
//   support CORS.

// Internally this uses the toGeoJSON library to decode the KML file
// into GeoJSON
var runLayer = omnivore.kml('http://magic.lib.uconn.edu/magic_2/vector/apindex_37800_0000_1934_s12_FAS_1_shp_wgs84.kml')
    .on('ready', function() {
        map.fitBounds(runLayer.getBounds());
    })
    .addTo(map);
</script>

</body>
</html>

Answer 1

您的图标未正确定义。看起来在解压缩KMZ时可能没有转换URL。

<Style id="IconStyle00">
    <IconStyle>
        <scale>0.25</scale>
        <Icon>
            <href>df080276-b1b3-4280-bf72-a57bb8c4960e.png</href>
        </Icon>
    </IconStyle>
    <LabelStyle>
        <color>00000000</color>
        <scale>0</scale>
    </LabelStyle>
    <PolyStyle>
        <color>ff000000</color>
        <outline>0</outline>
    </PolyStyle>
</Style>

如果我在图标中添加了一个网址I see them show up on the map，但渲染确实需要一段时间。

Answer 2

这个KML文件是14mb - 用AJAX将它加载到Leaflet地图中并不是最好的方法，因为它需要很长时间才能加载并且一旦它在地图上就会变慢。最好的办法是将这些数据放入TileMill或CartoDB等工具中，从中生成切片，并将其放在地图上。

使用小叶杂食的KML图层未显示在Mapbox

2 个答案: