Cesium在vue中展示

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

---

step 1 获取token

打开官网,链接再次,进行登录注册,为了获取cesium的token值

1. 图一为进入主页后的登录注册的口子
2. 图二为登录成功后,点击可进入图三,也可能直接到达图三
3. 点击图三框选位置
4. 点击图四create token出现弹框,设置名称,点击create
5. 到图五这里,我们就已经可以获取到我们需要的token了

图一

图二

图三

图四

图五

---

step 2

拿出一个vue项目或者创建一个新的vue项目;

---

step 3 安装

在你的vue项目中安装cesium npm install cesium

step 4 拿出需要的文件夹并引入

1.复制下图目录下的文件夹至public文件夹下 2.在public文件夹下的index.html文件中进行引入

<link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
<script src="Cesium/Cesium.js"></script>

step 5 cesium组件的使用

<template>
    // 为壳子设置id
    <div id="cesiumContainer"></div>
</template>

<script>
// 外部声明,不要放在data中
    let viewer;
    export default {
        name: 'Cesium',
        data() {
            return {}
        },
        methods: {
            initCesium() {
                Cesium.Ion.defaultAccessToken = "注册的token值在这里使用";
                viewer = new Cesium.Viewer("cesiumContainer", {
                    // 动画控件
                    animation: false,

                    // 时间控件
                    timeline: false,
                })
            }
        },
        mounted() {
        // 加载
            this.initCesium();
        }

    }
</script>

<style scoped>
    #cesiumContainer {
        width: 100vw;
        height: 100vh;
    }
</style>

此时我们的页面效果如下图: (完结,撒花~~~)

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