diff --git a/src/App.tsx b/src/App.tsx index b0eedc0..b799261 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,7 +5,7 @@ import enhance from './core/enhance.tsx'; import {useEffect} from 'react'; import {SettingOutlined} from '@ant-design/icons'; -import {Menu, type MenuProps, message} from 'antd'; +import {Menu, type MenuProps, message, Switch} from 'antd'; import { BrowserRouter, @@ -64,16 +64,10 @@ class App extends enhance.Base { this.menuItems = [ { - label: '2D地图', + label: '地图', icon: , key: '/map', }, - { - label: this.webgl_supported ? '3D地图' : '3D地图(WebGL不可用)', - icon: , - key: '/map3d', - disabled: !this.webgl_supported, - }, { label: '设置', icon: , @@ -117,17 +111,13 @@ class App extends enhance.Base { this.location = useLocation(); useEffect(() => { const path = this.location?.pathname || '/map'; - this.selected_key = path.startsWith('/ui/') ? path.substring(3) : path; + const route_key = path.startsWith('/ui/') ? path.substring(3) : path; + this.selected_key = route_key === "/map3d" ? "/map" : route_key; this.flush() }, [this.location]); useEffect(() => { const on_unavailable = () => { this.webgl_supported = false; - const item = this.menuItems.find((menu_item: any) => menu_item.key === "/map3d"); - if (item) { - item.label = "3D地图(WebGL不可用)"; - item.disabled = true; - } this.flush(); }; window.addEventListener("ecap_cesium_webgl_unavailable", on_unavailable); @@ -140,16 +130,25 @@ class App extends enhance.Base { } onClick: MenuProps['onClick'] = (e) => { - if (e.key === "/map3d" && !this.webgl_supported) { - message.warning(webgl_unavailable_message); - this.navigate("/map"); - return; - } this.selected_key = e.key; - this.navigate(this.selected_key); // 跳转到 /about 页面 + this.navigate(this.selected_key); this.flush(); }; + switch_map = (map3d: boolean) => { + if (map3d && !this.webgl_supported) { + message.warning(webgl_unavailable_message); + return; + } + const prefix = this.location?.pathname.startsWith("/ui/") ? "/ui" : ""; + this.navigate(`${prefix}/${map3d ? "map3d" : "map"}`); + }; + + render_map_switch(map3d: boolean) { + return ; + } + formatTimestamp(ts: number | string): string { const n = Number(ts); @@ -169,7 +168,10 @@ class App extends enhance.Base { } render() { - const map2d =
; + const map2d =
+ + {this.render_map_switch(false)} +
; const settings = ; const aircraftList =
; const dataTopology = 数据拓扑加载中...}>; @@ -178,6 +180,7 @@ class App extends enhance.Base { 3D地图加载中...}> + {this.render_map_switch(true)} : ; return ( diff --git a/src/Map/Cesium_Map.tsx b/src/Map/Cesium_Map.tsx index 9931a57..10eda00 100644 --- a/src/Map/Cesium_Map.tsx +++ b/src/Map/Cesium_Map.tsx @@ -1239,8 +1239,8 @@ export class Cesium_Map extends enhance.Base { } if (record.aircraft.model) { const selected = this.is_selected_aircraft(this.entity_key(aircraft.data_source.key, aircraft.icao)); - record.aircraft.model.silhouetteColor = new Cesium.ConstantProperty(selected ? this.aircraft_contrast_color(aircraft) : color); - record.aircraft.model.silhouetteSize = new Cesium.ConstantProperty(selected ? 6 : result ? result.obstructed ? 2 : 0 : 1); + record.aircraft.model.silhouetteColor = new Cesium.ConstantProperty(color); + record.aircraft.model.silhouetteSize = new Cesium.ConstantProperty(result ? result.obstructed ? 2 : 0 : 1); } const model = aircraft.data_model; record.aircraft.description = new Cesium.ConstantProperty(`${this.aircraft_description(model)}
${this.aircraft_occlusion_description(aircraft, result)}`); @@ -1350,7 +1350,7 @@ export class Cesium_Map extends enhance.Base { record.aircraft.model.enableVerticalExaggeration = new Cesium.ConstantProperty(false); record.aircraft.model.uri = new Cesium.ConstantProperty(this.aircraft_model_item(aircraft).url); (record.aircraft.model as any).silhouetteColor = new Cesium.ConstantProperty(contrast_color); - (record.aircraft.model as any).silhouetteSize = new Cesium.ConstantProperty(selected ? 6 : 0); + (record.aircraft.model as any).silhouetteSize = new Cesium.ConstantProperty(0); } if (record.aircraft.label) { record.aircraft.label.show = new Cesium.ConstantProperty(this.aircraft_label_enabled(aircraft)); diff --git a/src/Map/WebGL_Support.ts b/src/Map/WebGL_Support.ts index 71e6339..b9bd26b 100644 --- a/src/Map/WebGL_Support.ts +++ b/src/Map/WebGL_Support.ts @@ -9,7 +9,7 @@ type WebGL_Context_Options = { }; const webgl_context_names: WebGL_Context_Name[] = ["webgl2", "webgl", "experimental-webgl"]; const cesium_webgl_unavailable_key = "ecap_cesium_webgl_unavailable"; -export const webgl_unavailable_message = "当前电脑无法初始化 WebGL,已切换到 2D 地图"; +export const webgl_unavailable_message = "当前电脑无法初始化 WebGL,无法使用 3D 地图"; function create_webgl_context(canvas: HTMLCanvasElement, name: WebGL_Context_Name, options?: WebGL_Context_Options): WebGLRenderingContext | WebGL2RenderingContext | null { try { return canvas.getContext(name, options as object) as WebGLRenderingContext | WebGL2RenderingContext | null;