Question

在页面上，我正在使用传单加载多个地图，在每个地图上，我添加了从geoJSON文件加载的两个图层。在从geoJSON加载的一层上，它们是鼠标单击事件，而在另一层上则不是。有时，当我使用Firefox加载页面时，鼠标单击事件不起作用，我需要重新加载以使其正常工作。这是我的代码：

    (function($){ 
  var map1 = L.map('map_container_zone1').setView([45.760612, 6.333560], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone1'
  }).addTo(map1);

  $.getJSON( "/media/kml/zone1.geojson").done(function( dataperimeterzone1 ) {    
    L.geoJSON(dataperimeterzone1
      ).addTo(map1);      
  }); 

  $.getJSON( "/media/kml/buildings_zone1.geojson").done(function( datagbuildingszone1 ) {
    function onEachFeature(feature, layer) {     
      var popupContent = feature.properties.Name;            

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }

      layer.setStyle({color : feature.properties.Style});

      if (feature.properties.Name.length !=0)
      {
          layer.bindPopup(popupContent);
      }
    }

    L.geoJSON(datagbuildingszone1, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature
      }).addTo(map1);    
  })
  .fail(function() {
    console.log( "An error occured when loading the layer buildings_zone1" );
  });   

  var map2 = L.map('map_container_zone2').setView([45.761277, 6.258469], 16);
  L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
      attribution: '&copy; <a href="http://www.esri.com/">Esri</a>, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      maxZoom: 18,
      id: 'map.zone2'
  }).addTo(map2);

  $.getJSON( "/media/kml/zone2.geojson").done(function( dataperimeterzone2 ) {    
    L.geoJSON(dataperimeterzone2
      ).addTo(map2);      
  }); 

  $.getJSON( "/media/kml/buildings_zone2.geojson").done(function( datagbuildingszone2 ) {
      function onEachFeature(feature, layer) {      
      var popupContent = feature.properties.Name;

        if (feature.properties && feature.properties.popupContent) {
            popupContent += feature.properties.popupContent;
        }

      layer.setStyle({color : feature.properties.Style});

        layer.bindPopup(popupContent);
    }

    L.geoJSON(datagbuildingszone2, {

        style: function (feature) {
            return feature.properties && feature.properties.style;
        },

        onEachFeature: onEachFeature
      }).addTo(map2);    
  })
  .fail(function() {
    console.log( "An error occured when loading the layer buildings_zone2" );
  }); 

})(jQuery);

如何解决此问题？也许在第二层还没有完成加载之前就添加了第二层？

多谢

P.S。：我已经更新了脚本，因为页面上加载了多个地图

传单：有时图层无法使鼠标事件起作用

0 个答案: