cesium

basic

代码

src/components/react/cesium/template.tsx

import { useEffect, useRef, useReducer } from "react";
import { Viewer, Ion, IonWorldImageryStyle, ImageryLayer } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
Ion.defaultAccessToken =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwOWRkMzFlYS0yMDVhLTRkNzYtYWJmMC1hMmE1NjljN2MyNjMiLCJpZCI6NzMzNDQsImlhdCI6MTYzNjgxNDEzNX0.Q2MfD_lkQgsJ-R3NPfYjS9QA9q_j4Py8DktYKsPmZNg";

// 定义状态类型
type State = {
  viewer: Viewer | null;
  scene: any | null;
};

// 定义action类型
type Action =
  | { type: "INIT_VIEWER"; payload: { viewer: Viewer; scene: any } }
  | { type: "DESTROY_VIEWER" };

// 创建reducer函数
function cesiumReducer(state: State, action: Action): State {
  switch (action.type) {
    case "INIT_VIEWER":
      return {
        ...state,
        viewer: action.payload.viewer,
        scene: action.payload.scene,
      };
    case "DESTROY_VIEWER":
      return {
        ...state,
        viewer: null,
        scene: null,
      };
    default:
      return state;
  }
}

export default function Control() {
  const cesiumRef = useRef(null);
  const [state, dispatch] = useReducer(cesiumReducer, {
    viewer: null,
    scene: null,
  });

  useEffect(() => {
    if (cesiumRef.current && !state.viewer) {
      const viewer = new Viewer(cesiumRef.current, {
        terrainProvider: undefined,
        baseLayerPicker: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        baseLayer: ImageryLayer.fromWorldImagery({}),
      });

      //@ts-ignore
      viewer._cesiumWidget._creditContainer.parentNode.removeChild(
        //@ts-ignore
        viewer._cesiumWidget._creditContainer
      );

      const scene = viewer.scene;
      const canvas = viewer.canvas;
      canvas.setAttribute("tabindex", "0");
      canvas.onclick = () => canvas.focus();

      dispatch({ type: "INIT_VIEWER", payload: { viewer, scene } });

      const handleWheel = (event: WheelEvent) => {
        event.stopPropagation();
      };
      cesiumRef.current.addEventListener("wheel", handleWheel);

      return () => {
        viewer.destroy();
        dispatch({ type: "DESTROY_VIEWER" });
      };
    }
  }, []);

  return (
    <div>
      <div
        onDoubleClick={() => {
          if (cesiumRef.current) {
            if (document.fullscreenElement) {
              document.exitFullscreen();
            } else {
              cesiumRef.current.requestFullscreen();
            }
          }
        }}
        ref={cesiumRef}
        style={{ width: "100%", height: "500px", userSelect: "none" }}
      />
    </div>
  );
}

tips

cesium 鼠标左键旋转右键平移

let controller = viewer.scene.screenSpaceCameraController;
controller.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG];
controller.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG];

google earth demo

https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/

components

实时跟踪

当前位置定位：刷新页面，查看当前位置

当前坐标: 39.00000, 116.00000

代码

src/components/react/cesium/work/trackline.tsx

import { Cartesian3, Color, Entity, PointGraphics } from "cesium";
import { useCesium } from "../hooks/useCesium";
import { useCallback, useEffect, useState } from "react";
import "cesium/Build/Cesium/Widgets/widgets.css";
import { Button } from "@components/react/shadcn/ui/button";

export default () => {
  const { cesiumContainerRef, viewer } = useCesium();
  const [currentEntity, setCurrentEntity] = useState<Entity>(); // 存储位置实体
  const [watchId, setWatchId] = useState<number>(null);

  type CurrentLocation = {
    latitude?: number;
    longitude?: number;
  };

  const [currentLocation, setCurrentLocation] = useState<CurrentLocation>({
    latitude: 39,
    longitude: 116,
  });

  // 初始化时检查地理位置权限
  useEffect(() => {
    if (!navigator.geolocation) {
      alert("浏览器不支持地理位置功能");
      return;
    }

    navigator.permissions
      .query({ name: "geolocation" })
      .then(permissionStatus => {
        if (permissionStatus.state === "denied") {
          alert("请允许地理位置权限以使用此功能");
        }
      });
  }, []);

  // 更新地图上的位置标记
  const updatePositionMarker = useCallback(
    (longitude: number, latitude: number) => {
      if (!viewer.current) return;

      // 移除旧实体
      if (currentEntity) {
        viewer.current.entities.remove(currentEntity);
      }

      // 创建新实体
      const newEntity = viewer.current.entities.add({
        position: Cartesian3.fromDegrees(longitude, latitude),
        point: new PointGraphics({
          color: Color.RED,
          pixelSize: 10,
          outlineColor: Color.WHITE,
          outlineWidth: 2,
        }),
        model: {
          uri: "/assets/models/gltf/Cesium_Man.glb",
          scale: 2,
        },
      });

      setCurrentEntity(newEntity);

      // 移动视角到当前位置
      viewer.current.camera.flyTo({
        destination: Cartesian3.fromDegrees(longitude, latitude, 1000),
        orientation: {
          heading: 0,
          roll: 0,
        },
      });
    },
    [viewer.current, currentEntity]
  );

  // 监听位置变化
  const watchCurrentLocation = useCallback(() => {
    const id = navigator.geolocation.watchPosition(
      position => {
        const { latitude, longitude } = position.coords;
        setCurrentLocation({ latitude, longitude });
        updatePositionMarker(longitude, latitude);
      },
      error => {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            alert("用户拒绝了地理位置请求");
            break;
          case error.POSITION_UNAVAILABLE:
            alert("无法获取位置信息");
            break;
          case error.TIMEOUT:
            alert("请求超时");
            break;
          default:
            alert("未知错误");
        }
      },
      {
        enableHighAccuracy: true,
        timeout: 10000,
        maximumAge: 0,
      }
    );
    setWatchId(id);
  }, [updatePositionMarker]);

  // 清理
  useEffect(() => {
    return () => {
      if (watchId) navigator.geolocation.clearWatch(watchId);
      if (currentEntity && viewer.current) {
        viewer.current.entities.remove(currentEntity);
      }
    };
  }, [watchId, currentEntity]);

  return (
    <>
      <div
        ref={cesiumContainerRef}
        style={{
          width: "100%",
          height: "500px",
          userSelect: "none",
          position: "relative",
          zIndex: 0,
        }}
      />
      <Button onClick={watchCurrentLocation}>开始实时定位</Button>

      <div className="position-info">
        当前坐标: {currentLocation.latitude?.toFixed(5)},{" "}
        {currentLocation.longitude?.toFixed(5)}
      </div>
    </>
  );
};

