与 leaflet.heat 一起使用时，传单 circleMarker 事件不起作用

Question

我正在为我们的 angular 项目使用 ui-传单。我们还有 leaflet.heat 来创建热图。

问题是每当更新数据时，圆形标记上的事件就会停止工作。

我面临的其他小问题是除非我使用超时，否则热图不会更新。不确定我做错了什么，感谢任何帮助。

我创建了一个示例 jsfiddle。 http://jsfiddle.net/srs/13s1fy02/2/

heatMapData = [
    [60.265625, -121.640625], [60.671875, -96.328125]
]
heatMapData_1 = [
    [37.265625, -121.640625], [38.671875, -96.328125]
]

circleData = {
  'features': [
    {
      'geometry': {
        'type': 'Point',
        'coordinates': [-120.9998241, 39.7471494]
      },
      'type': 'Feature',
      'properties': {
        'popupContent': 'This is popup 1'
      }
    }
  ]
};
circleData_1 = {
  'features': [
    {
      'geometry': {
        'type': 'Point',
        'coordinates': [-100.9998241, 39.7471494]
      },
      'type': 'Feature',
      'properties': {
        'popupContent': 'This is popup2'
      }
    }
  ]
};
onEachFeature = function(feature, layer) {
  return layer.bindPopup(feature.properties.popupContent);
};
$scope.updateData = function() {
  if($scope.layers.overlays.hasOwnProperty('heat')){
            delete $scope.layers.overlays['heat'];
  }

  $scope.geojson = {};
  //setTimeout(function(){ buildMap(heatMapData_1, circleData_1) }, 300);
    buildMap(heatMapData_1, circleData_1);
}


buildMap = function(heatMapData, circleData){
    $scope.geojson = {
    data: circleData,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, style);
    }
        };
  $scope.layers.overlays = {
    heat: {
      name: 'Heat Map',
      type: 'heat',
      data: heatMapData,
      layerOptions: {
        radius: 10,
        scaleRadius: true,
        maxZoom: 7,
        minOpacity: .5,
        max: 1,
        gradient: {
          .4: 'green',
          .6: 'yellow',
          1: 'red'
        }
      },
      visible: true
    }
  };
}
buildMap(heatMapData, circleData)

Answer 1

至于为什么你的Circle Marker在你的热图打开的时候不能点击，估计是SVG元素堆叠的问题：热图是在之后[=15=绘制的] 圆形标记并覆盖整个地图，因此您无法再与标记进行鼠标交互。

您可以通过简单地隐藏并再次显示您的热图叠加层来触发此问题（甚至不需要更新）。

与 leaflet.heat 一起使用时，传单 circleMarker 事件不起作用

Leaflet circleMarker event not working when used along with leaflet.heat

angularjs

leaflet

ui-leaflet