Второе всплывающее окно, представляющее Highchart, не работающий на многоугольнике листовки Geojson - PullRequest
Новая
       8

Второе всплывающее окно, представляющее Highchart, не работающий на многоугольнике листовки Geojson

0 голосов
/ 02 октября 2018

У меня есть листовки с картами полигонов, где я планирую всплывающее окно с Highchart, представляющим информацию о полигонах.Проблема, с которой я сталкиваюсь, заключается в том, что, когда я щелкаю по многоугольнику, я получаю всплывающее окно с Highchart, однако, если я щелкаю по другому многоугольнику без закрытия первого всплывающего окна, получается пустое всплывающее окно (однако, если я закрываю первое всплывающее окно и нажимаю на другой многоугольник, всплывающее окнорезультаты в правильном формате).Проблема только в том, что при щелчке по другому многоугольнику результаты первого всплывающего окна не закрываются.Ниже приведен код JavaScript.Любой совет приветствуется.Заранее спасибо. 

$.getJSON('data/Stat_data.json', function(dt) {
  var geojson,
    activeLayer;
  $(document).ready(function() {


    var map = new L.Map('map-holder', {
      center: new L.LatLng(53.3498, -7.2603),
      zoom: 6.6
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      minZoom: 5,
      maxZoom: 15,
      noWrap: true,
      attribution: 'Data: CSO.ie | Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
    }).addTo(map);

    $.getJSON('data/County.geojson', function(data) {

      geojson = L.geoJSON(data, {
        ////////////////////////////////
        ////  Step 1 - look of the layer
        ////////////////////////////////
        style: function(feature) {
          return {
            color: '#fff',
            weight: 1,
            // fillColor: '#FED976',
            fillOpacity: 0.6,
            fillColor: '#800026'
          }
        },
        ////////////////////////////////
        ////  Step 2 - interaction
        ////////////////////////////////
        onEachFeature: onEachFeature
      }).addTo(map);
    });

    function highlightLayer(e) {
      var layer = e.target;
      activeLayer = layer;

      layer.setStyle({
        color: '#fff',
        fillColor: '#31a354'
      });

      if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
      }

    }

    function resetHighlight(e) {
      geojson.resetStyle(e.target);
    }

    function data_pre_process(data) {
      var ind = [];
      for (var i in dt) {
        if (dt[i]['Province County or City'].toLowerCase() === data.toLowerCase()) {
          ind.push(dt[i])
        }
      }
      return ind
    }


    function onEachFeature(feature, layer) {
      layer.on({
        mouseover: highlightLayer,
        mouseout: resetHighlight

      })
      // console.log(feature.properties.COUNTY.toLowerCase());
      //layer.unbindPopup()
      var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
      layer.bindPopup(div);

      layer.on('popupopen', function(e) {
        var pop_2011 = []
        var pop_2016 = []
        var county = e['sourceTarget']['feature']['properties']['COUNTY'].toLowerCase()
        data = data_pre_process(county)
        for (var i in data) {
          if (data[i]['Sex'] === "Both sexes") {
            pop_2011[0] = data[i]['Population 2011 (Number)'];
            pop_2016[0] = data[i]['Population 2016  (Number)'];
          } else if (data[i]['Sex'] === "Female") {
            pop_2011[1] = data[i]['Population 2011 (Number)'];
            pop_2016[1] = data[i]['Population 2016  (Number)'];
          } else {
            pop_2011[2] = data[i]['Population 2011 (Number)'];
            pop_2016[2] = data[i]['Population 2016  (Number)'];
          }
        }

        Highcharts.chart('popupcontainer', {

          chart: {
            type: 'column',
            inverted: true
          },

          title: {
            text: 'Census, Population in ' + (county[0].toUpperCase() + county.slice(1))
          },

          xAxis: {
            categories: ['2016', '2011']
          },

          yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
              text: 'Population'
            }
          },

          tooltip: {
            formatter: function() {
              return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
            }
          },

          plotOptions: {
            column: {
              stacking: 'normal'
            }
          },

          series: [{
            name: 'Female',
            data: [pop_2016[1], pop_2011[1]]
          }, {
            name: 'Male',
            data: [pop_2016[2], pop_2011[2]]
          }]
        });
      });
    };

  });
});

1 Ответ

0 голосов
/ 02 октября 2018

Вы создаете несколько div элементов с одинаковым идентификатором.Затем в Highcharts.chart методе вы используете этот идентификатор, и диаграмма создается только в первом элементе.Вы должны использовать индивидуальный атрибут id для каждого элемента. 

        var div = L.popup().setContent('<div id="popupcontainer" style="min-width: 250px; height: 250px; margin: 0 z-index: 3">Loading...</div>');
        layer.bindPopup(div);
...