传单 - BindPopup USGS 地震震级
Posted
技术标签:
【中文标题】传单 - BindPopup USGS 地震震级【英文标题】：Leaflet - BindPopup USGS Earthquakes Magnitude 【发布时间】：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”函数调用地震的震级？
【问题讨论】：
【参考方案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>【讨论】：
以上是关于传单 - BindPopup USGS 地震震级的主要内容，如果未能解决你的问题，请参考以下文章