vue工程快速导入cesium（main.js导入）

首先列出帮助的网站
cesium中文社区
环岛公路博客
然后是导入过程

首先可以用vue-cli创建项目

或者安装vue-cli

npm install vue-cli -g

然后推荐个插件vue-cli-plugin-cesium
vue-cli-plugin-cesium的GitHub地址

这个也不是单纯npm就可以的了，我把我的安装步骤说明一下，当然，先看看上面的网站也是挺好的

第一步就是建个工程

然后选择下一步默认就行
然后按需要导入自己想要的插件
然后用脚手架下载vue-cli-plugin-cesium

然后配置插件

（这个是我后来才发现的快捷配置）
或npm上面的插件

// npm
npm install --save-dev vue-cli-plugin-cesium

然后
一定要做的一步，当然这个也是可以页面导入的

vue add vue-cli-plugin-cesium

然后会有三个询问，

• 一个是问你时候初始化
• 二是问你css时候全局导入
• 三是问你时候导入一个例子

然后我是全选是

然后vscode打开项目（或者你使用的编译器）

然后还有一个需要改动的地方
环岛公路的博客地址
非常感谢，助我脱困

***vue+cesiumjs环境搭建【import引入】
之前写了一遍博客关于vue+cesium的搭建，后面是在index.html里通过script引入的，但是后面要用到指南针的时候发现指南针没法引入了
之前的链接:  https://www.cnblogs.com/reround/p/11943717.html
后来慢慢调试发现原来是cesium的版本问题
我在11月底安装的cesium的版本是1.63.0  12月多安装的版本是1.64.0
这个两个 版本都是没法通过 
import Cesium from 'cesium/Cesium'
这样来引入的 
但是我们换成1.61.0 就不会出现这样的问题
首先卸载掉你项目的cesium
npm uninstall cesium
卸载完成后再去安装1.61.0的版本
npm install cesium@1.61.0 --save
然后可以把static下的cesium文件夹删除  index.html里的script引入删掉
直接在mainjs里
import Cesium from 'cesium/Cesium'
import '../node_modules/cesium/Build/Cesium/Widgets/widgets.css'
Vue.prototype.Cesium = Cesium
通过import来引入  这样后面的指南针也可以引入了***

可以看出cesium版本1.61版本才支持导入
so
先卸载
npm uninstall cesium
再下载1.61.0版本
npm install cesium@1.61.0 --save

然后写个vue页面单独引用插件给的例子

<template>
  <div class="about">
    <CesiumViewer />
  </div>
</template>

<script>
import CesiumViewer from '@/components/CesiumExample/No01-init.vue'
export default {
  components:{
    CesiumViewer
  }
}
</script>

<style scoped>
</style>

然后这是我写的cesium的小示例，根据他原本的例子No01-init.vue改的，不懂的可以找cesium中文社区，非常详细

<template>
  <div class="map-box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
