我有一个reactjs前端,它有一个react-leafletMap。点击Map,我可以访问纬度和经度。在同一次点击中,我需要加载一个Python脚本。我有一个Flask端点作为我的后端服务器,我的react前端可以访问这个端点,我只是不知道如何将所有东西联系在一起,让Python脚本加载并正常工作:(
我的React代码-
import { useMapEvents, Popup, Marker} from "react-leaflet";
const PopupInfo = () => {
const [markers, setMarkers] = useState([]);
const map = useMapEvents({
async click(e) {
const newMarker = e.latlng
setMarkers([...markers, newMarker])
console.log(e.latlng, "info")
//access coordinates to load the python script
const response = await fetch(`/coordinates?sel_lat=${e.latlng.lat}&sel_lon=${e.latlng.lng}`,
{
method: 'GET',
headers: {
Accept: 'application/json',
}});
console.log(response, 'TESTING PROMISE')
if (!response.ok) {
throw new Error(`Error! status: ${response.status}`);
}
const result = response.json();
console.log('result is: ', JSON.stringify(result, null, 4));
}
})
return (
<>
{markers.map((marker, index) =>
<Marker position={marker} key={index}>
<Popup>Latitude: ({marker.lat})<br></br>Longitude: ({marker.lng})</Popup>
</Marker>)}
</>
);
};
export default PopupInfo;
python代码-
import argparse
import time
import pandas as pd
import datetime as dt
import json
from src.bcolors import bcolors as bc
import src.config as cfg
import src.utils as utils
import src.cfsr as cfsr
import src.gfs as gfs
def parse_args():
parser = argparse.ArgumentParser(
description="PURPOSE: Extract current meteorological information\n \
for a location and give climate context",
)
parser.add_argument(
"--sel_lat", type=float, dest="sel_lat", help="Latitude of requested location"
)
parser.add_argument(
"--sel_lon", type=float, dest="sel_lon", help="Longitude of requested location"
)
args = parser.parse_args()
##v2
# print("optional arg is: " + args.sel_lat, args.sel_lon)
return args
def main():
start = time.time()
args = parse_args()
print(f"{bc.HEADER}EXTRACT INFO FOR SELECTED LOCATION{bc.ENDC}")
print(f"{bc.HEADER}({args.sel_lat},{args.sel_lon}){bc.ENDC}")
slat = args.sel_lat
slon = args.sel_lon
slon360 = utils.lon_to_360(args.sel_lon)
if cfg.debug:
fin_ij = utils.get_ij_data(cfg.file_ref, slat, slon360)
print(
f"{bc.BOLD}Selected grid point: {fin_ij.lat.values}, {fin_ij.lon.values}{bc.ENDC}"
)
if cfg.debug:
fin_ij = utils.get_ij_data(cfg.file_ref, slat, slon360)
print(
f"{bc.BOLD}Selected grid point: {fin_ij.lat.values}, {fin_ij.lon.values}{bc.ENDC}"
)
print(f"Elapsed time initialization: {time.time()-start}s")
this_time = time.time()
sdoy = utils.calc_doy_noleap(cfg.today)
print(f"Elapsed time doy: {time.time()-this_time}s")
this_time = time.time()
# Get data for location
sdata_doy = cfsr.get_data_doy_loc(slat, slon360, sdoy)
sdata_all = cfsr.get_data_loc(slat, slon360)
print(f"Elapsed time load sdata: {time.time()-this_time}s")
this_time = time.time()
sqtiles = sdata_doy.sel(time=slice(f"{cfg.bsyear}", f"{cfg.beyear}")).quantile(
cfg.qtiles
)
print(f"Elapsed time qtiles: {time.time()-this_time}s")
this_time = time.time()
fcvars = gfs.get_loc_fcvars(slat, slon360)
print(f"Elapsed time fcvars: {time.time()-this_time}s")
this_time = time.time()
# Loading this year data
sdata_y = cfsr.get_data_this_year_loc(slat, slon360)
shmap_y = cfsr.get_hmap_this_year_loc(slat, slon360)
shwcs_y = cfsr.get_hwcs_this_year_loc(slat, slon360)
# Loading bounds (for max-min plots)
sbounds = cfsr.get_bounds_loc(slat, slon360)
print(f"Elapsed time load sdat_ty: {time.time()-this_time}s")
this_time = time.time()
doy_temp_ptile = (abs(sqtiles - fcvars)).idxmin(dim="quantile") * 100.0
print(f"Elapsed time doy qtile: {time.time()-this_time}s")
this_time = time.time()
print(
f"{bc.OKGREEN}Today's tmax {round(fcvars.tmax.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmax)}th percentile{bc.ENDC}"
)
print(
f"{bc.OKGREEN}Today's tmin {round(fcvars.tmin.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmin)}th percentile{bc.ENDC}"
)
print(
f"{bc.OKGREEN}Today's tmed {round(fcvars.tmed.values.item(),1)} at the selected point ({slat},{slon}) will be on the {int(doy_temp_ptile.tmed)}th percentile{bc.ENDC}"
)
#####################################################################
#####################################################################
sdata_doy.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/temp_doy.csv", index=False
)
sdata_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/temp_current_year.csv", index=True
)
shmap_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/hmap_current_year.csv", index=True
)
shwcs_y.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/hwcs_current_year.csv", index=True
)
sbounds_time = sbounds.assign_coords(
doy=pd.date_range(
dt.datetime(cfg.today.year, 1, 1),
dt.datetime(cfg.today.year, 12, 31),
freq="D",
)
)
sbounds_time.drop(["lat", "lon"]).to_dataframe().round(1).to_csv(
f"{cfg.wrk_dir}/bounds.csv", index=True
)
fcvars.to_dataframe().round(1).to_csv(f"{cfg.wrk_dir}/fcvars.csv", index=True)
print(f"Elapsed time write csv files: {time.time()-this_time}s")
this_time = time.time()
print(f"{bc.HEADER}Writing out json file with loc info{bc.ENDC}")
loc_stats = {
"tmax": round(fcvars.tmax.values.item(), 1),
"tmin": round(fcvars.tmin.values.item(), 1),
"tmed": round(fcvars.tmed.values.item(), 1),
"tmax_ptile": int(doy_temp_ptile.tmax),
"tmin_ptile": int(doy_temp_ptile.tmin),
"tmed_ptile": int(doy_temp_ptile.tmed),
"tmax_alltime_record_x": sdata_all.tmax.max().values.item(),
"tmax_alltime_record_n": sdata_all.tmax.min().values.item(),
"tmin_alltime_record_x": sdata_all.tmin.max().values.item(),
"tmin_alltime_record_n": sdata_all.tmin.min().values.item(),
"tmed_alltime_record_x": sdata_all.tmed.max().values.item(),
"tmed_alltime_record_n": sdata_all.tmed.min().values.item(),
}
with open(f"{cfg.wrk_dir}/loc_stats.json", "w", encoding="utf-8") as f:
f.write(json.dumps(loc_stats, indent=2))
print(f"Elapsed time write json file: {time.time()-this_time}s")
this_time = time.time()
print(f"{bc.OKGREEN}Elapsed time TOTAL: {time.time()-start}s{bc.ENDC}")
###############################################################################
# __main__ scope
###############################################################################
if __name__ == "__main__":
raise SystemExit(main())
1条答案
按热度按时间xxe27gdn1#
你应该把python代码做成API,然后在React中调用api。调用api可以是Post/Get/Patch。至于python api,你可以使用Flask/Fast/Django或其他框架。