карта листовок изменяется в зависимости от выбора в диаграммах dc.js - PullRequest
0 голосов
/ 05 мая 2018

Я хочу реализовать наложение карты с помощью листовки. В следующем коде mainmap является базовым уровнем; heat и markLayer - две тепловые карты. Я хочу связать только слой «жара» с моими диаграммами dc.js. Два оверлея успешно работают, но слой «жара» не меняется в соответствии с выбором на графике.

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

`var mainmap;
  var heat;
  mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
  mainmap = L.tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; ' + mapLink + ' Contributors',
        maxZoom: 15,
      });

    //1st HeatMap
  var geoData = [];
  _.each(allDim.top(Infinity), function(d) {
      geoData.push([d["lat"], d["long"], 1]);
        });
   heat = L.heatLayer(geoData,{
      radius: 10,
      blur: 20, 
      maxZoom: 1,
    });

   //2nd HeatMap
    var geoDataa =[];
    _.each(allDimm.top(Infinity), function(d){

      geoDataa.push([d["lat"], d["long"], 1]);
    });


  var markerLayer = L.heatLayer(geoDataa, {
    radius: 10,
      blur: 20, 
      maxZoom: 1,
});



  map = L.map('map',{
  layers: [mainmap, heat, markerLayer]
});
  map.setView([22.97, 100.65], 4);

  var baseMaps = {
    "BaseMap": mainmap
    };

var overlayMaps = {
    "heat": heat,
    "markerLayer": markerLayer 
};


 mainmap.addTo(map);

 function drawMap()
  {
    heat.addTo(map);
    mainmap.addTo(map);
  }   
  L.control.layers(baseMaps, overlayMaps).addTo(map);
  drawMap();

  //Update the heatmap if any dc chart get filtered

  _.each(dcCharts, function (dcChart) {
    dcChart.on("filtered", function (chart, filter) {
        map.eachLayer(function (layer) {
          map.removeLayer(layer)
        }); 
        console.log("Yes, I am called");
    drawMap();
    });
  dc.renderAll();

}); `
...