当前位置： 首页 > news >正文

electron与cesium组件入门应用功能

news 2026/4/1 0:33:02

electron与cesium组件入门应用功能

运行应用效果图：
在这里插入图片描述
在这里插入图片描述

electron应用目录，需要包括三个文件:
index.html
main.js
package.json

(一)、创建一个新项目
目录名称：project_helloWolrd

(二)、生成package.json文件

npm init --yes

(三）、运行该项目方法一
在终端cmd输入如下命令：

electron .

(四)、运行该项目方法二
#==========================================
#start cli cammand
全局安装

cnpm install -g electron @electron-forge/cli

#build cli electron-builder
打exe安装包我们使用electron-builder工具包，安装命令如下。
全局安装

cnpm install -g electron-builder

开始/打包生成exe文件

npm run start
npm run build

#==========================================
注意，json文件不能带注释，复制上面的文本后记得注释去掉。
修改package.json，添加一条scripts命令和build配置。

 "scripts": {"start": "electron-forge start","build": "electron-builder --win" // 打包命令},"devDependencies": {"@electron-forge/cli": "^6.2.1","electron": "^25.4.0","electron-builder": "^24.6.3"},"dependencies": {"cesium": "^1.112.0","@electron-forge/cli": "^6.2.1"},// `electron-builder`配置"build": {"productName": "我的应用", // 安装应用后桌面名称"directories": {"output": "out" // 输出的文件目录},"win": {"icon": "./ico/logo.ico", // 安装的图标"target": [{"target": "nsis","arch": ["x64","ia32"]}]},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./ico/logo.ico","uninstallerIcon": "./ico/logo.ico","installerHeaderIcon": "./ico/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的应用"}}

#==========================================
#如果报错，可以采用node_modules目录删除，重新下载依赖包

cnpm install

#cesium安装cmd命令： //OK

cnpm install cesium --save

（五)、源代码
main.js主程序文件内容：

const { app,BrowserWindow}=require("electron");
const path=require("path");const createWindow=()=>{const mainWindow=new BrowserWindow({width:600,height:400,});mainWindow.loadFile(path.join(__dirname,'indexCesium.html'));    //index.html  indexCesium.html////mainWindow.loadURL("https://gitee.com");//mainWindow.loadURL("https://blog.csdn.net/hsg77");
}//监听应用启动事件
app.on("ready",createWindow);

indexCesium.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>My Cesium App</title><script src="./node_modules/cesium/Build/Cesium/Cesium.js"></script><style>@import url(./node_modules/cesium/Build/Cesium/Widgets/widgets.css);html,body,#cesiumContainer {height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>var viewer = new Cesium.Viewer('cesiumContainer', {imageryProvider: new Cesium.TileMapServiceImageryProvider({url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII"),})});</script>
</body></html>

index.html

<html><head><meta charset="UTF-8"><title>electron Helloworld</title><link ref="stylesheet" href="css/base.css"/></head><body><h1>这是一个electron项目</h1><h2>这是一个electron项目</h2><h3>这是一个electron项目</h3><h4>这是一个electron项目</h4><h5>这是一个electron项目</h5></body>
</html>

css/base.css

h1 {color:blue;}h2 {color:red;}

package.json文件内容：

{"name": "project_helloworld","version": "1.0.0","description": "生成package.json文件：\r npm init --yes","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "electron-forge start","start": "electron-forge start","build": "electron-builder --win"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@electron-forge/cli": "^6.2.1","electron": "^25.4.0","electron-builder": "^24.6.3"},"dependencies": {"cesium": "^1.112.0","@electron-forge/cli": "^6.2.1"},"build": {"productName": "我的应用","directories": {"output": "out"},"win": {"icon": "./ico/logo.ico","target": [{"target": "nsis","arch": ["x64","ia32"]}]},"nsis": {"oneClick": false,"allowElevation": true,"allowToChangeInstallationDirectory": true,"installerIcon": "./ico/logo.ico","uninstallerIcon": "./ico/logo.ico","installerHeaderIcon": "./ico/logo.ico","createDesktopShortcut": true,"createStartMenuShortcut": true,"shortcutName": "我的应用"}}
}

本blog地址：https://blog.csdn.net/hsg77

相关文章：

electron与cesium组件入门应用功能

