传单 - BindPopup USGS 地震震级答案

【问题标题】：Leaflet - BindPopup USGS Earthquakes Magnitude传单 - BindPopup USGS 地震震级
【发布时间】：2022-01-23 17:34:10
【问题描述】：

在宣传册中，我正在使用来自 USGS 地震的数据制作地震地图。我的问题是如何单击并获取每个地震的震级作为弹出窗口？脚本如下：

<!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”函数调用地震的震级？

【问题讨论】：

标签： leaflet popup

【解决方案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，无需导入脚本即可发出请求。此外，您使用的传单版本，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>

【讨论】：