vue2+cesium创建一个可视化的三维地球

官网的快速入门传送门

npm注入的方式

// 第一步 安装cesium
npm install cesium

引入你的账号token

1. 没有账号的要先注册一个账号

2. 然后进入控制台

   

3. 复制你的accessToken

   

4. 配置你的token

// 在public⇒index.html引入你账号的token
Cesium.Ion.defaultAccessToken = 'you_accessToken'

mian.js的配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;
import "@/base/index.css";

//---------------------配置cesium-----------------
import "cesium/Build/Cesium/Widgets/widgets.css";
// 静态资源存放的位置
window.CESIUM_BASE_URL = "./static/";
//-----------------------------------------------

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

创建一个cesium组件

<template>
  <div style="width: 100%; height: 100%">
    <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as Cesium from "cesium";
export default {
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    // eslint-disable-next-line no-unused-vars
    const buildingTileset = viewer.scene.primitives.add(
      Cesium.createOsmBuildings()
    );
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      },
    });
  },
};
</script>

<style></style>

拷贝静态文件

1. node_modules⇒cesium⇒Build⇒Cesium四个文件夹拷贝出来

   

2. 在public下创建一个static文件夹存储刚才拷贝的四个文件夹