electron与cesium组件入门应用功能 运行应用效果图&#xff1a; electron应用目录&#xff0c;需要包括三个文件: index.html main.js package.json (一)、创建一个新项目 目录名称&#xff1a;project_helloWolrd (二)、生成package.json文件 npm init --yes(三&#x…...

编程日记 2023/12/20 7:31:49

Jenkins Docker Cloud在Linux应用开发CI中的实践

Jenkins Docker Cloud在Linux应用开发CI中的实践 背景 通过代码提交自动触发CI自动构建、编译、打包是任何软件开发组织必不可少的基建&#xff0c;可以最大程度保证产物的一致性&#xff0c;方便跨组跨部门协作&#xff0c;代码MR等。 Docker在流水线中越来越重要&#xff…...

编程日记 2023/12/20 7:30:48

502 Bad Gateway with nginx + apache + subversion + ssl

svn commit的时候返回 unexpected http status 502 bad gateway on解决方法&#xff0c;参考&#xff1a;https://stackoverflow.com/questions/2479346/502-bad-gateway-with-nginx-apache-subversion-ssl-svn-copy 在nginx中代理svn中添加 location /svn {set $fixed_dest…...

编程日记 2023/12/20 7:24:43

【PostgreSQL内核学习（十八）—— 存储管理（存储管理的体系结构）】

存储管理 概述存储管理器的体系结构存储管理器的主要任务读写元组过程 声明&#xff1a;本文的部分内容参考了他人的文章。在编写过程中&#xff0c;我们尊重他人的知识产权和学术成果&#xff0c;力求遵循合理使用原则&#xff0c;并在适用的情况下注明引用来源。 本文主要参考…...

编程日记 2023/12/20 7:22:41

Android的组件、布局学习

介绍 公司组织架构调整&#xff0c;项目组需要承接其他项目组的android项目&#xff0c;负责维护和开发新需求&#xff0c;故学习下基础语法和项目开发。 组件学习 Toolbarheader布局部分 就是app最顶部的部分 他的显示与否&#xff0c;是与F:\androidProject\android_lear…...

编程日记 2023/12/20 7:21:40

【离散数学】——期末刷题题库（树其一）

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…...

编程日记 2023/12/20 7:20:39

光模块市场分析与发展趋势预测

光模块是光通信领域的重要组成部分&#xff0c;随着数字经济&#xff0c;大数据&#xff0c;云计算&#xff0c;人工智能等行业的兴起&#xff0c;光模块市场经历了快速发展&#xff0c;逐渐在数据中心、无线回传、电信传输等应用场景中得到广泛应用。本文将基于当前光模块全球…...

编程日记 2023/12/20 7:19:38

Python轴承故障诊断 (八)基于EMD-CNN-GRU并行模型的故障分类

目录 前言 1 经验模态分解EMD的Python示例 2 轴承故障数据的预处理 2.1 导入数据 2.2 制作数据集和对应标签 2.3 故障数据的EMD分解可视化 2.4 故障数据的EMD分解预处理 3 基于EMD-CNN-GRU并行模型的轴承故障诊断分类 3.1 训练数据、测试数据分组&#xff0c;数据分ba…...

编程日记 2023/12/20 7:17:36

鸿蒙实现年月日十分选择框，支持年月日、月日、日、年月日时分、时分切换

