From 881be276d1811f030c7965a6b431d19535c32eef Mon Sep 17 00:00:00 2001 From: arielherself Date: Mon, 27 Nov 2023 08:49:11 +0800 Subject: [PATCH] feat: support multipolyline --- .idea/workspace.xml | 8 ++++--- api/click.js | 4 +++- src/App.js | 2 +- src/Networking.js | 19 ++++++++++----- src/UMap.js | 56 ++++++++++++++++++++++++++++++++++----------- 5 files changed, 65 insertions(+), 24 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index cefebac..54668da 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,8 +6,10 @@ - - + + + + diff --git a/api/click.js b/api/click.js index 40baa78..3203b14 100644 --- a/api/click.js +++ b/api/click.js @@ -1,7 +1,9 @@ const getArgs=(s)=>s.split('@@') export default function handler(req,res){ + const {body}=req; res.status(200).json({ - log: `Method: click\nArgs: ${getArgs(req.query.query)}\nStatus: test service, nothing done`, + log: `Method: click\nArgs: ${body}\nStatus: returned the raw polylines`, + multipolyline: body, }); } \ No newline at end of file diff --git a/src/App.js b/src/App.js index 5edb7e4..76f76ca 100644 --- a/src/App.js +++ b/src/App.js @@ -21,7 +21,7 @@ export default function App() { const [version, setVersion] = useState(''); const [intro, setIntro] = useState(''); const hs = setInterval(() => { - post('handshake', []).then((response) => { + post('GET','handshake', []).then((response) => { const {version, intro} = response; setVersion(version); setIntro(intro); diff --git a/src/Networking.js b/src/Networking.js index 76c150c..6e6f2ce 100644 --- a/src/Networking.js +++ b/src/Networking.js @@ -1,11 +1,18 @@ -export function post(method,args) { - const payload=args.join('@@'); +export function post(type,method,args) { let res = ''; let ft = async () => { - const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, { - method: 'GET', - // body: data - }); + let response; + if(type==='GET'){ + const payload=args.join('@@'); + response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, { + method: 'GET', + }); + }else if(type==='POST'){ + response = await fetch(`/api/${method}`, { + method: 'POST', + body: JSON.stringify(args), + }); + } const response_data = await response.json(); console.log(`Request "${method}" finished:\n ${response_data.log.replaceAll('\n','\n ')}`); return response_data; diff --git a/src/UMap.js b/src/UMap.js index d9ca257..3e76601 100644 --- a/src/UMap.js +++ b/src/UMap.js @@ -1,7 +1,6 @@ import React, {Component, useEffect, useRef, useState} from 'react'; -import * as L from 'leaflet'; import SearchIcon from '@mui/icons-material/Search'; -import {MapContainer, TileLayer, Marker, Popup, useMap, LayersControl} from 'react-leaflet'; +import {MapContainer, TileLayer, Marker, useMap, Polyline} from 'react-leaflet'; import {useMapEvents} from 'react-leaflet/hooks'; import {post} from './Networking'; import {Autocomplete, CircularProgress, Sheet} from "@mui/joy"; @@ -11,22 +10,30 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805]; class Markers extends Component { constructor(props) { super(props); - this.state = {markers: [], candMarkers: [], candEmpty: true}; + this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []}; } render() { + const fillBlueOptions = { fillColor: 'blue' }; + const pl=this.state.polylines; const mks=this.state.markers.map((p, i) => ( - + )); const cmks=this.state.candMarkers.map((p, i) => ( - + )); - return mks.concat(cmks); + return [ + ...mks.concat(cmks), + pl&&pl.length>1?:
+ ]; } addMarker(lat, lng) { this.setState((prev) => ({ - markers: [...prev.markers, [lat, lng]], candMarkers: prev.candMarkers,candEmpty: prev.candEmpty + markers: [...prev.markers, [lat, lng]], + candMarkers: prev.candMarkers, + candEmpty: prev.candEmpty, + polylines: [], // automatically clear polylines when marker changes })); this.getFocus(); } @@ -35,18 +42,29 @@ class Markers extends Component { this.setState((prev) => ({ candMarkers: [...prev.candMarkers, [lat, lng]], markers: prev.markers, - candEmpty: false + candEmpty: false, + polylines: prev.polylines, })); this.getFocus(); } clearMarkers() { - this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers})); + this.setState((prev) => ({ + markers: [], + candMarkers: prev.candMarkers, + candEmpty: prev.candEmpty, + polylines: [], + })); this.getFocus(); } clearCandMarkers(){ - this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true})); + this.setState((prev) => ({ + markers: prev.markers, + candMarkers: [], + candEmpty: true, + polylines: prev.polylines, + })); this.getFocus(); } @@ -61,6 +79,16 @@ class Markers extends Component { } this.props.focusUpdater(currentFocus); } + + flushPolylines(pl){ + this.setState((prev)=>({ + markers: prev.markers, + candMarkers: prev.candMarkers, + candEmpty: prev.candEmpty, + polylines: pl, + })); + // TODO + } } function MapClickHandler({mks}) { @@ -70,11 +98,13 @@ function MapClickHandler({mks}) { const lat = e.latlng.lat, lng = e.latlng.lng; console.info(`Clicking on ${lat} ${lng}`); mks.current.addMarker(lat, lng); - post('click', [lat, lng]).then((response)=>{ - // TODO + post('POST','click', mks.current.state.markers).then((response)=>{ + // TODO: real functionality + const pl=JSON.parse(response.multipolyline); + mks.current.flushPolylines(pl); }).catch((e)=>{ console.error(e); - location.reload(); + // location.reload(); }); }, // TODO