如何从 Synoptic API 在 Leaflet 地图上正确显示气象站 JSON 数据？

Question

我正在尝试通过 MesoWest（现为 Synoptic）API 显示阿拉斯加的气象站地图，并在 Leaflet 地图上显示它们的温度和风速。我在网上看到了一些例子，但它们都非常旧并且会导致错误。

这是我的 .js 中的内容：

var map = L.map('map').setView([64.666, -147.101], 8);
var basemap = L.tileLayer.provider('Stamen.Terrain').addTo(map);

var mesoMarkersGroup=new L.LayerGroup(); 
$.getJSON('https://api.synopticdata.com/v2/stations/latest?&token=[MY TOKEN]&within=1440&obtimezone=utc&output=json&units=temp|f,speed|mph&state=ak&country=us&status=active&vars=air_temp,wind_speed&varsoperator=and', function (data) {
    L.geoJson(data).addTo(map);
});
map.addLayer(mesoMarkersGroup); 

该链接应返回原始 .JSON 数据。

如果我将其限制在一个站点，以下是链接显示的一些内容的 sn-p：

{"UNITS":{"wind_speed":"Miles\/hour","air_temp":"Fahrenheit"},"QC_SUMMARY":{"QC_CHECKS_APPLIED":["sl_range_check"],"TOTAL_OBSERVATIONS_FLAGGED":0.0,"PERCENT_OF_TOTAL_OBSERVATIONS_FLAGGED":0.0},"STATION":[{"STATUS":"ACTIVE","MNET_ID":"1","PERIOD_OF_RECORD":{"start":"2002-11-05T00:00:00Z","end":"2021-12-09T07:15:00Z"},"ELEVATION":"433","NAME":"Fairbanks, Fairbanks International Airport","DISTANCE":0.0,"STID":"PAFA","SENSOR_VARIABLES":{"wind_speed":{"wind_speed_value_1":{"period_of_record":{"start":"","end":""}}},"air_temp":{"air_temp_value_1":{"period_of_record":{"start":"","end":""}}}},"ELEV_DEM":"419.9","LONGITUDE":"-147.87611","STATE":"AK","OBSERVATIONS":{"wind_speed_value_1":{"date_time":"2021-12-09T07:53:00Z","value":0.0},"air_temp_value_1":{"date_time":"2021-12-09T07:53:00Z","value":10.94}},"RESTRICTED":false,"QC_FLAGGED":false,"LATITUDE":"64.80389","TIMEZONE":"America\/Anchorage","ID":"4620"}],"SUMMARY":{"DATA_QUERY_TIME":"1.08480453491 ms","RESPONSE_CODE":1,"RESPONSE_MESSAGE":"OK","METADATA_RESPONSE_TIME":"152.322053909 ms","DATA_PARSING_TIME":"0.256776809692 ms","TOTAL_DATA_TIME":"1.34587287903 ms","NUMBER_OF_OBJECTS":1}}

我只想要在地图上显示风和温度的点:(

Answer 1

正如我上面提到的，在apioutput=geojson调用中添加适当的参数就足够了。下面是api的使用：

var map = L.map("map").setView([0, 0], 13);

L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

fetch("https://api.synopticdata.com/v2/stations/latest?radius=KHOU,50&limit=10&output=geojson&vars=air_temp&within=100&token=70c1dfd9b68d4511a0a8283cc6f0f972")
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const jsonLayer = L.geoJSON(data);
    jsonLayer.addTo(map);
    map.fitBounds(jsonLayer.getBounds(), {padding: [50, 50]});
  });

*,
:after,
:before {
  margin: 0;
  box-sizing: border-box;
}

html,
body,
#map {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  padding: 0;
}

<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<div id="map"></div>