import DateTimeUtils from ./DateTimeUtils;CustomDialog export default struct RQPickerDialog {controller: CustomDialogControllertitle: string 这是标题TAG: string RQPickerDialog// 0 - 日期类型&#xff08;年月日&#xff09; 1 - 时间类型&#xff08;时分&a…...

编程日记 2023/12/20 7:12:32

IntelliJ IDE 插件开发 | （三）消息通知与事件监听

系列文章 IntelliJ IDE 插件开发 |&#xff08;一&#xff09;快速入门IntelliJ IDE 插件开发 |&#xff08;二&#xff09;UI 界面与数据持久化IntelliJ IDE 插件开发 |&#xff08;三&#xff09;消息通知与事件监听 前言 在前两篇文章中讲解了关于插件开发的基础知识&…...

编程日记 2023/12/20 7:11:31

VUE小知识点

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。 Vue 的主要作用是帮助开发者构建现代 Web 应用程序。它允许前端开发人员专注于应用程序…...

编程日记 2023/12/20 7:10:30

深入了解常见的应用层网络协议

目录 1. HTTP协议 1.1. 工作原理 1.2. 应用场景 1.3. 安全性考虑 2. SMTP协议 2.1. 工作原理 2.2. 应用场景 2.3. 安全性考虑 3. FTP协议 3.1. 工作原理 3.2. 应用场景 3.3. 安全性考虑 4. DNS协议 4.1. 工作原理 4.2. 应用场景 4.3. 安全性考虑 5. 安全性考虑…...

编程日记 2023/12/20 7:09:29

网络爬虫 多任务采集

一、JSON文件存储 JSON&#xff0c;全称为 JavaScript 0bject Notation,也就是JavaSript 对象标记&#xff0c;它通过对象和数组的组合来表示数据&#xff0c;构造简洁但是结构化程度非常高&#xff0c;是一种轻量级的数据交换格式。本节中&#xff0c;我们就来了解如何利用 P…...

编程日记 2023/12/20 7:07:27

真实并发编程问题-1.钉钉面试题

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring源码、JUC源码、Kafka原理、分布式技术原理、数据库技术&#x1f525;如果感觉博主的文章还不错的…...

编程日记 2023/12/20 7:06:26

基于vue+element-plus+echarts制作动态绘图页面（柱状图，饼图和折线图）

前言 我们知道echarts是一个非常强大的绘图库&#xff0c;基于这个库&#xff0c;我们可以绘制出精美的图表。对于一张图来说&#xff0c;其实比较重要的就是配置项&#xff0c;填入不同的配置内容就可以呈现出不同的效果。 当然配置项中除了样式之外&#xff0c;最重要的就是…...

编程日记 2023/12/20 7:03:24

2312llvm,02前端

前端 编译器前端,在生成目标相关代码前,把源码变换为编译器的中间表示.因为语言有独特语法和语义,所以一般,前端只处理一个语言或一组类似语言. 比如Clang,处理C,C,objective-C源码. 介绍Clang Clang项目是C,C,Objective-C官方的LLVM前端.Clang的官方网站在此. 实际编译器(…...

编程日记 2023/12/20 6:58:19

【MATLAB源码-第101期】基于matlab的蝙蝠优化算BA)机器人栅格路径规划，输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 蝙蝠算法&#xff08;BA&#xff09;是一种基于群体智能的优化算法&#xff0c;灵感来源于蝙蝠捕食时的回声定位行为。这种算法模拟蝙蝠使用回声定位来探测猎物、避开障碍物的能力。在蝙蝠算法中&#xff0c;每只虚拟蝙蝠代表…...

编程日记 2023/12/20 6:57:18

【数据结构】二叉树的模拟实现

前言:前面我们学习了堆的模拟实现&#xff0c;今天我们来进一步学习二叉树&#xff0c;当然了内容肯定是越来越难的&#xff0c;各位我们一起努力&#xff01; &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &…...

编程日记 2023/12/20 6:55:16

open3d bug：pcd转txt前后位姿发生改变

1、open3d bug&#xff1a;pcd转txt前后位姿发生改变 open3d会对原有结果进行一个微小位姿变换 import open3d as o3d import numpy as np# 读取PCD点云文件 pcd o3d.io.read_point_cloud(/newdisk/darren_pty/zoom_centered_s2.pcd)# 获取点云坐标 points pcd.points# 指定…...

编程日记 2023/12/20 6:54:16

持续集成交付CICD：Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用

目录 一、实验 1.部署Ansible自动化运维工具 2.K8S 节点安装nginx 3.Jenkins使用GitLab共享库实现基于Ansible的CD流水线部署前后端应用 二、问题 1.ansible安装报错 2.ansible远程ping失败 3. Jenkins流水线通过ansible命令直接ping多台机器的网络状态报错 一、实验 …...

编程日记 2023/12/20 6:52:13

从零上手FinalShell：Windows环境下的高效SSH连接与服务器管理实战

1. FinalShell是什么&#xff1f;为什么选择它&#xff1f; 如果你是Windows用户&#xff0c;第一次接触服务器管理&#xff0c;可能会被各种专业工具吓到。XShell虽然强大但收费&#xff0c;Putty又太简陋&#xff0c;这时候FinalShell就像个贴心的助手。我用了三年多&#xf…...

编程新知 2026/3/31 23:06:46

Pixel Script Temple 为C++高性能计算项目生成优化脚本

Pixel Script Temple 为C高性能计算项目生成优化脚本 1. 高性能计算开发的痛点 在C高性能计算领域&#xff0c;开发者经常面临一个共同困境&#xff1a;明明硬件资源充足&#xff0c;但程序性能就是上不去。你可能也遇到过这样的情况 - 代码逻辑没问题&#xff0c;算法也正确…...

编程新知 2026/3/31 22:26:08

5分钟搞定电脑风扇噪音！FanControl超详细配置指南让你告别“飞机起飞“

5分钟搞定电脑风扇噪音&#xff01;FanControl超详细配置指南让你告别"飞机起飞" 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcod…...

编程新知 2026/3/31 21:14:53

Claude Code 命令和用法

斜杠命令&#xff08;会话内输入 / 触发&#xff09;会话与导航命令说明/clear清除对话历史&#xff0c;释放上下文。别名&#xff1a;/reset、/new/compact [指令]压缩对话&#xff0c;可附加聚焦指令/resume [会话]恢复历史会话。别名&#xff1a;/continue/rename [名称]重命…...

编程新知 2026/3/31 20:32:00

Memos笔记数据安全吗？手把手教你配置自动备份到GitHub/对象存储（防丢指南）

Memos数据安全全攻略&#xff1a;从本地备份到云端同步的完整方案 Memos作为一款轻量级开源笔记工具&#xff0c;凭借其简洁界面和本地存储特性赢得了不少用户青睐。但数据安全始终是悬在每位用户心头的一把剑——服务器宕机、硬盘损坏、误操作删除都可能让珍贵笔记瞬间消失。本…...

编程新知 2026/3/31 20:23:54

告别手动复制！用这个BAT脚本一键导出文件夹所有文件名到Excel

告别手动复制&#xff01;用这个BAT脚本一键导出文件夹所有文件名到Excel 整理文件清单是许多职场人士的日常痛点。想象一下&#xff1a;你刚接手一个包含数百个设计稿的文件夹&#xff0c;领导要求半小时内提交完整的文件清单&#xff1b;或者你需要将一个项目的所有代码文件整…...

编程新知 2026/3/31 19:47:29

电视盒子播放视频总出错？TVBoxOSC让所有格式文件流畅播放

电视盒子播放视频总出错&#xff1f;TVBoxOSC让所有格式文件流畅播放 【免费下载链接】TVBoxOSC TVBoxOSC - 一个基于第三方项目的代码库&#xff0c;用于电视盒子的控制和管理。 项目地址: https://gitcode.com/GitHub_Trending/tv/TVBoxOSC 你是否遇到过电视盒子播放视…...

编程新知 2026/3/31 19:37:16

4G DTU选型指南：Cat1模块在智能水电表项目中的7个关键参数对比

4G DTU选型实战&#xff1a;Cat1模块在智能水电表项目中的7个工程化参数解析 水电表远程抄表系统正经历从2G向4G Cat1的技术迁移浪潮。作为工业现场的核心通信枢纽&#xff0c;DTU模块的选型直接关系到数据上报成功率、设备维护成本和系统生命周期。本文将基于某省级电网改造项…...

编程新知 2026/3/31 19:00:21

重构音乐体验：六音插件的技术突围

重构音乐体验&#xff1a;六音插件的技术突围 【免费下载链接】New_lxmusic_source 六音音源修复版 项目地址: https://gitcode.com/gh_mirrors/ne/New_lxmusic_source 问题发现&#xff1a;洛雪音乐的音源服务困境 当洛雪音乐升级至1.6.0版本后&#xff0c;许多用户遭…...

编程新知 2026/3/31 18:48:18

从IntelliJ到VSCode：开发体验无缝迁移完全指南

从IntelliJ到VSCode&#xff1a;开发体验无缝迁移完全指南 【免费下载链接】vscode-intellij-idea-keybindings Port of IntelliJ IDEA key bindings for VS Code. 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-intellij-idea-keybindings 一、发现迁移痛点&…...

编程新知 2026/3/31 18:15:54