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 地理可视化项目。

cesium maximumScreenSpaceError

A tile’s screen space error is roughly equivalent to the number of pixels wide that would be drawn if a sphere with a radius equal to the tile’s geometric error were rendered at the tile’s position. If this value exceeds maximumScreenSpaceError the tile refines to its descendants.

瓦片的屏幕空间误差大致相当于如果以与瓦片几何误差相等的半径绘制一个球体，并在瓦片位置渲染时，该球体所绘制的像素宽度。如果此值超过 maximumScreenSpaceError ，则瓦片将细化到其子代。

Depending on the tileset, maximumScreenSpaceError may need to be tweaked to achieve the right balance. Higher values provide better performance but lower visual quality.

根据瓦片集的不同，可能需要调整 maximumScreenSpaceError 以实现正确的平衡。更高的值提供更好的性能，但视觉质量较低。

cesium 用帧缓存实现了什么

渲染不生效问题

为啥有时候在cesium地图上触发某些接口不会立马生效，例如上面的map.removeGraphic(graphic); 需要拖动地图或者放大缩小等操作才会看到生效

map.viewer.scene.requestRender(); // 手动触发渲染