历史轨迹

第一版:实现人员跟踪

漫思

vite-plugin-cesium的原理

vite-plugin-cesium

vite-plugin-cesium 是一个用于简化在 Vite 项目中集成 CesiumJS 的插件。它的核心原理是通过自动化配置和资源处理，解决 CesiumJS 在 Vite 中常见的静态资源加载、路径配置、模块兼容性等问题。以下是其工作原理的详细分析：

1. 自动依赖管理与路径别名

Cesium 安装：插件会自动安装 cesium npm 包，或确保用户已正确安装。

别名配置：在 Vite 配置中设置路径别名，将 cesium 指向 node_modules/cesium，简化模块导入：

// vite.config.js
export default {
  resolve: {
    alias: {
      cesium: path.resolve(__dirname, "node_modules/cesium"),
    },
  },
};

2. 静态资源处理

CesiumJS 依赖大量静态资源（如 WebAssembly、图片、CSS 等），这些资源需要被正确加载。

资源复制：插件在开发阶段将 node_modules/cesium/Build/Cesium 下的静态资源复制到 Vite 项目的 public 目录（或指定路径），确保开发服务器能访问它们。
生产构建处理：在构建阶段，资源会被打包到输出目录（如 dist），并通过 CESIUM_BASE_URL 配置基础路径。

3. Web Workers 与 WASM 配置

CesiumJS 使用 Web Workers 和 WebAssembly 提升性能，但浏览器安全策略要求这些文件必须通过正确的 MIME 类型和路径加载。

Worker 文件处理：通过 vite 的 worker 插件配置，将 .js 文件标记为 Web Workers，确保其被正确隔离和加载。
WASM 配置：配置 .wasm 文件作为异步模块加载，并设置正确的 MIME 类型（如 application/wasm）。

4. 环境变量注入

CESIUM_BASE_URL：插件自动设置环境变量 CESIUM_BASE_URL，指向静态资源的基础路径（如开发环境的 /public 或生产环境的相对路径）。CesiumJS 通过此变量加载资源：
```
window.CESIUM_BASE_URL = "/";
```

5. Vite 构建配置调整

资源包含规则：扩展 assetsInclude 配置，让 Vite 识别 Cesium 相关文件（如 .glb, .czml 等）。
CommonJS 转换：CesiumJS 使用 CommonJS 模块，插件通过 @rollup/plugin-commonjs 将其转换为 ESM，确保与 Vite 的 ESM 环境兼容。
依赖优化：在 optimizeDeps 中排除 Cesium，避免 Vite 预构建时处理其复杂依赖。

6. 开发服务器中间件配置

CORS 头设置：为开发服务器添加中间件，设置 Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 头，解决 Web Worker 的跨域限制。
静态资源代理：确保对 Cesium 资源的请求被正确代理到本地文件或 CDN。

7. 生产优化

代码拆分：配置 Rollup 避免拆分关键 Cesium 模块，保持运行时完整性。
资源压缩：启用 build.minify 压缩代码，同时确保 WASM 等二进制文件不被破坏。

总结

vite-plugin-cesium 通过以下方式简化开发：

自动化配置：隐藏复杂的路径、资源处理和模块转换逻辑。
环境适配：统一开发和生产环境下的静态资源加载行为。
兼容性处理：解决 CJS/ESM 模块差异和浏览器安全策略问题。

开发者只需安装插件并导入 Cesium，无需手动处理上述细节，即可快速启动 3D 地理可视化项目。