npm - leiting-bim - Versions diffs - 2.1.36 → 2.1.39 - Mend

leiting-bim 2.1.36 → 2.1.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/plugins/cesium-core/src/test/roaming/view.html ADDED Viewed

@@ -0,0 +1,520 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cesium 视点漫游 (模拟飞行)</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/cesium@1.120.0/Build/Cesium/Widgets/widgets.css"
+    />
+    <style>
+      :root {
+        --bg-color: rgba(30, 30, 30, 0.85);
+        --text-color: #e0e0e0;
+        --accent-color: #3b82f6;
+        --accent-hover: #2563eb;
+        --danger-color: #ef4444;
+        --border-color: rgba(255, 255, 255, 0.1);
+      }
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        overflow: hidden;
+      }
+      #app {
+        position: absolute;
+        inset: 0;
+      }
+      /* Control Panel */
+      #control-panel {
+        position: absolute;
+        top: 20px;
+        left: 20px;
+        width: 320px;
+        z-index: 100;
+        background-color: var(--bg-color);
+        backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(12px);
+        color: var(--text-color);
+        border-radius: 12px;
+        border: 1px solid var(--border-color);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transition: opacity 0.3s;
+      }
+      .panel-header {
+        padding: 12px 16px;
+        background: rgba(255, 255, 255, 0.05);
+        font-weight: 600;
+        font-size: 16px;
+        border-bottom: 1px solid var(--border-color);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .panel-content {
+        padding: 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        max-height: 80vh;
+        overflow-y: auto;
+      }
+      .control-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .section-title {
+        font-size: 12px;
+        text-transform: uppercase;
+        color: #9ca3af;
+        letter-spacing: 0.5px;
+        font-weight: 600;
+      }
+      /* Inputs */
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+      .input-group label {
+        font-size: 12px;
+        color: #9ca3af;
+      }
+      input[type='number'],
+      input[type='text'] {
+        width: 100%;
+        padding: 6px 10px;
+        background: rgba(0, 0, 0, 0.3);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--text-color);
+        font-size: 13px;
+        outline: none;
+        box-sizing: border-box;
+      }
+      input[type='number']:focus,
+      input[type='text']:focus {
+        border-color: var(--accent-color);
+      }
+      .checkbox-group {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+        font-size: 13px;
+      }
+      input[type='checkbox'] {
+        cursor: pointer;
+      }
+      .row {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+      .row.grid-2 {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+      }
+      button {
+        padding: 6px 12px;
+        border: 1px solid var(--border-color);
+        background: rgba(255, 255, 255, 0.05);
+        color: var(--text-color);
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+      }
+      button:hover {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+      button.primary {
+        background: var(--accent-color);
+        border-color: transparent;
+        color: white;
+      }
+      button.primary:hover {
+        background: var(--accent-hover);
+      }
+      button.danger {
+        color: var(--danger-color);
+        border-color: rgba(239, 68, 68, 0.3);
+      }
+      button.danger:hover {
+        background: rgba(239, 68, 68, 0.1);
+      }
+      button.icon-btn {
+        font-size: 16px;
+        padding: 6px 0;
+      }
+      /* Viewpoint List */
+      .view-list {
+        max-height: 150px;
+        overflow-y: auto;
+        background: rgba(0, 0, 0, 0.2);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      .view-item {
+        padding: 6px 10px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .view-item:last-child {
+        border-bottom: none;
+      }
+      .view-item:hover {
+        background: rgba(255, 255, 255, 0.05);
+      }
+      .view-item .info {
+        display: flex;
+        flex-direction: column;
+      }
+      .view-item .actions {
+        display: flex;
+        gap: 4px;
+      }
+      .view-item .btn-del {
+        padding: 2px 6px;
+        font-size: 10px;
+        color: var(--danger-color);
+        border: 1px solid rgba(239, 68, 68, 0.3);
+        background: transparent;
+      }
+      .view-item .btn-del:hover {
+        background: rgba(239, 68, 68, 0.1);
+      }
+      .status-bar {
+        padding: 10px 16px;
+        background: rgba(0, 0, 0, 0.3);
+        border-top: 1px solid var(--border-color);
+        font-size: 12px;
+        color: #9ca3af;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .status-value {
+        color: var(--accent-color);
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="control-panel">
+      <div class="panel-header">
+        <span>📷 视点漫游 (模拟飞行)</span>
+      </div>
+      <div class="panel-content">
+        <!-- Parameters -->
+        <div class="control-section">
+          <div class="section-title">参数配置</div>
+          <div class="row grid-2">
+            <div class="input-group">
+              <label>速度 (speed)</label>
+              <input type="number" id="inpSpeed" value="500" min="1" />
+            </div>
+            <div class="input-group">
+              <label>模型缩放 (scale)</label>
+              <input type="number" id="inpScale" value="1.0" step="0.1" />
+            </div>
+          </div>
+          <div class="input-group">
+            <label>模型 URL (可选)</label>
+            <input
+              type="text"
+              id="inpModelUrl"
+              placeholder="例如: https://cesium.com/public/Cesium_Air.glb"
+              value="http://localhost:5176/src/test/roaming/c.gltf"
+            />
+          </div>
+          <div class="row">
+            <label class="checkbox-group">
+              <input type="checkbox" id="chkShowPath" checked />
+              <span>显示路径</span>
+            </label>
+            <label class="checkbox-group">
+              <input type="checkbox" id="chkShowStops" checked />
+              <span>显示视点图标</span>
+            </label>
+          </div>
+        </div>
+        <!-- Playback -->
+        <div class="control-section">
+          <div class="section-title">播放控制</div>
+          <div class="row grid-2">
+            <button id="btnToggle" class="primary icon-btn" title="开始/暂停">▶</button>
+            <button id="btnStop" class="danger icon-btn" title="停止">⏹</button>
+          </div>
+        </div>
+        <!-- Viewpoint Management -->
+        <div class="control-section">
+          <div class="section-title">视点列表管理</div>
+          <button id="btnSaveView" class="primary" style="width: 100%"
+            >📸 保存当前视角到列表</button
+          >
+          <ul id="viewList" class="view-list">
+            <!-- Items will be injected here -->
+            <li style="padding: 10px; text-align: center; color: #666">暂无视点</li>
+          </ul>
+        </div>
+      </div>
+      <div class="status-bar">
+        <span id="statusText">状态: <span class="status-value">就绪</span></span>
+        <span id="countText">视点: 0</span>
+      </div>
+    </div>
+    <div id="app"></div>
+    <script src="https://unpkg.com/cesium@1.120.0/Build/Cesium/Cesium.js"></script>
+    <script>
+      var _origDefine = window.define;
+      window.define = undefined;
+    </script>
+    <script src="../../../dist/cesium-core.umd.js"></script>
+    <script>
+      window.define = _origDefine;
+    </script>
+    <script>
+      Cesium.Ion.defaultAccessToken =
+        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjZGI0MzM1ZS1hMjY4LTRlYzgtYjg1MC03NmI2ZjUxMmM5ZTUiLCJpZCI6OTUzODIsImlhdCI6MTY1MzYyMTM4OX0.ygoPAb1FvQkQGtziq5nTsWT-u7dCheu5hcG0p9TQFpU';
+      const viewer = new Cesium.Viewer('app', {
+        baseLayerPicker: false,
+        geocoder: false,
+        homeButton: false,
+        sceneModePicker: false,
+        navigationHelpButton: false,
+        animation: true,
+        timeline: true,
+        terrainProvider: null,
+      });
+      // Load Terrain
+      (async () => {
+        try {
+          const terrainProvider = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
+            'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+          );
+          viewer.terrainProvider = terrainProvider;
+        } catch (err) {
+          console.error('ArcGIS Terrain Failed', err);
+          viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
+        }
+      })();
+      const cameraRoam = new CesiumCore.CameraRoamTool({ Cesium, viewer });
+      // State
+      let waypoints = [];
+      let isPlaying = false;
+      let isPaused = false;
+      // UI Elements
+      const viewListEl = document.getElementById('viewList');
+      const countText = document.getElementById('countText');
+      const statusText = document.getElementById('statusText');
+      const btnToggle = document.getElementById('btnToggle');
+      // Functions
+      function updatePreview() {
+        if (isPlaying) return;
+        if (waypoints.length < 2) {
+          // If less than 2 points, we can't really make a path, but maybe show points?
+          // The current tool clears everything on setup.
+          // We can just try to preview if >= 2.
+          // Or if 1 point, maybe show just that point?
+          // The tool requires >=2 for path.
+          cameraRoam.clear();
+          return;
+        }
+        const speed = Number(document.getElementById('inpSpeed').value) || 500;
+        const modelUrl = document.getElementById('inpModelUrl').value.trim();
+        const modelScale = Number(document.getElementById('inpScale').value) || 1.0;
+        const showPath = document.getElementById('chkShowPath').checked;
+        const showStops = document.getElementById('chkShowStops').checked;
+        cameraRoam.preview({
+          waypoints: waypoints,
+          speed: speed,
+          modelUrl: modelUrl || undefined,
+          modelScale: modelScale,
+          modelAnimate: modelAnimate,
+          showPath: showPath,
+          showStops: showStops,
+          loop: false,
+        });
+      }
+      function renderList() {
+        viewListEl.innerHTML = '';
+        if (waypoints.length === 0) {
+          viewListEl.innerHTML =
+            '<li style="padding: 10px; text-align: center; color: #666;">暂无视点</li>';
+          countText.innerText = '视点: 0';
+          // Clear preview
+          cameraRoam.clear();
+          return;
+        }
+        waypoints.forEach((w, index) => {
+          const li = document.createElement('li');
+          li.className = 'view-item';
+          // Format coords for display
+          const dest = w.destination;
+          const shortPos = `[${dest.x.toFixed(0)}, ${dest.y.toFixed(0)}, ${dest.z.toFixed(0)}]`;
+          li.innerHTML = `
+                <div class="info" title="点击跳转">
+                    <span style="font-weight: 600;">视点 ${index + 1}</span>
+                    <span style="font-size: 10px; color: #999;">${shortPos}</span>
+                </div>
+                <div class="actions">
+                    <button class="btn-del" onclick="removeView(${index})">删除</button>
+                </div>
+            `;
+          // Click to teleport (preview)
+          li.querySelector('.info').onclick = () => {
+            if (isPlaying) return;
+            viewer.camera.setView({
+              destination: new Cesium.Cartesian3(dest.x, dest.y, dest.z),
+              orientation: {
+                heading: w.orientation.heading,
+                pitch: w.orientation.pitch,
+                roll: w.orientation.roll,
+              },
+            });
+          };
+          viewListEl.appendChild(li);
+        });
+        countText.innerText = '视点: ' + waypoints.length;
+        // Update 3D Preview
+        updatePreview();
+      }
+      window.removeView = (index) => {
+        if (isPlaying) return;
+        waypoints.splice(index, 1);
+        renderList();
+      };
+      // Add Current View
+      document.getElementById('btnSaveView').onclick = () => {
+        const w = cameraRoam.captureCurrentView();
+        waypoints.push(w);
+        renderList();
+      };
+      // Playback Controls
+      btnToggle.onclick = () => {
+        if (!isPlaying) {
+          // Start
+          if (waypoints.length < 2) {
+            alert('至少需要2个视点才能开始漫游');
+            return;
+          }
+          const speed = Number(document.getElementById('inpSpeed').value) || 500;
+          const modelUrl = document.getElementById('inpModelUrl').value.trim();
+          const modelScale = Number(document.getElementById('inpScale').value) || 1.0;
+          const showPath = document.getElementById('chkShowPath').checked;
+          const showStops = document.getElementById('chkShowStops').checked;
+          cameraRoam.start({
+            waypoints: waypoints,
+            speed: speed,
+            modelUrl: modelUrl || undefined,
+            modelScale: modelScale,
+            modelAnimate: modelAnimate,
+            showPath: showPath,
+            showStops: showStops,
+            loop: false,
+            onComplete: () => {
+              statusText.innerHTML = '状态: <span class="status-value">完成</span>';
+              isPlaying = false;
+              isPaused = false;
+              btnToggle.innerText = '▶';
+              btnToggle.title = '开始';
+            },
+          });
+          isPlaying = true;
+          btnToggle.innerText = '⏸';
+          btnToggle.title = '暂停';
+          statusText.innerHTML = '状态: <span class="status-value">飞行中</span>';
+        } else {
+          // Pause/Resume
+          if (isPaused) {
+            cameraRoam.resume();
+            isPaused = false;
+            btnToggle.innerText = '⏸';
+            statusText.innerHTML = '状态: <span class="status-value">飞行中</span>';
+          } else {
+            cameraRoam.pause();
+            isPaused = true;
+            btnToggle.innerText = '▶';
+            statusText.innerHTML = '状态: <span class="status-value">已暂停</span>';
+          }
+        }
+      };
+      document.getElementById('btnStop').onclick = () => {
+        cameraRoam.stop();
+        cameraRoam.clear();
+        isPlaying = false;
+        isPaused = false;
+        btnToggle.innerText = '▶';
+        statusText.innerHTML = '状态: <span class="status-value">已停止</span>';
+      };
+    </script>
+  </body>
+</html>