Electron + React + Cesium构建桌面地图应用

技术选型背景与优势

Electron作为跨平台桌面应用框架的优势，结合React前端库的高效UI开发能力，以及Cesium在三维地理空间可视化领域的专业性，阐述三者结合的应用场景（如地质勘探、智慧城市等）。

环境搭建与基础配置

Electron项目初始化，集成React的配置步骤（如electron-react-boilerplate或手动配置Webpack/Babel）。Cesium库的引入方式（CDN或npm安装），解决Cesium在Electron中的静态资源加载问题。

核心功能模块设计

electron-main.cjs文件配置，这里配置了热更新可以同步调试Electron。

// 热重载，仅开发环境生效
if (process.env.NODE_ENV === "development") {
  require("electron-reload")(__dirname, {
    electron: require("path").join(
      __dirname,
      "node_modules",
      ".bin",
      "electron"
    ),
    ignored: /dist|node_modules|[\\/]\\./,
  });
}

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
    },
  });

  // 移除顶部菜单栏
  win.setMenu(null);
  win.webContents.openDevTools(); // 自动打开调试工具

  // 开发环境加载 Vite 本地服务器，生产环境加载打包后的 index.html
  if (process.env.NODE_ENV === "development") {
    win.loadURL("http://localhost:5173");
  } else {
    win.loadFile(path.join(__dirname, "dist", "index.html"));
  }
}

app.whenReady().then(createWindow);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

eslint.config.js配置

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
)

完整的package,可复制到工程下，npm i。

{
  "name": "electron-cesium",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron-main.cjs",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "electron": "cross-env NODE_ENV=development electron .",
    "start": "electron ."
  },
  "dependencies": {
    "@ant-design/icons": "^6.0.0",
    "antd": "^5.26.0",
    "cesium": "^1.130.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.25.0",
    "@types/react": "^19.1.2",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.4.1",
    "cross-env": "^7.0.3",
    "electron": "^36.4.0",
    "electron-reload": "^2.0.0-alpha.1",
    "eslint": "^9.25.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "globals": "^16.0.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vite": "^6.3.5"
  }
}

三维数据可视化实践

通过React组件控制Cesium的实体加载（如3D模型、GeoJSON数据），动态数据绑定的实现方案。Electron本地文件系统API读取地理数据（如DEM、倾斜摄影模型），并传递给Cesium渲染。

性能优化与调试

Electron应用打包优化（如electron-builder配置），Cesium在桌面端的性能调优（如WebWorker使用、LOD策略）。React组件渲染性能监控（React DevTools集成）。

效果展示：

最后附上git仓库：

https://github.com/kalaxiaoke777/electron-cesium.git