feat: support multipolyline

This commit is contained in:
arielherself 2023-11-27 08:49:11 +08:00
parent 82814af405
commit 881be276d1
5 changed files with 65 additions and 24 deletions

View File

@ -6,8 +6,10 @@
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment=""> <list default="true" id="3c7078e7-6f30-4d92-9696-11496f9e6dff" name="Changes" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" /> <change beforePath="$PROJECT_DIR$/api/click.js" beforeDir="false" afterPath="$PROJECT_DIR$/api/click.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/Networking.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/Networking.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/UMap.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/UMap.js" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -81,7 +83,7 @@
<workItem from="1700814808669" duration="47000" /> <workItem from="1700814808669" duration="47000" />
<workItem from="1700822693197" duration="9493000" /> <workItem from="1700822693197" duration="9493000" />
<workItem from="1701004587189" duration="3578000" /> <workItem from="1701004587189" duration="3578000" />
<workItem from="1701042611758" duration="637000" /> <workItem from="1701042611758" duration="3355000" />
</task> </task>
<servers /> <servers />
</component> </component>

View File

@ -1,7 +1,9 @@
const getArgs=(s)=>s.split('@@') const getArgs=(s)=>s.split('@@')
export default function handler(req,res){ export default function handler(req,res){
const {body}=req;
res.status(200).json({ 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,
}); });
} }

View File

@ -21,7 +21,7 @@ export default function App() {
const [version, setVersion] = useState(''); const [version, setVersion] = useState('');
const [intro, setIntro] = useState(''); const [intro, setIntro] = useState('');
const hs = setInterval(() => { const hs = setInterval(() => {
post('handshake', []).then((response) => { post('GET','handshake', []).then((response) => {
const {version, intro} = response; const {version, intro} = response;
setVersion(version); setVersion(version);
setIntro(intro); setIntro(intro);

View File

@ -1,11 +1,18 @@
export function post(method,args) { export function post(type,method,args) {
const payload=args.join('@@');
let res = ''; let res = '';
let ft = async () => { let ft = async () => {
const response = await fetch(`/api/${method}${payload.length?"?query=":""}${payload}`, { let response;
method: 'GET', if(type==='GET'){
// body: data 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(); const response_data = await response.json();
console.log(`Request "${method}" finished:\n ${response_data.log.replaceAll('\n','\n ')}`); console.log(`Request "${method}" finished:\n ${response_data.log.replaceAll('\n','\n ')}`);
return response_data; return response_data;

View File

@ -1,7 +1,6 @@
import React, {Component, useEffect, useRef, useState} from 'react'; import React, {Component, useEffect, useRef, useState} from 'react';
import * as L from 'leaflet';
import SearchIcon from '@mui/icons-material/Search'; 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 {useMapEvents} from 'react-leaflet/hooks';
import {post} from './Networking'; import {post} from './Networking';
import {Autocomplete, CircularProgress, Sheet} from "@mui/joy"; import {Autocomplete, CircularProgress, Sheet} from "@mui/joy";
@ -11,22 +10,30 @@ const AppleParkLoc=[37.334835049999995,-122.01139165956805];
class Markers extends Component { class Markers extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {markers: [], candMarkers: [], candEmpty: true}; this.state = {markers: [], candMarkers: [], candEmpty: true, polylines: []};
} }
render() { render() {
const fillBlueOptions = { fillColor: 'blue' };
const pl=this.state.polylines;
const mks=this.state.markers.map((p, i) => ( const mks=this.state.markers.map((p, i) => (
<Marker interactive={false} position={[p[0], p[1]]} opacity={1.0} /> <Marker key={`m`+i} interactive={false} position={[p[0], p[1]]} opacity={1.0} />
)); ));
const cmks=this.state.candMarkers.map((p, i) => ( const cmks=this.state.candMarkers.map((p, i) => (
<Marker interactive={false} position={[p[0], p[1]]} opacity={0.5} /> <Marker key={`c`+i} interactive={false} position={[p[0], p[1]]} opacity={0.5} />
)); ));
return mks.concat(cmks); return [
...mks.concat(cmks),
pl&&pl.length>1?<Polyline pathOptions={fillBlueOptions} positions={pl} />:<div/>
];
} }
addMarker(lat, lng) { addMarker(lat, lng) {
this.setState((prev) => ({ 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(); this.getFocus();
} }
@ -35,18 +42,29 @@ class Markers extends Component {
this.setState((prev) => ({ this.setState((prev) => ({
candMarkers: [...prev.candMarkers, [lat, lng]], candMarkers: [...prev.candMarkers, [lat, lng]],
markers: prev.markers, markers: prev.markers,
candEmpty: false candEmpty: false,
polylines: prev.polylines,
})); }));
this.getFocus(); this.getFocus();
} }
clearMarkers() { clearMarkers() {
this.setState((prev) => ({markers: [], candMarkers: prev.candMarkers, candEmpty: prev.candMarkers})); this.setState((prev) => ({
markers: [],
candMarkers: prev.candMarkers,
candEmpty: prev.candEmpty,
polylines: [],
}));
this.getFocus(); this.getFocus();
} }
clearCandMarkers(){ clearCandMarkers(){
this.setState((prev) => ({markers: prev.markers, candMarkers: [], candEmpty: true})); this.setState((prev) => ({
markers: prev.markers,
candMarkers: [],
candEmpty: true,
polylines: prev.polylines,
}));
this.getFocus(); this.getFocus();
} }
@ -61,6 +79,16 @@ class Markers extends Component {
} }
this.props.focusUpdater(currentFocus); this.props.focusUpdater(currentFocus);
} }
flushPolylines(pl){
this.setState((prev)=>({
markers: prev.markers,
candMarkers: prev.candMarkers,
candEmpty: prev.candEmpty,
polylines: pl,
}));
// TODO
}
} }
function MapClickHandler({mks}) { function MapClickHandler({mks}) {
@ -70,11 +98,13 @@ function MapClickHandler({mks}) {
const lat = e.latlng.lat, lng = e.latlng.lng; const lat = e.latlng.lat, lng = e.latlng.lng;
console.info(`Clicking on ${lat} ${lng}`); console.info(`Clicking on ${lat} ${lng}`);
mks.current.addMarker(lat, lng); mks.current.addMarker(lat, lng);
post('click', [lat, lng]).then((response)=>{ post('POST','click', mks.current.state.markers).then((response)=>{
// TODO // TODO: real functionality
const pl=JSON.parse(response.multipolyline);
mks.current.flushPolylines(pl);
}).catch((e)=>{ }).catch((e)=>{
console.error(e); console.error(e);
location.reload(); // location.reload();
}); });
}, },
// TODO // TODO