639 lines
22 KiB
TypeScript
639 lines
22 KiB
TypeScript
import { useEffect, useState } from 'react';
|
||
import { Download, RefreshCw, Save, Upload } from 'lucide-react';
|
||
import { api } from './lib/api';
|
||
import { MapCanvas } from './components/MapCanvas';
|
||
import { Button } from './ui/button';
|
||
import type { GeoFeature, Override, Road, WorkbenchState } from './types/state';
|
||
import type { LayerName } from './map/layers';
|
||
|
||
const layerLabels: Array<[LayerName, string]> = [
|
||
['osm', 'OSM 道路中心线'],
|
||
['native', '自研道路与路口面'],
|
||
['sidewalks', '路缘与步行带'],
|
||
['lanes', '车道与转向路径'],
|
||
['directionArrows', '道路方向箭头'],
|
||
['markings', '车道分隔线与路口转向箭头'],
|
||
['centerLines', '道路中心线'],
|
||
['edgeLines', '道路外缘线'],
|
||
['controls', '斑马线与停止线'],
|
||
['signals', '红绿灯设施'],
|
||
['gaodeReference', '高德规整路口参考'],
|
||
['reference', 'osm2streets 参考面'],
|
||
];
|
||
const defaultLayers = Object.fromEntries(
|
||
layerLabels.map(([key]) => [key, key !== 'edgeLines' && key !== 'reference']),
|
||
) as Record<LayerName, boolean>;
|
||
const direction = (road: Road) => (road.direction === 'forward' ? '沿 OSM 方向' : '逆 OSM 方向');
|
||
const label = (road: Road) => road.tags.name || `${road.highway}（OSM ${road.osmWayIds.join(', ')}）`;
|
||
const laneIndex = (id: string) => Number(id.split(':').at(-1));
|
||
function App() {
|
||
const [state, setState] = useState<WorkbenchState>();
|
||
const [selected, setSelected] = useState<Road | null>(null);
|
||
const [staged, setStaged] = useState<Override[]>([]);
|
||
const [layers, setLayers] = useState(defaultLayers);
|
||
const [scene, setScene] = useState(false);
|
||
const [status, setStatus] = useState('正在加载工作台...');
|
||
const [filter, setFilter] = useState<'all' | 'candidates' | 'other'>('all');
|
||
const [marking, setMarking] = useState<Record<string, unknown> | null>(null);
|
||
useEffect(() => {
|
||
api
|
||
.state()
|
||
.then((value) => {
|
||
if ('compiled' in value) {
|
||
setState(value);
|
||
setStatus(`已加载 ${value.compiled.model.roads.length} 条方向道路`);
|
||
} else setStatus('请导入 OSM 文件以开始');
|
||
})
|
||
.catch((error: Error) => setStatus(error.message));
|
||
}, []);
|
||
const stage = (change: Override) =>
|
||
setStaged((current) => [...current.filter((item) => item.id !== change.id), change]);
|
||
const save = async () => {
|
||
if (!state || !staged.length) return true;
|
||
try {
|
||
const overrides = [
|
||
...state.overrides.overrides.filter((item) => !staged.some((change) => change.id === item.id)),
|
||
...staged,
|
||
];
|
||
const result = await api.overrides(overrides);
|
||
setState({ ...state, overrides: result.overrides });
|
||
setStaged([]);
|
||
setStatus('已保存，点击“保存并重新生成”写入几何');
|
||
return true;
|
||
} catch (error) {
|
||
setStatus((error as Error).message);
|
||
return false;
|
||
}
|
||
};
|
||
const compile = async () => {
|
||
if (!(await save())) return;
|
||
try {
|
||
setStatus('正在重新生成...');
|
||
const next = await api.compile();
|
||
setState(next);
|
||
setSelected((current) => next.compiled.model.roads.find((road) => road.id === current?.id) || null);
|
||
setStatus('已保存并重新生成');
|
||
} catch (error) {
|
||
setStatus((error as Error).message);
|
||
}
|
||
};
|
||
if (!state)
|
||
return (
|
||
<ImportScreen
|
||
status={status}
|
||
onImported={(next) => {
|
||
setState(next);
|
||
setStatus(`已导入 ${next.areaId}`);
|
||
}}
|
||
/>
|
||
);
|
||
const diagnostics = state.compiled.diagnostics.filter(
|
||
(item) =>
|
||
item.rule !== 'ordinary-junction-surface' &&
|
||
(filter === 'all' || filter === 'candidates'
|
||
? Boolean(item.manualCandidates?.length)
|
||
: !item.manualCandidates?.length),
|
||
);
|
||
const handleFeature = (properties: Record<string, unknown>) => {
|
||
setMarking(properties);
|
||
const uid = properties.signal_uid;
|
||
if (typeof uid === 'string') setStatus(`已选中原生红绿灯 ${uid}`);
|
||
else if (properties.effective_style) setStatus('已选中标线，可在右侧暂存样式');
|
||
};
|
||
return (
|
||
<>
|
||
<header>
|
||
<strong>道路编译工作台</strong>
|
||
<span>{state.areaId}</span>
|
||
<span>{status}</span>
|
||
<span className={staged.length ? 'dirty' : ''}>
|
||
{staged.length ? `未保存修改 ${staged.length} 项` : '所有修改已保存'}
|
||
</span>
|
||
<label className="scene">
|
||
<input type="checkbox" checked={scene} onChange={(event) => setScene(event.target.checked)} /> 场景效果
|
||
</label>
|
||
<a className="button" href="/api/export.zip" download>
|
||
<Download size={15} /> 导出道路包
|
||
</a>
|
||
<Button onClick={() => void save()} disabled={!staged.length}>
|
||
<Save size={15} /> 保存修改
|
||
</Button>
|
||
<Button onClick={() => void compile()}>
|
||
<RefreshCw size={15} /> 保存并重新生成
|
||
</Button>
|
||
</header>
|
||
<main>
|
||
<aside className="issues">
|
||
<h1>图层</h1>
|
||
{layerLabels.map(([key, text]) => (
|
||
<label key={key}>
|
||
<input
|
||
type="checkbox"
|
||
checked={layers[key]}
|
||
onChange={(event) => setLayers({ ...layers, [key]: event.target.checked })}
|
||
/>{' '}
|
||
{text}
|
||
</label>
|
||
))}
|
||
<hr />
|
||
<h1>当前编译概览</h1>
|
||
<dl>
|
||
{Object.entries(state.comparison).map(([key, value]) => (
|
||
<>
|
||
<dt key={`${key}-t`}>{key}</dt>
|
||
<dd key={`${key}-d`}>{String(value)}</dd>
|
||
</>
|
||
))}
|
||
</dl>
|
||
<hr />
|
||
<h1>待检查问题</h1>
|
||
<div className="segmented">
|
||
{(['all', 'candidates', 'other'] as const).map((kind) => (
|
||
<Button className={filter === kind ? 'active' : ''} onClick={() => setFilter(kind)} key={kind}>
|
||
{kind === 'all' ? '全部' : kind === 'candidates' ? '可连接' : '其他'}
|
||
</Button>
|
||
))}
|
||
</div>
|
||
<ul>
|
||
{diagnostics.map((item) => (
|
||
<li key={item.id}>
|
||
<Button
|
||
onClick={() => {
|
||
const road = state.compiled.model.roads.find((itemRoad) => itemRoad.id === item.subjectId);
|
||
if (road) setSelected(road);
|
||
setStatus(item.message);
|
||
}}
|
||
>
|
||
{item.message}
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</aside>
|
||
<MapCanvas
|
||
state={state}
|
||
selected={selected}
|
||
visible={layers}
|
||
scene={scene}
|
||
onSelectRoad={setSelected}
|
||
onFeature={handleFeature}
|
||
/>
|
||
<Inspector
|
||
road={selected}
|
||
state={state}
|
||
staged={staged}
|
||
marking={marking}
|
||
stage={stage}
|
||
status={setStatus}
|
||
setState={setState}
|
||
/>
|
||
</main>
|
||
</>
|
||
);
|
||
}
|
||
function ImportScreen({ status, onImported }: { status: string; onImported: (state: WorkbenchState) => void }) {
|
||
const [file, setFile] = useState<File>();
|
||
const [busy, setBusy] = useState(false);
|
||
return (
|
||
<section className="import-screen">
|
||
<form
|
||
onSubmit={async (event) => {
|
||
event.preventDefault();
|
||
if (!file) return;
|
||
setBusy(true);
|
||
try {
|
||
onImported(await api.import(file));
|
||
} catch (error) {
|
||
console.error(error);
|
||
} finally {
|
||
setBusy(false);
|
||
}
|
||
}}
|
||
>
|
||
<h1>导入 OSM 地图</h1>
|
||
<p>{status}</p>
|
||
<input
|
||
type="file"
|
||
accept=".osm,application/xml,text/xml"
|
||
onChange={(event) => setFile(event.target.files?.[0])}
|
||
required
|
||
/>
|
||
<Button type="submit" disabled={!file || busy}>
|
||
<Upload size={16} /> {busy ? '正在导入并编译...' : '导入并编译'}
|
||
</Button>
|
||
</form>
|
||
</section>
|
||
);
|
||
}
|
||
function Inspector({
|
||
road,
|
||
state,
|
||
staged,
|
||
marking,
|
||
stage,
|
||
status,
|
||
setState,
|
||
}: {
|
||
road: Road | null;
|
||
state: WorkbenchState;
|
||
staged: Override[];
|
||
marking: Record<string, unknown> | null;
|
||
stage: (item: Override) => void;
|
||
status: (value: string) => void;
|
||
setState: (next: WorkbenchState) => void;
|
||
}) {
|
||
const [width, setWidth] = useState(0);
|
||
const [lanes, setLanes] = useState(1);
|
||
const [left, setLeft] = useState(false);
|
||
const [right, setRight] = useState(false);
|
||
useEffect(() => {
|
||
if (road) {
|
||
setWidth(road.widthMeters);
|
||
setLanes(road.laneCount);
|
||
setLeft(road.sidewalkLeft);
|
||
setRight(road.sidewalkRight);
|
||
}
|
||
}, [road]);
|
||
const endpoint = state.compiled.model.endpoints.find((item) => item.roadId === road?.id && item.side === 'end');
|
||
const movements = state.compiled.movements?.filter((item) => item.fromRoadId === road?.id) || [];
|
||
const effective = (id: string, fallback: boolean) =>
|
||
((staged.find((item) => item.id === id) || state.overrides.overrides.find((item) => item.id === id))?.enabled as
|
||
boolean | undefined) ?? fallback;
|
||
const updateSignal = async (features: GeoFeature[]) => {
|
||
try {
|
||
const result = await api.signals({
|
||
...state.trafficSignals,
|
||
assemblies: { ...state.trafficSignals.assemblies, features },
|
||
});
|
||
setState({ ...state, trafficSignals: result.trafficSignals, trafficRuntime: result.trafficRuntime });
|
||
status('红绿灯已保存');
|
||
} catch (error) {
|
||
status((error as Error).message);
|
||
}
|
||
};
|
||
const signalUid = typeof marking?.signal_uid === 'string' ? marking.signal_uid : '';
|
||
const signal = state.trafficSignals.assemblies.features.find((item) => item.properties?.signal_uid === signalUid);
|
||
return (
|
||
<aside className="inspector">
|
||
<h1>当前道路设置</h1>
|
||
{road ? (
|
||
<form
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
stage({
|
||
id: `道路:${road.id}`,
|
||
kind: 'road',
|
||
roadId: road.id,
|
||
widthMeters: width,
|
||
laneCount: lanes,
|
||
sidewalkLeft: left,
|
||
sidewalkRight: right,
|
||
});
|
||
const opposite = state.compiled.model.roads.find(
|
||
(item) => item.id !== road.id && item.segmentId === road.segmentId,
|
||
);
|
||
if (opposite)
|
||
stage({
|
||
id: `道路:${opposite.id}`,
|
||
kind: 'road',
|
||
roadId: opposite.id,
|
||
sidewalkLeft: right,
|
||
sidewalkRight: left,
|
||
});
|
||
status('有未保存修改');
|
||
}}
|
||
>
|
||
<label>道路</label>
|
||
<output>
|
||
{label(road)}（{direction(road)}）
|
||
</output>
|
||
<output>
|
||
{movements.length
|
||
? `已识别 ${movements.length} 个行驶动作，${movements.filter((item) => item.geometryPublished).length} 条已绘制路径`
|
||
: '当前方向没有已识别的行驶动作'}
|
||
</output>
|
||
<label>
|
||
本方向道路宽度（米）
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
step="0.01"
|
||
value={width}
|
||
onChange={(event) => setWidth(Number(event.target.value))}
|
||
/>
|
||
</label>
|
||
<label>
|
||
本方向车道数
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
step="1"
|
||
value={lanes}
|
||
onChange={(event) => setLanes(Number(event.target.value))}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" checked={left} onChange={(event) => setLeft(event.target.checked)} />{' '}
|
||
左侧有路缘与步行带
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" checked={right} onChange={(event) => setRight(event.target.checked)} />{' '}
|
||
右侧有路缘与步行带
|
||
</label>
|
||
<Button type="submit">暂存本道路修改</Button>
|
||
</form>
|
||
) : (
|
||
<p>点击道路、车道、标线、转向路径或路口面以查看详情。</p>
|
||
)}
|
||
<hr />
|
||
<h2>路口连接与行驶动作</h2>
|
||
{road &&
|
||
state.compiled.model.connections
|
||
.filter((connection) => connection.fromEndpointId === endpoint?.id)
|
||
.map((connection) => (
|
||
<label key={connection.id}>
|
||
<input
|
||
type="checkbox"
|
||
checked={effective(`连接:${connection.id}`, connection.enabled)}
|
||
onChange={(event) =>
|
||
stage({
|
||
id: `连接:${connection.id}`,
|
||
kind: 'junction-connection',
|
||
fromEndpointId: connection.fromEndpointId,
|
||
toEndpointId: connection.toEndpointId,
|
||
enabled: event.target.checked,
|
||
})
|
||
}
|
||
/>{' '}
|
||
{connection.id}
|
||
</label>
|
||
))}
|
||
{movements.map((movement) => (
|
||
<label key={movement.id}>
|
||
<input
|
||
type="checkbox"
|
||
checked={effective(`车道连接:${movement.fromLaneId}->${movement.toLaneId}`, true)}
|
||
onChange={(event) =>
|
||
stage({
|
||
id: `车道连接:${movement.fromLaneId}->${movement.toLaneId}`,
|
||
kind: 'lane-connection',
|
||
fromLaneId: movement.fromLaneId,
|
||
toLaneId: movement.toLaneId,
|
||
enabled: event.target.checked,
|
||
})
|
||
}
|
||
/>{' '}
|
||
{movement.turn}：第 {laneIndex(movement.fromLaneId)} 车道 → 第 {laneIndex(movement.toLaneId)} 车道（
|
||
{movement.geometryStatus || 'connector'}）
|
||
</label>
|
||
))}
|
||
{endpoint &&
|
||
state.compiled.diagnostics
|
||
.find((item) => item.endpointId === endpoint.id)
|
||
?.manualCandidates?.map((candidate) => {
|
||
const target = state.compiled.model.roads.find((item) => item.id === candidate.roadId);
|
||
const targetEndpoint = state.compiled.model.endpoints.find(
|
||
(item) => item.roadId === candidate.roadId && item.side === 'start',
|
||
);
|
||
return target && targetEndpoint ? (
|
||
<Button
|
||
key={candidate.roadId}
|
||
onClick={() => {
|
||
stage({
|
||
id: `连接:connection:${endpoint.id}:${targetEndpoint.id}`,
|
||
kind: 'junction-connection',
|
||
fromEndpointId: endpoint.id,
|
||
toEndpointId: targetEndpoint.id,
|
||
enabled: true,
|
||
});
|
||
status('手工连接已暂存；保存并重新生成后会出现转向路径');
|
||
}}
|
||
>
|
||
新增：{label(target)}（{candidate.distanceMeters} 米）
|
||
</Button>
|
||
) : null;
|
||
})}
|
||
<MarkingEditor marking={marking} stage={stage} />
|
||
<SignalEditor state={state} signal={signal} status={status} update={updateSignal} />
|
||
<Candidates state={state} setState={setState} status={status} />
|
||
<details>
|
||
<summary>技术详情与来源</summary>
|
||
<pre>
|
||
{JSON.stringify(
|
||
road ? { OSM道路: road.osmWayIds, 当前方向节点顺序: road.sourceNodeIds, 原始标签: road.tags } : marking,
|
||
null,
|
||
2,
|
||
)}
|
||
</pre>
|
||
</details>
|
||
</aside>
|
||
);
|
||
}
|
||
function MarkingEditor({
|
||
marking,
|
||
stage,
|
||
}: {
|
||
marking: Record<string, unknown> | null;
|
||
stage: (item: Override) => void;
|
||
}) {
|
||
const style = typeof marking?.effective_style === 'string' ? marking.effective_style : '';
|
||
const [value, setValue] = useState(style || 'yellow-dashed');
|
||
useEffect(() => setValue(style || 'yellow-dashed'), [style]);
|
||
if (!style || !marking) return null;
|
||
const roadId = String(marking.road_id);
|
||
const segment = marking.segment_id;
|
||
const kind = String(marking.provenance || '');
|
||
const save = () => {
|
||
const [color, pattern] = value.replace('double-', '').split('-');
|
||
if (segment)
|
||
stage({
|
||
id: `道路中心线:${segment}`,
|
||
kind: 'center-line-style',
|
||
segmentId: segment,
|
||
color,
|
||
pattern,
|
||
double: value.startsWith('double-'),
|
||
});
|
||
else if (kind.includes('edge-line'))
|
||
stage({
|
||
id: `道路外缘线:${roadId}:${marking.side}`,
|
||
kind: 'edge-line-style',
|
||
roadId,
|
||
side: marking.side,
|
||
color,
|
||
pattern,
|
||
});
|
||
else
|
||
stage({
|
||
id: `车道分隔线:${roadId}:${marking.left_lane_index}-${marking.right_lane_index}`,
|
||
kind: 'lane-separator-style',
|
||
roadId,
|
||
leftLaneIndex: marking.left_lane_index,
|
||
rightLaneIndex: marking.right_lane_index,
|
||
color,
|
||
pattern,
|
||
});
|
||
};
|
||
return (
|
||
<form
|
||
onSubmit={(event) => {
|
||
event.preventDefault();
|
||
save();
|
||
}}
|
||
>
|
||
<hr />
|
||
<h2>标线样式</h2>
|
||
<label>
|
||
样式
|
||
<select
|
||
value={value}
|
||
onChange={(event) => {
|
||
setValue(event.target.value);
|
||
}}
|
||
>
|
||
<option value="yellow-dashed">黄色虚线</option>
|
||
<option value="white-dashed">白色虚线</option>
|
||
<option value="yellow-solid">黄色实线</option>
|
||
<option value="white-solid">白色实线</option>
|
||
{segment ? <option value="double-yellow-solid">双黄实线</option> : null}
|
||
</select>
|
||
</label>
|
||
<Button type="submit">暂存标线样式</Button>
|
||
</form>
|
||
);
|
||
}
|
||
function SignalEditor({
|
||
state,
|
||
signal,
|
||
status,
|
||
update,
|
||
}: {
|
||
state: WorkbenchState;
|
||
signal?: GeoFeature;
|
||
status: (text: string) => void;
|
||
update: (features: GeoFeature[]) => Promise<void>;
|
||
}) {
|
||
const [selected, setSelected] = useState('');
|
||
useEffect(() => setSelected(String(signal?.properties?.signal_uid || '')), [signal]);
|
||
const feature = state.trafficSignals.assemblies.features.find((item) => item.properties?.signal_uid === selected);
|
||
const saveField = (key: string, value: unknown) => {
|
||
if (!feature) return;
|
||
void update(
|
||
state.trafficSignals.assemblies.features.map((item) =>
|
||
item === feature ? { ...item, properties: { ...item.properties, [key]: value } } : item,
|
||
),
|
||
);
|
||
};
|
||
return (
|
||
<section>
|
||
<hr />
|
||
<h2>原生红绿灯</h2>
|
||
<Button
|
||
onClick={() =>
|
||
void api
|
||
.generateSignals()
|
||
.then((next) => {
|
||
void update(next.trafficSignals.assemblies.features);
|
||
status('已补充 OSM 信号灯');
|
||
})
|
||
.catch((error: Error) => status(error.message))
|
||
}
|
||
>
|
||
从 OSM 生成缺失信号灯
|
||
</Button>
|
||
<label>
|
||
检查信号灯
|
||
<select value={selected} onChange={(event) => setSelected(event.target.value)}>
|
||
<option value="">选择设施</option>
|
||
{state.trafficSignals.assemblies.features.map((item) => (
|
||
<option key={String(item.properties?.signal_uid)} value={String(item.properties?.signal_uid)}>
|
||
{String(item.properties?.display_id || item.properties?.signal_uid)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
{feature ? (
|
||
<>
|
||
<label>
|
||
横杆方向（度）
|
||
<input
|
||
type="number"
|
||
value={Number(feature.properties?.mast_heading_deg || 0)}
|
||
onChange={(event) => saveField('mast_heading_deg', Number(event.target.value))}
|
||
/>
|
||
</label>
|
||
<label>
|
||
横杆长度（米）
|
||
<input
|
||
type="number"
|
||
value={Number(feature.properties?.mast_reach_m || 0)}
|
||
onChange={(event) => saveField('mast_reach_m', Number(event.target.value))}
|
||
/>
|
||
</label>
|
||
<label>
|
||
灯面朝向（度）
|
||
<input
|
||
type="number"
|
||
value={Number(feature.properties?.face_heading_deg || 0)}
|
||
onChange={(event) => saveField('face_heading_deg', Number(event.target.value))}
|
||
/>
|
||
</label>
|
||
<label>
|
||
<input
|
||
type="checkbox"
|
||
checked={Boolean(feature.properties?.enabled)}
|
||
onChange={(event) => saveField('enabled', event.target.checked)}
|
||
/>{' '}
|
||
启用
|
||
</label>
|
||
<Button
|
||
onClick={() =>
|
||
void update(state.trafficSignals.assemblies.features.filter((item) => item !== feature)).then(() => {
|
||
setSelected('');
|
||
status('红绿灯已删除');
|
||
})
|
||
}
|
||
>
|
||
删除信号灯
|
||
</Button>
|
||
</>
|
||
) : null}
|
||
</section>
|
||
);
|
||
}
|
||
function Candidates({
|
||
state,
|
||
setState,
|
||
status,
|
||
}: {
|
||
state: WorkbenchState;
|
||
setState: (state: WorkbenchState) => void;
|
||
status: (text: string) => void;
|
||
}) {
|
||
const candidates = state.debug?.junctionCandidates || [];
|
||
if (!candidates.length) return null;
|
||
return (
|
||
<section>
|
||
<hr />
|
||
<h2>复杂路口候选（debug）</h2>
|
||
{candidates.map((candidate) => (
|
||
<Button
|
||
key={candidate.id}
|
||
onClick={() =>
|
||
void api
|
||
.acceptJunctionCandidate(candidate.index)
|
||
.then((next) => {
|
||
setState(next);
|
||
status(`已加入 ${next.added.id} 并重新编译`);
|
||
})
|
||
.catch((error: Error) => status(error.message))
|
||
}
|
||
>
|
||
加入候选 #{candidate.index}（{candidate.nodeCount} 节点，{candidate.diameterMeters} 米）
|
||
</Button>
|
||
))}
|
||
</section>
|
||
);
|
||
}
|
||
export default App;
|