如何正确显示气象站 JSON 数据 Leaflet map 来自 Synoptic ZDB974238714CA831DE634A7CED1

Question

I'm trying to display a map of weather stations in Alaska from a MesoWest (now Synoptic) API with their temperature and wind speed on a Leaflet map. I've seen some examples online but they're all very old and result in errors.

Here is what I have in my.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); 

The link should return raw.JSON data.

Here is a snippet of some of what the link shows if I limit it to one station:

{"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}}

I just want a dot on the map that shows wind and temperature:(

Answer 1

As I mentioned above, it is enough to add the appropriate parameter to the api output=geojson call. Below is the use of 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>