vue3 安装使用CesiumJs

CesiumJs yekong

CesiumJs 是一个开源 JavaSeript 库,用于创建具有最佳性能、精度、视觉质量和易用性的世界級30 地珠仪和地图。从航空航天到智能城市再到无人机,各行各业的开发人员都使用 CeslumJs 创建交互式 Web应用程序来共享动志地理空间数据。

运行效果:
vue3 安装使用CesiumJs

官网地址

CesiumJs官网地址

安装依赖

npm install cesium
或者
pnpm install cesium

复制文件1

复制node_modules - cesium - Build - Cesium下面的文件
Assets
ThirdParty
Widgets
Workers
复制到public下面的cesium下面。

复制文件

复制到public下面的cesium下面

复制文件2

同时复制Widgets复制到src目录下一份
同时复制Widgets复制到src目录下一份

初始化代码

/**
* @Author: 858834013@qq.com
* @Name: cesium学习
* @Date: 2023年02月11日
* @Desc: cesium学习
*/
<template>
  <div class="cesiumBody" id="cesiumBody" ref="cesiumBody">
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'
import '../../Widgets/widgets.css'
import {onMounted} from "vue";
// 设置cesium的静态资源路径
window.CESIUM_BASE_URL = '/cesium'
onMounted(() => {
  var viwer = new Cesium.Viewer('cesiumBody')
})
</script>

<style lang="scss" scoped>
.cesiumBody {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

当前内容为观看threejs视频教程 Three.js可视化企业实战WEBGL课 课程-打造第一个cesium应用-学习笔记

笔记汇总

Cesium学习笔记汇总

喜欢