export default {
  name: "",
  mounted() {
    let that = this;
    // var viewer = new Cesium.CesiumWidget('cesiumContainer')

    // eslint-disable-next-line no-undef
    var viewer = new Cesium.Viewer("cesiumContainer", {
      //控制是否显示控件
      // geocoder: false,
      // homeButton: false,
      // sceneModePicker: false,
      // // baseLayerPicker: false,
      // navigationHelpButton: false,
      // animation: false,
      // timeline: false,
      // fullscreenButton: false,
      // vrButton: false
    });
    var GuangZhou = viewer.entities.add({
      name: "广州",
      position: this.Cesium.Cartesian3.fromDegrees(113.2, 23.1, 300000.0),
      // box: {
      //   dimensions: new this.Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      //   material: this.Cesium.Color.RED.withAlpha(0.5),
      //   outline: true,
      //   outlineColor: this.Cesium.Color.BLACK
      // }
      point: {
        //表示点
        heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
        color: this.Cesium.Color.WHITE, //点的颜色
        pixelSize: 10, //点的大小
        outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
        outlineWidth: 5 //border-width
      },
      label: {
        //表示点的描述
        text: "广州", //点的文字
        font: "14pt Source Han Sans CN", //文字的大小和字体
        fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色
        backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
        // 注意，这里的this.Cesium.Color后面只能接颜色的英文，不能接十六进制的颜色
        // 如果你需要用到十六进制的颜色，可以使用这样来表示:
        // fillColor: this.Cesium.Color.fromCssColorString('#f00')
        showBackground: false, //若是想给文字添加背景颜色 这行必不可少
        style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 1,
        //垂直位置
        heightReference: this.Cesium.HeightReference.NONE,
        verticalOrigin: this.Cesium.VerticalOrigin.TOP,
        pixelOffset: new this.Cesium.Cartesian2(50, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
      },
      polylineVolume: {
        positions: this.Cesium.Cartesian3.fromDegreesArray([
          113.27,
          23.13,
          120.52,
          30.4,
          116.4,
          39.9
        ]),
        shape: that.computeCircle(6000.0),
        material: this.Cesium.Color.BLUE
      }
    });

    var ShangHai = viewer.entities.add({
      name: "上海",
      position: this.Cesium.Cartesian3.fromDegrees(120.52, 30.4, 300000.0),
      point: {
        //表示点
        heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
        color: this.Cesium.Color.WHITE, //点的颜色
        pixelSize: 10, //点的大小
        outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
        outlineWidth: 5 //border-width
      },
      label: {
        //表示点的描述
        text: "上海", //点的文字
        font: "14pt Source Han Sans CN", //文字的大小和字体
        fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色

        backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
        showBackground: false, //若是想给文字添加背景颜色 这行必不可少
        style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 1,
        //垂直位置
        heightReference: this.Cesium.HeightReference.NONE,
        verticalOrigin: this.Cesium.VerticalOrigin.TOP,
        pixelOffset: new this.Cesium.Cartesian2(0, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
      }
    });
    var BeiJing = viewer.entities.add({
      name: "北京",
      position: this.Cesium.Cartesian3.fromDegrees(116.4, 39.9, 300000.0),
      point: {
        //表示点
        heightReference: this.Cesium.HeightReference.CLAMP_TO_GROUND,
        color: this.Cesium.Color.WHITE, //点的颜色
        pixelSize: 10, //点的大小
        outlineColor: this.Cesium.Color.RED, //就是所谓的border-color
        outlineWidth: 5 //border-width
      },
      label: {
        //表示点的描述
        text: "北京", //点的文字
        font: "14pt Source Han Sans CN", //文字的大小和字体
        fillColor: this.Cesium.Color.fromCssColorString('#ffffff'), //文字的颜色

        // 注意，这里的this.Cesium.Color后面只能接颜色的英文，不能接十六进制的颜色
        // 如果你需要用到十六进制的颜色，可以使用这样来表示:
        // fillColor: this.Cesium.Color.fromCssColorString('#f00')
        backgroundColor: this.Cesium.Color.AQUA, //给文字添加背景颜色
        showBackground: false, //若是想给文字添加背景颜色 这行必不可少
        style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth: 1,
        //垂直位置
        heightReference: this.Cesium.HeightReference.NONE,
        verticalOrigin: this.Cesium.VerticalOrigin.TOP,
        pixelOffset: new this.Cesium.Cartesian2(0, 20) //偏移度 0 表示x轴上的偏移量 10表示y轴上的偏移量
      }
    });

    viewer.zoomTo(viewer.entities);

    // eslint-disable-next-line no-console
    console.log(viewer);
    console.log(GuangZhou);
    console.log(ShangHai);
    console.log(BeiJing);
  },
  methods: {
    computeCircle: function(radius) {
      var positions = [];
      for (var i = 0; i < 360; i++) {
        var radians = this.Cesium.Math.toRadians(i);
        positions.push(
          new this.Cesium.Cartesian2(
            radius * Math.cos(radians),
            radius * Math.sin(radians)
          )
        );
      }
      return positions;
    }
  }
};
</script> 
<style scoped>
.map-box {
  width: 100%;
  height: 100%;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

这是我的main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'cesium/Widgets/widgets.css'
// import Cesium from '../node_modules/cesium/Build/Cesium'
import Cesium from 'cesium/Cesium'
Vue.prototype.Cesium = Cesium

Vue.config.productionTip = false

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