vite+cesium 显示指南针

packjson 中

"dependencies": {                                                                        
 "cesium-graph-es": "github:QingMings/cesium-graph-es",                   
 "cesium-navigation-es": "github:QingMings/cesium-navigation-es",         
 "cesium-sensor-volumes-es": "github:QingMings/cesium-sensor-volumes-es",       
 "vite-plugin-cesium": "^1.2.10",
},

vite.config.ts 中配置

import reactRefresh from "@vitejs/plugin-react-refresh";
import path from "path";
import { defineConfig } from "vite";
import cesium from "vite-plugin-cesium";
// https://vitejs.dev/config/
export default defineConfig({
  resolve: { alias: { "@": path.resolve(process.cwd(), "src") } },
  root: process.cwd(),
  server: { port: 3366, host: "0.0.0.0" },
  base: "./",
  plugins: [reactRefresh(), cesium()],
});

页面显示

引入

 import { viewerCesiumNavigationMixin } from "cesium-navigation-es";
 import "../../../../../node_modules/cesium-navigation-es/dist/style.css";

  componentDidMount() {
    if (this.mapRef.current) {
       .......此处省略cesium 初始化代码
      this.showNavigation(); //!展示指南针
    }
  }
  
  //方法调用
  showNavigation = () => {
    if (!this.viewer) return;
    this.viewer.extend(viewerCesiumNavigationMixin, (e: any) => {
      console.log(e, "加载指南针");
    });
  };

代码地址

https://github.com/QingMings/cesium-vite/blob/master/package.json 引入导航插件的工程地址
https://github.com/QingMings/cesium-navigation-es 插件工程地址

https://github.com/richard1015/cesium-navigation-es6 非 vite 渲染
https://blog.csdn.net/Prepared/article/details/68940997?locationNum=10&fps=1 非 vite 示例