cesium学习之路 vue（一）创建项目

最新推荐文章于 2024-01-11 14:41:43 发布

m0_63701303

最新推荐文章于 2024-01-11 14:41:43 发布

阅读量446

点赞数 1

分类专栏： cesium 文章标签：学习 vue.js javascript

本文链接：https://blog.csdn.net/m0_63701303/article/details/127792020

版权

cesium 专栏收录该内容

31 篇文章 14 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中初始化并使用Cesium库来创建一个三维地球应用。首先，通过npm安装cesium依赖，然后在main.js中引入相关样式和Cesium模块。接着，在Vue组件中设置一个div作为Cesium的容器，并在mounted钩子中初始化cesium的Viewer实例，确保设置Ion的默认访问令牌。最后，启动项目即可查看运行的三维地球效果。

摘要由CSDN通过智能技术生成

1.初始化vue项目

2.安装并使用cesium相关依赖

npm install cesium

//mian.js引入相关样式
import "cesium/Build/Cesium/Widgets/widgets.css";
//使用cesium组件引入cesium
import * as Cesium from "cesium";

3.初始化个div作为容器

//html
<template>
  <div id="cesiumContainer"></div>
</template>
//JS
export default {
  data() {
    return {
      viewer: null, // 初始化地球后的viewer对象
    };
  }，
metgods：{
    init(){
        //必须填入密钥
        Cesium.Ion.defaultAccessToken = "填入cesium官网申请的密钥"
        //new出cesium实例
        this.viewer = new Cesium.Viewer("cesiumContainer")
    }
   }，
mounted(){
    this.init(); 
  }
}

4.直接启动项目就可以玩地球了