Листовка кругМаркерное событие не работает при использовании вместе с листом.heat

Question

Я использую ui-буклет для нашего углового проекта. У нас также есть листовки. Тепло для создания тепловых карт.

Проблема возникает при обновлении данных, когда событие на маркерах круга перестает работать.

Другая незначительная проблема, с которой я столкнулся, - это карта тепла не обновляется, если я не использую тайм-аут. Не уверен, что я делаю неправильно, любая помощь приветствуется.

Я создал образец 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

Что касается причины, почему вы не можете нажать на вашем Круг Маркере, когда ваша тепловая карта включена, это, вероятно, только вопрос SVG элементов штабелирования: тепловая карта рисуется после Круга Маркера и охватывает всю карту, поэтому вы не можете больше взаимодействовать с маркером мыши.

Вы можете вызвать проблему, просто скрыв и снова показывая наложение тепловой карты (даже не нужно обновлять).