cesium学习之旅1:cesium 基本介绍以及 cesium 的 hello world 程序

news/2024/10/31 7:34:30/

一:什么是Cesium

  1. Cesium 是一个跨平台、跨浏览器的展示三维地球和地图的 javascript 库。
  2. Cesium 使用WebGL 来进行硬件加速图形,使用时不需要任何插件支持,但是浏览器必须支持WebGL。
  3. Cesium是基于Apache2.0 许可的开源程序。它可以免费的用于商业和非商业用途。

二:Cesium基本使用

我这里使用的是vite + vue3的项目,下面是从 0 开始搭建项目的的步骤:
1.使用vite脚手架搭建项目

npm create vite 项目名

然后选中vue,javascript和typescript就看自己怎么选择。

2.项目出来了后就开始装依赖,在 npm i 之后,我们还需要安装一个 vite-plugin-cesium 的插件,执行下面的命令:

npm i vite-plugin-cesium -D

安装好这个插件后,我们需要对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()],
})

配置好以后,就开始安装cesium插件:

npm install cesium

装好以后,必须的依赖就完了,其他的像vue-routerscss所需插件等依赖就看自己需求了
3.初始化:
建立一个cesium的vue文件,在app.vue里面引入这个组件,代码如下:

app.vue文件:

<script setup>
import cesium from './components/cesium.vue';
</script><template><div><cesium></cesium></div>
</template>

cesium.vue文件

<script setup>
import * as Cesium from "cesium"
let viewer = null;
cosnt token = "xxx"    // token,从官网获取,下一节会说明获取方式
onMounted(() => {Cesium.Ion.defaultAccessToken = viewer = new Cesium.Viewer("map_box", {animation: true, // 动画小组件baseLayerPicker: true, // 底图组件,选择三维数字地球的底图(imagery and terrain)。fullscreenButton: true, // 全屏组件vrButton: false, // VR模式geocoder: true, // 地理编码(搜索)组件homeButton: true, // 首页,点击之后将视图跳转到默认视角infoBox: true, // 信息框sceneModePicker: true, // 场景模式,切换2D、3D 和 Columbus View (CV) 模式。selectionIndicator: true, // 是否显示选取指示器组件timeline: true, // 时间轴navigationHelpButton: true, // 帮助提示,如何操作数字地球。// 如果最初应该看到导航说明,则为true;如果直到用户明确单击该按钮,则该提示不显示,否则为false。navigationInstructionsInitiallyVisible: false,})
})
</script><template><div><div id="map_box"></div></div>
</template><style scoped>
#map_box {width: 80vw;height: 80vh;
}
</style>

同时在main.js里面引入css文件:

import 'cesium/Build/Cesium/Widgets/widgets.css';

这样小地球就出来了
cesium地球图


http://www.ppmy.cn/news/275694.html

相关文章

柯南的手机密码

手机的登录密码有4位&#xff0c;有多少种可能&#xff1f;如何尝试破解&#xff1f; 我的第一反应是&#xff14;位每位上有0~9有十个数字&#xff0c;及10^4 有一万种可能&#xff0c;如何破解呢&#xff1f;第一反应按位的顺序一位一位的试&#xff0c;0001&#xff0c;000…

计算机音乐名侦探柯南简谱,《名侦探柯南》主题旋律|卡林巴琴简谱专用谱...

原标题&#xff1a;《名侦探柯南》主题旋律&#xff5c;卡林巴琴简谱&专用谱 真相永远只有一个&#xff01; 《名侦探柯南》主题旋律由大野克夫作曲和编曲&#xff0c;常出现在《名侦探柯南》动画及剧场版中&#xff0c;并被改编成多种版本。当剧情进入高潮&#xff0c;或是…

【柯南的端午节xp动漫主题】

本主题是由主题世界XP主题下载(http://www.zhuti.com/)独家原创制作而成 本地下载 迅雷下载 柯南的端午节xp动漫主题电脑主题下载介绍 柯南的端午节壁纸下载《鼠标右键另存为本地》 柯南的端午节主界面效果图 柯南的端午节开始菜单效果图 柯南的端午节图标效果图 柯南的端午…

计算机柯南纯音乐乐谱,《【Animenz】名侦探柯南 主题曲,钢琴谱》大野克夫(五线谱 钢琴曲 指法)-弹吧|蛐蛐钢琴网...

钢琴谱&#xff1a;【Animenz】名侦探柯南 主题曲 音乐人/大野克夫 30586次 625次 难度&#xff1a;7级 作者: 大野克夫 改编By: Animenz 扒谱By: Zygarde 这首是A叔2020年他发布的第十八首歌曲 如果歌曲成VIP&#xff0c;请加入Q群: 1101948425(已滿), 2群: 1103786095 建议谱…

#个人日记-动漫电影《名侦探柯南:绯色的子弹》观后感-20210418

个人日记-动漫电影《名侦探柯南&#xff1a;绯色的子弹》观后感-20210418 这周看了动漫电影《名侦探柯南&#xff1a;绯色的子弹》&#xff0c;查了下“绯色”是深红色&#xff0c;小时候&#xff0c;过年家里杀猪&#xff0c;当血液凝固后的一段时间&#xff0c;就会变成深红…

名侦探柯南 侦探们的镇魂歌

原作&#xff1a;青山刚昌 制片&#xff1a;吉刚昌仁、撷访道彦 导演&#xff1a;山本泰一郎 编剧&#xff1a;柏原宽司 配音&#xff1a;工藤新一......山口胜平 江户川柯南......高山南 毛利兰......山崎和佳奈 毛利小五郎......神谷明 国别&#xff1a;日本 年代&#xff1…

柯南服务器搭建

引入方式&#xff1a;https://www.gamersky.com/handbook/201702/865127.shtml 简易自建服务器教程 1. 下载STEAMCMD https://steamcdn-a.akamaihd.net/client/installer/steamcmd.zip&#xff1b; 2. 解压steamcmd.zip&#xff1b; 3. 创建一个ConanExiles文件夹来存储游戏…