传单 - BindPopup USGS 地震震级

Question

在小册子中，我根据来自美国地质调查局地震的数据制作了一张地震图。我的问题是如何单击弹出窗口获取每次地震的震级？脚本如下：

<!doctype html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" type="text/css">
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" type="text/javascript"></script>
  <script src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js"></script>
  <script src="/js/leaflet.ajax.min.js" type="text/javascript"></script>
  <style>
    html, body {
      height: 100%;
      width: 100%;
      margin: 0
    }
    #mapa {
      height: 100%;
      width: 100%;
    }
  </style>
  <title>Simbologia</title>
</head>

<body>
  <div id="mapa"></div>

  <script type="text/javascript">
    var mapa = L.map("mapa", {
      center: [0, 0],
      zoom: 2
    });

    var capaOrtoFoto = L.esri.basemapLayer("Imagery");
    capaOrtoFoto.addTo(mapa);

    var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

    L.Util.ajax(url).then(
      function (datosGeoJOSN) {
        var capaTerremotos = L.geoJSON(datosGeoJOSN, {
          pointToLayer: function (entidad, latlng) {
            return L.circleMarker(latlng);
          }
        });
        capaTerremotos.addTo(mapa);

        capaTerremotos.bindPopup().openPopup();
          });
  </script>
</body>

</html>

如何让“bindPopup”函数调用地震震级？

Answer 1

使用 feature.properties.mag 访问您的响应中的幅度：

fetch(url)
    .then(data => data.json())
    .then(data => {
      L.geoJSON(data, {
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng).bindPopup(`Magnitude: ${feature.properties.mag}`).openPopup();
        }
      }).addTo(mapa);
    })

您也可以使用 fetch API，它不需要导入脚本来发出请求。而且你用的leaflet,esri-leaflet版本好像老了

<!doctype html>
<html lang="es">

  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" type="text/css">
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" type="text/javascript"></script>
    <script src="https://unpkg.com/esri-leaflet@3.0.4/dist/esri-leaflet.js"></script>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0
      }

      #mapa {
        height: 100%;
        width: 100%;
      }

    </style>
    <title>Simbologia</title>
  </head>

  <body>
    <div id="mapa"></div>

    <script type="text/javascript">
      var mapa = L.map("mapa", {
        center: [0, 0],
        zoom: 2
      });

      var capaOrtoFoto = L.esri.basemapLayer("Imagery");
      capaOrtoFoto.addTo(mapa);

      var url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";

      fetch(url)
        .then(data => data.json())
        .then(data => {
          L.geoJSON(data, {
            pointToLayer: function(feature, latlng) {
              return L.circleMarker(latlng).bindPopup(`Magnitude: ${feature.properties.mag}`).openPopup();
            }
          }).addTo(mapa);
        })

    </script>
  </body>

</html>

传单 - BindPopup USGS 地震震级

Leaflet - BindPopup USGS Earthquakes Magnitude

popup

leaflet