Leaflet: .bindPopup с группами слоев открывает всплывающее окно в одном месте для всех объектов - PullRequest
Новая
       1

Leaflet: .bindPopup с группами слоев открывает всплывающее окно в одном месте для всех объектов

1 голос
/ 12 января 2020

Я строю карту листовки недавних землетрясений, которая использует три API для создания трех групп слоев на карте. Я также создаю боковую панель со списком землетрясений только по одной из трех ссылок API. Когда пользователь нажимает на маркер карты, появляется всплывающее окно с дополнительной информацией о землетрясении. И когда они нажимают на элемент списка на боковой панели, я бы хотел, чтобы открылось всплывающее окно для соответствующего землетрясения, так же, как если бы пользователь нажал на маркер.

Всплывающие окна работают нормально, когда пользователь нажимает на маркеры карты. Однако, когда я нажимаю на элемент списка, всплывающие окна с правильной информацией открываются, но все они появляются в одном и том же месте, а не в правильном широте землетрясения.

Я попытался использовать FeatureGroup вместо LayerGroup, как предложено здесь , но происходит то же самое. Я также попытался добавить всплывающее окно к указанному слою c с помощью addTo (Layers [Key]) ;, но это также ничего не меняет.

Вот соответствующий код: 

URLs = {
  PAST_MONTH: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_month.geojson",
  PAST_WEEK: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojson", 
  PAST_DAY: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_day.geojson",
};

Object.entries(URLs).forEach(([key, url]) => {

  d3.json(url).then(function (response){


    //Add features to the map.
    response.features.forEach(feature => {
    var calif = feature.properties.title.split(",");
    if (calif[1] === " CA") {
      console.log(feature.properties.title);
      quake = L.geoJSON(feature, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, {
            radius: getRadius(feature.properties.mag),
            fillColor: getColor(feature.properties.mag),
            color: getColor(feature.properties.mag),
            weight: 1,
            opacity: 1,
            fillOpacity: 0.8
          });
        },
      });


    //populate the sidebar with JUST the list of earthquakes in the past week
    if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
              "<strong>Magnitude: </strong>" + feature.properties.mag + 
              "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time))
          quake.openPopup();
      })
    }

      // Add popup with info, when user clicks on map markers
      quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
      "<strong>Magnitude: </strong>" + feature.properties.mag + 
      "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time));

      // Add to specific layer
      quake.addTo(layers[key]);

    }; 

    });
  });
});

И это специфическая c часть, где я не могу понять, как привязать всплывающие окна к элементам списка, чтобы они появлялись на правильном лат / лнг: 

//populate the sidebar with JUST the list of earthquakes in the past week
    if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
              "<strong>Magnitude: </strong>" + feature.properties.mag + 
              "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time))
          quake.openPopup();
      })
    }

Я новичок в Leaflet и буду признателен за любую помощь. Я уверен, что упускаю что-то очевидное, но я ломал голову, пытаясь понять, чего мне не хватает. Спасибо!

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Проблема оказывается в области действия переменной quake. Этот код работает: 

  var quake = L.geoJSON(feature, {
    pointToLayer: function(feature, latlng) {
      return L.circleMarker(latlng, {
        radius: getRadius(feature.properties.mag),
        fillColor: getColor(feature.properties.mag),
        color: getColor(feature.properties.mag),
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
      });
    },
  });
0 голосов
/ 13 января 2020

Вместо добавления всплывающего окна в группу слоев привязывайте всплывающее окно к каждому слою. 

if (url === URLs.PAST_WEEK) {
      var list = document.getElementsByClassName("quake-list");
      var listItem = document.createElement("li");
      listItem.innerHTML = feature.properties.title + " " + moment(feature.properties.time).startOf('day').fromNow(); 
      list[0].appendChild(listItem);
      listItem.addEventListener('click', function() {
          quake.eachLayer(function(layer){
            layer.bindPopup("<h3>" + feature.properties.title + "</h3><hr>" + 
                "<strong>Magnitude: </strong>" + feature.properties.mag + 
                "<br><strong>Date and time: </strong>" + convertUnixTime(feature.properties.time),
{autoClose: false})
            layer.openPopup();
         });
      })
    }
...