Cesium实现3d三维飞机地球任意飞行操控体验代码-html代码-BFW代码库

Cesium实现3d三维飞机地球任意飞行操控体验代码

代码语言：html

所属分类：三维

代码描述：Cesium实现3d三维飞机地球任意飞行操控体验代码，可输入全球任意城市名字或坐标进行高空飞行体验。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>3D Real Flight Sim </title>
    <!-- 引入 Cesium -->
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.113/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    
    <!-- 引入 Leaflet (用于小地图) -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

    <style>
        body { margin: 0; overflow: hidden; background: #000; user-select: none; font-family: "Consolas", "Courier New", monospace; }
        #cesiumContainer { width: 100%; height: 100vh; cursor: crosshair; }
        
        /* === 启动遮罩 === */
        #start-overlay {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.85); z-index: 10000;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            color: #0f0; cursor: pointer; transition: opacity 0.5s;
        }
        #start-overlay h1 { font-size: 40px; text-shadow: 0 0 20px #0f0; margin-bottom: 20px; }
        #start-overlay p { font-size: 18px; color: #fff; animation: blink 1s infinite; }
        @keyframes blink { 50% { opacity: 0.5; } }

        /* === 驾驶舱 UI === */
        #hud-overlay {
            position: absolute; top: 20px; left: 20px;
            color: #0f0; background: rgba(0, 15, 0, 0.7); 
            padding: 15px; border: 1px solid rgba(0, 255, 0, 0.5);
            border-radius: 8px; z-index: 999; min-width: 300px;
            backdrop-filter: blur(8px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
        }
        
        h2 { margin: 0 0 10px 0; font-size: 18px; border-bottom: 1px solid rgba(0,255,0,0.3); padding-bottom: 5px; text-align: center; color: #fff; text-shadow: 0 0 5px #0f0; }
        .stat-row { display: flex; justify-content: space-between; margin: 5px 0; font-weight: bold; font-size: 15px; }
        .settings-box { margin-top: 15px; border-top: 1px dashed rgba(0,255,0,0.3); padding-top: 10px; }
        .control-group { margin-bottom: 12px; }
        .control-label { font-size: 12px; color: #bbb; display: block; margin-bottom: 5px; }
        
        select, input[type=range], input[type=text], button { width: 100%; cursor: pointer;.........完整代码请登录后点击上方下载按钮下载查看