全网最全！从下载Visual Studio Code开始构建Vue3+Vite+Cesium开发环境

最新推荐文章于 2024-08-28 11:44:50 发布

经天纬地GIS

最新推荐文章于 2024-08-28 11:44:50 发布

阅读量505

点赞数 4

分类专栏： webgis开发文章标签： vscode web javascript arcgis

本文链接：https://blog.csdn.net/weixin_58570944/article/details/141420777

版权

webgis开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文为从下载编译器开始构建三维WebGIS（Cesium）开发环境，包括NVM、Node.js、npm、cnpm、yarn、Vue3、Vite一直到Cesium开发框架。适合初学者从零开始配置。

一、配置前端必备的Node.js 生态系统（最近几个版本已经不需要手动配置环境变量）

1.首先在Visual Studio Code官网下载安装这款前端必备的“宇宙级”编译器，下载过程不需要特意配置额外参数。

#Visual Studio Code官网https://code.visualstudio.com/

2.接下来安装Node.js全家桶，先用表格介绍一下这几个家伙。

3.在官网下载安装NVM（必要时需要挂梯子科学上网）。

NVM是管理和切换不同版本的 Node.js 的工具。它对于 Node.js 开发者来说非常重要，在开发中，不同项目可能依赖于不同版本的 Node.js。通过 NVM，开发者可以轻松地安装、切换和管理多个 Node.js 版本，确保每个项目在其指定的 Node.js 版本上运行，且NVM是Windows系统中可以在不卸载安装Node.js的情况下更换其版本的唯一方法。NVM最好要在Node.js之前安装，如果有朋友安装了Node.js而没有安装NVM，个人建议先将Node.js进行卸载再从NVM进行安装。

在此推荐一款免费开源的卸载工具——Geek。该工具在卸载软件时，不仅会删除程序本身，还能一并清理注册表中的残留信息。使用 Geek 卸载工具，我们可以轻松一键彻底移除 Arcmap 等复杂软件，无需手动清理注册表，让卸载过程更加简单高效。

#geek下载官网https://geek.shuancen.com/?bd_vid=10712613426811482350

#nvm官网https://nvm.uihtm.com/nvm-1.1.12-setup.zip

安装过程中在选择自定义目录时不能出现中文与空格，我这里将安装目录均换为D盘。

安装完成后可打开cmd命令行查看是否安装成功。

4.复制Root的地址，找到settings.txt文件，粘贴以下两行代码，进行nvm源修改。

node_mirror: https://npmmirror.com/mirrors/node/npm_mirror:  https://npmmirror.com/mirrors/npm/

nvm常用命令如下：

5.安装Node.js，可以通过nvm list available，命令查看版本号，（偶数是绝对稳定版本奇数是不一定稳定版本），这里我选择18.20.4版本。

安装完Node.js后，一定要记得使用nvm use 18.20.4命令使用当前版本。

6.配置全局安装的模块路径和缓存路径。首先在NVM的安装目录新建两个文件夹node_global和node_cache，创建完两个文件夹后，在cmd窗口中输入配置命令。

#记得把路径改为你自己配置的路径哦npm config set prefix "D:\Users\zwy\AppData\Roaming\nvm\node_global"npm config set cache "D:\Users\zwy\AppData\Roaming\nvm\node_cache"

npm常见命令如下：

更改完毕后全局安装最常用的express库进行验证。

出现文件，表示安装成功！

7.全局安装cnpm与yarn并查看版本号。

至此，Node.js 生态系统已完全安装成功。

二、接下来构建Vue3+Vite+Cesium开发环境

1.选好项目路径，我这边直接在H盘进行创建。

2.找到文件，在vscode中打开，可以看到工程文件。

对文件进行简单介绍：

3.修改vite.config.js文件。

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import cesium from 'vite-plugin-cesium'



export default defineConfig({

  plugins: [vue(), cesium()]

})

4.修改main.js。

5.在App.vue初始化三维地球。

<template>

   <div id="cesiumContainer"></div>
 
 </template>
 
 <script setup>
 
 import * as Cesium from 'cesium';
 
 import { onMounted } from 'vue';
 
 onMounted(() => {
   Cesium.Ion.defaultAccessToken = '你的token';
 
    // 实例化 Cesium Viewer
    const viewer = new Cesium.Viewer("cesiumContainer", {
        baseLayerPicker: true, // 如果设置为 false，将不会创建右上角图层按钮。
        fullscreenButton: true, // 如果设置为 false，将不会创建右下角全屏按钮。
        vrButton: true, // 如果设置为 false，将不会创建 VR 应用场景。
        geocoder: true, // 如果设置为 false，将不会创建右上角查询(放大镜)按钮。
        homeButton: true, // 如果设置为 false，将不会创建右上角主页(房子)按钮。
        infoBox: false, // 是否显示点击要素之后显示的信息，Cesium 中的沙盒开关。
        sceneModePicker: true, // 如果设置为 false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
        selectionIndicator: true, // 获取当选定实体更改时引发的事件。
        navigationHelpButton: true, // 如果设置为 false，则不会创建右上角帮助(问号)按钮。
        navigationInstructionsInitiallyVisible: true, // 如果帮助说明最初应该是可见的，则为 true；如果直到用户明确单击该按钮，则不显示该说明，否则为 false。
        timeline: true, // 如果设置为 false，则不会创建正下方时间轴小部件。
        scene3DOnly: false, // 为 true 时，每个几何实例将仅以 3D 渲染以节省 GPU 内存。
        animation: true, // 如果设置为 false，将不会创建左下角动画小部件。
        shouldAnimate: false, // 默认 true，否则为 false。此选项优先于设置 Viewer＃clockViewModel。
        sceneMode: Cesium.SceneMode.SCENE3D, // 初始场景模式 1 2D 模式 2 2D 循环模式 3 3D 模式
        requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源。
        fullscreenElement: document.body, // 全屏时渲染的 HTML 元素。
      });
 
 });
 
 </script>
 
 <style scoped></style>

6.在集成终端打开并运行。