优化界面

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: <SettingOutlined/>,
                 key: '/map',
             },
-            {
-                label: this.webgl_supported ? '3D地图' : '3D地图(WebGL不可用)',
-                icon: <SettingOutlined/>,
-                key: '/map3d',
-                disabled: !this.webgl_supported,
-            },
             {
                 label: '设置',
                 icon: <SettingOutlined/>,
@@ -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 <Switch checked={map3d} checkedChildren="3D" unCheckedChildren="2D" onChange={this.switch_map}
+                       style={{position: "absolute", left: "50%", top: 8, zIndex: 10000, transform: "translateX(-50%)"}}/>;
+    }
+
     formatTimestamp(ts: number | string): string {
         const n = Number(ts);
 
@@ -169,7 +168,10 @@ class App extends enhance.Base {
     }
 
     render() {
-        const map2d = <div style={{width: '100%', height: '100%', position: 'relative'}}><this.leaflet_map.x/></div>;
+        const map2d = <div style={{width: '100%', height: '100%', position: 'relative'}}>
+            <this.leaflet_map.x/>
+            {this.render_map_switch(false)}
+        </div>;
         const settings = <this.setting.x/>;
         const aircraftList = <div style={{flex: 1}}><this.aircraft_list.x/></div>;
         const dataTopology = <React.Suspense fallback={<div style={{padding: 20}}>数据拓扑加载中...</div>}><Data_Topology_View/></React.Suspense>;
@@ -178,6 +180,7 @@ class App extends enhance.Base {
                 <React.Suspense fallback={<div style={{padding: 20}}>3D地图加载中...</div>}>
                     <Cesium_Map_View initialSceneMode="3d"/>
                 </React.Suspense>
+                {this.render_map_switch(true)}
             </div>
             : <Navigate to={fallback} replace/>;
         return (

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)}<br>${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));

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;