一、node安装配置

1、node下载安装

Node.js — 在任何地方运行 JavaScript (nodejs.org)

2、查看安装是否成功

cmd窗口运行

node -v

显示版本,证明安装成功

3、npm换源(淘宝源)

cmd窗口运行

npm config set registry https://registry.npmmirror.com/

4、查看换源是否成功

cmd窗口运行    

npm config get registry

显示当前源信息

5、pnpm安装(换源同理)

cmd窗口运行    

npm i pnpm -g

6、(可选)cnpm、yarn安装(换源同理)

7、查看版本号报错( 无法加载文件xxxx.ps1,在此系统上禁止运行脚本)

powershell窗口运行

set-ExecutionPolicy -Scope CurrentUser

接着输入

remotesigned

赋予权限

二、vue3+vite+cesium安装配置

1、创建Vue3项目

cmd窗口运行

pnpm create vite 项目名

选择框架(vue+js)

2、安装cesium

cmd窗口运行

cd 项目名
pnpm i
pnpm i cesium@1.99 vite-plugin-cesium

3、修改vite.config.js文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()]
})

4、App.vue文件

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZmYyMTQ0My00OGMzLTQxMjgtOWZlYS0yZjNhZmY0OTM2Y2MiLCJpZCI6MTE2NDU3LCJpYXQiOjE2NzA1NTA3MTR9.Ghp4_AaAxhKZr4oJYemiTE4u5T-GIeJjcvCJb1CCjik'
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(), // 地形图层
    timeline: false, // 隐藏时间轴控件
    animation: false, // 隐藏动画控件
    geocoder: false, // 隐藏搜索按钮
    homeButton: false, // 隐藏初始视角控件
    sceneModePicker: false, // 隐藏投影方式控件
    baseLayerPicker: false, //隐藏图层选择控件
    navigationHelpButton: false, // 隐藏帮助按钮
    fullscreenButton: false, // 隐藏全屏按钮
  })
})
console.log(Cesium)
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

5、修改main.js文件

注释掉 import './style.css'

6、运行

cmd窗口运行

npm run dev

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