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

Cesium 环境搭建

一、前提条件
1. **安装 Node.js**
   - 访问 [Node.js 官方网站](https://nodejs.org/),下载并安装适合你操作系统的版本。Node.js 用于运行本地开发服务器和安装依赖。
2. **安装 Vue CLI**
   - Vue CLI 是一个用于快速开发 Vue.js 项目的工具。在终端中运行以下命令安装 Vue CLI:

npm install -g @vue/cli

### 二、创建 Vue 项目
1. **创建一个新的 Vue 项目**
   - 在终端中运行以下命令创建一个新的 Vue 项目:

          vue create cesium-map-project


   - 按照提示进行操作,选择默认配置即可。
2. **进入项目目录**

   ```bashcd cesium-map-project```

### 三、安装 Cesium
1. **安装 Cesium**
   - 在项目目录中运行以下命令安装 Cesium:

     ```bashnpm install cesium```

### 四、修改代码
1. **修改 `src/App.vue` 文件**
   - 将 `src/App.vue` 文件的内容替换为以下代码:
     

```vue<template><div id="cesiumContainer"></div></template><script setup lang="ts">// AccessTokens需要到官网获取,详细看问题注意点import * as Cesium from "cesium";import "cesium/Build/Cesium/Widgets/widgets.css";import { onMounted } from "vue";Cesium.Ion.defaultAccessToken = '你的AccessTokens'; // 替换为你的 Access Tokenconst init = () => {const viewer = new Cesium.Viewer("cesiumContainer", {homeButton: true, // 首页位置,点击之后将视图跳转到默认视角sceneModePicker: true, // 是否显示投影方式控件baseLayerPicker: true, // 是否显示图层选择控件navigationHelpButton: true, // 是否显示帮助信息控件geocoder: false, // 是否显示地名查找控件animation: false, // 是否显示动画控件timeline: false, // 是否显示时间线控件fullscreenButton: false, // 视察全屏按钮vrButton: false, // 是否启用虚拟现实 (VR) 模式shadows: true, // 影子infoBox: false, // 是否显示点击要素之后显示的信息});};onMounted(() => {init();});</script><style>#cesiumContainer {width: 100%;height: 100vh; /* 设置容器高度为视口高度 */}</style>```- **注意**:将 `'你的AccessTokens'` 替换为你从 [Cesium Ion](https://cesium.com/ion/) 获取的 Access Token。

### 五、运行项目
1. **启动开发服务器**
   - 在项目目录中运行以下命令启动开发服务器:
   

  ```bashnpm run serve```


2. **访问地图**
   - 打开浏览器,访问 [http://localhost:8080](http://localhost:8080),就能看到一个三维地球视图。

http://www.dtcms.com/a/168532.html

相关文章:

  • STM32复盘总结——芯片简介
  • 工作记录 2017-12-12 + 在IIS下发布wordpress
  • 第二十周:项目开发中遇到的相关问题(一)
  • 【数据结构】堆的完整实现
  • 51单片机驱动 矩阵键盘
  • GESP2024年6月认证C++八级( 第三部分编程题(1)最远点对)
  • GZIPInputStream 类详解
  • 【AI科技】AMD ROCm 6.4 新功能:突破性推理、即插即用容器和模块化部署,可在 AMD Instinct GPU 上实现可扩展 AI
  • 03 - spring security自定义登出页面
  • 10 种微服务设计模式
  • Baklib智链企业知识资产体系
  • 处方流转平台权限控制模块设计(基于RBAC模型)
  • kubernetes中离线业务编排详解JobCronJob之Job控制器CronJob
  • 新手学编程前端好还是后端
  • Android学习总结之jetpack组件间的联系
  • DarkGS:论文解读与全流程环境配置及数据集测试【基于Ubuntu20.04 】【2025最新实战无坑版!!】
  • 数字智慧方案5874丨智慧交通收费稽核管理体系的构建与思考(44页PPT)(文末有下载方式)
  • Python基于深度学习的网络舆情分析系统(附源码,部署)
  • 深入解析C++11基于范围的for循环:更优雅的容器遍历方式
  • C# 方法(局部变量和局部常量)
  • 快速集成 Flutter Shorebird 热更新
  • 【嵌入式Linux】基于ARM-Linux的zero2平台的智慧楼宇管理系统项目
  • 体系结构论文(八十二):A Comprehensive Analysis of Transient Errors on Systolic Arrays
  • 从此,K8S入门0门槛!
  • Android基础控件用法介绍
  • 见多识广4:Buffer与Cache,神经网络加速器的Buffer
  • 【Unity 游戏开发】角色控制模块技术要点拆解
  • 深入解析MapReduce:大数据处理的经典范式
  • 美丽天天秒链动2+1源码(新零售商城搭建)
  • Linux架构篇、第一章_03安装部署nginx