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 示例