VUE3构建Cesium项目

HM-hhxx！

已于 2022-08-29 12:30:05 修改

阅读量6.4k

点赞数 1

分类专栏： Cesium 文章标签： vue.js javascript 前端 cesium

于 2022-05-21 13:13:09 首次发布

本文链接：https://blog.csdn.net/damadashen/article/details/124896474

版权

Cesium 专栏收录该内容

23 篇文章 52 订阅

订阅专栏

4.将cesium静态文件复制至public下

5.运行效果

1.Cesium开发参考资料

Cesium官方网站：Cesium: The Platform for 3D Geospatial

Cesium Javascript库网站：https://cesium.com/cesiumjs/

Cesium开发文档：https://cesium.com/docs/

Cesium开发示例：https://cesium.com/blog/categories/userstories/

Cesium官方论坛：https://groups.google.com/forum/#!forum/cesium-dev

Cesium源码：https://github.com/CesiumGS/cesium

Cesium中文开发教程：http://cesium.marsgis.cn/docs/go.html?id=12 （来源火星科技）

Cesium中文网：http://cesium.xin/

Cesium实验室（支持Cesium的数据处理）：https://www.cesiumlab.com/

MarsGIS for Cesium官方网站：http://cesium.marsgis.cn/

三维地球开发书籍(Cesium创始人Patrick Cozzi 作品) ：http://www.virtualglobebook.com/

Cesium Language (CZML)指南：https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide

3D Tiles数据格式说明：https://github.com/CesiumGS/3d-tiles

glTF格式文档：https://github.com/KhronosGroup/glTF

2.VUE中使用Cesium

2.1 使用VUE创建项目

1.创建test项目

vue create test

Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
Manually select features:自定义添加选择功能。

Babel：js编译器
Typescript：js的超集
Progressive Web App Support:渐进式的网页应用程序
Router:vue的路由
Vuex:vue的状态管理
CSS Pre-processors:css的预处理器
Linter/Formatter:代码风格检测与格式化(如果自己代码不是很规范的话可以用这个约束下自己,也可不选择，按照自己的风格)
Unit Testing:单元测试
E2E Testing:端对端测试

（选项根据个人需求选择）

选择VUE3版本：

Babel、ESLint 等的配置存放选择都存放在package.json中，选择第二项：

是否选择保存配置：

选择打包方式：

项目创建完成：

运行项目：

运行结果：

2.项目中引入Cesium

在项目目录中安装cesium

yarn add cesium

3.修改App.vue如下

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

<script setup>
import { onMounted } from "vue";
import * as Cesium from "cesium";
import "./Widgets/widgets.css";

// 设置cesium的token，在官网获取
//https://cesium.com/ion/signin/tokens
//Cesium.Ion.defaultAccessToken =""

// cesium默认资源路径
window.CESIUM_BASE_URL = "/";
// 设置默认的视角为中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  // 西边经度
  89.5,
  // 南边维度
  20.4,
  // 东边经度
  110.4,
  // 北边维度
  61.2
);

onMounted(() => {
  var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    // infoBox: false,
    // 是否创建动画
    animation: false,
    // 是否显示图层选择器
    baseLayerPicker: false,
    // 是否显示全屏按钮
    fullscreenButton: false,
    // 是否显示右上角的查询按钮
    geocoder: false,
    // 是否显示HOME按钮
    homeButton: false,
    // 是否显示场景控制按钮
    sceneModePicker: false,
    // 是否显示帮助按钮
    navigationHelpButton: false,
    // 是否显示时间轴
    timeline: false,
  });

  // 设置沙箱允许使用JS
  var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
  iframe.setAttribute(
    "sandbox",
    "allow-same-origin allow-scripts allow-popups allow-forms"
  );
  iframe.setAttribute("src", "");

  // // 隐藏cesiumLogo
  viewer.cesiumWidget.creditContainer.style.display = "none";

  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(116.39, 39.9, 1000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0.0,
    },
  });
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
#cesiumContainer {
  width: 100vw;
  height: 100vh;
}
</style>

在项目node_modules中复制/Widgets/widgets.css文件在src目录下，方便使用：