Question

我试图将弹出窗口添加到传单地图中，该传单显示不同采矿点周围的缓冲区。当我点击缓冲区多边形时，我想获取矿名信息。这是我的代码，

<html>
<head>
  <title>Buffer Zones around Mine</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <style>
    #map{ height: 100% }

  </style>
</head>
<body>

  <div id="map"></div>

  <script>

  var map = L.map('map').setView([45, -95], 4); //center map view


  var CartoDB_Positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
subdomains: 'abcd',
maxZoom: 19
}).addTo(map); 

// load JSON data
 $.getJSON("BufferPolygons.json",function(data){
    // add GeoJSON layer to the map once the file is loaded
    L.geoJson(data).addTo(map);
  });

//get popup info
var myLayer = L.geoJson(polygon, {
onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

function yourOnEachFeatureFunction(feature, layer){
if (feature.properties.mine_name) {
    layer.bindPopup(feature.properties.mine_name);
    }
}
  </script>
</body>
</html>

我是Leaflet和Javascript的新手，非常感谢任何帮助！

编辑：滚动多边形与非多边形时，我的光标会发生变化，所以我相信只需点击鼠标即可检索信息。由于没有显示任何内容，我假设这是一个HTML / CSS问题，或许我还没有为这些信息创建任何窗口？

Answer 1

您看到的多边形是在$.getJSON回调函数中创建的多边形。当您在回调之外定义myLayer时，它似乎正在查找未定义的polygon对象，因此永远不会创建该层及其弹出窗口。

有几种方法可以解决这个问题。最直接的方法是为回调中创建的onEachFeature设置L.geoJson选项：

$.getJSON("BufferPolygons.json",function(data){
  L.geoJson(data, {
    onEachFeature: yourOnEachFeatureFunction
  }).addTo(map);
});

但是，这样做，您可能无法在其他地方引用该图层（例如，如果您想将其添加到图层控件中），因为在BufferPolygons.json完成之前不会创建它加载。在大多数情况下，更好的选择是使用您想要的任何选项创建myLayer，但没有任何数据，并使用addData method在回调函数中填充此空白层：

var myLayer = L.geoJson(false, {
  onEachFeature: yourOnEachFeatureFunction
}).addTo(map);

$.getJSON("BufferPolygons.json",function(data){
  myLayer.addData(data);
});

需要帮助在Leaflet地图上将弹出信息窗口添加到多边形

1 个答案: