关于Cesium:vue与cesium结合并且展示图层等基本信息

1、环境构建

npm install -S cesium (必须加-S参数，否则呈现援用谬误)

2、引入文件

2.1首先将/node_modules/cesium/Build/Cesium 文件夹复制到 /public/static目录下 与下述buildModuleUrl 相结合，否则动态文件不会显示（比方图片等）

2.2文件引入

1. import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
2. import { Viewer } from "cesium/Source/Cesium";
3. import * as Cesium from "cesium/Source/Cesium";
4. import "cesium/Source/Widgets/widgets.css";
5. buildModuleUrl.setBaseUrl("static/");

上述：
1和5为引入buildModuleUrl 并且设置cesium动态文件门路
2为引入cesium应用的外围类
3为cesium库
4为cesium的款式文件（必须援用）

3引入3D球体

     this.viewer = new Viewer("cesiumContainer", {
        //   须要进行可视化的数据源的汇合
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: true, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层抉择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示工夫线控件
        sceneModePicker: false, //是否显示投影形式控件
        navigationHelpButton: false, //是否显示帮忙信息控件
        infoBox: false, //是否显示点击因素之后显示的信息
        requestRenderMode: true, //启用申请渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节俭GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 临时没发现用途
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "gis2d/terrain/{z}/{x}/{y}.jpg"//地图瓦片
        })
      });
    this.viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息

4、设置相机缩放范畴

//相机的高度的最小值
this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 250000; 
//相机高度的最大值
this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 12000000; 
// 设置相机放大时的速率
this.viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; 
//设置相机放大时的速率
this.viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; 

5、定位

     this.viewer.camera.setView({
        // Cesium的坐标是以地心为原点，一贯指向南美洲，一贯指向亚洲，一贯指向北极州
        // fromDegrees()办法，将经纬度和高程转换为世界坐标
        destination: Cesium.Cartesian3.fromDegrees(108.78, 31.04, 9000000)
        orientation: {
           // 指向
           heading: Cesium.Math.toRadians(90, 0),
           // 视角
           pitch: Cesium.Math.toRadians(-90),
           roll: 0.0
         }
      });  

6、增加中国地图，并以五大战区进行划分，用不同的色彩进行显示

   //应用GeoJsonDataSource加载json格局的数据
   var dataSource = Cesium.GeoJsonDataSource.load("json/province.json");
      dataSource.then(data => {
        this.viewer.dataSources.add(data);
        var entities = data.entities.values;
        var colorHash = {};
        for (var i = 0; i < entities.length; i++) {
          var entity = entities[i];
          //通过theater判断属于哪个区块并且附上色彩
          var theater = entity.properties._theater._value;
          var name = entity.name;
          var color = colorHash[name];
          if (!color) {
            color =
              theater == "east"
                ? Cesium.Color.fromCssColorString("rgba(240,221,15,0.5)")
                : theater == "west"
                ? Cesium.Color.fromCssColorString("rgba(155,41,143,0.5)")
                : theater == "north"
                ? Cesium.Color.fromCssColorString("rgba(0,161,255,0.5)")
                : theater == "south"
                ? Cesium.Color.fromCssColorString("rgba(6,64,229,0.5)")
                : theater == "middle"
                ? Cesium.Color.fromCssColorString("rgba(42,171,25,0.5)")
                : Cesium.Color.fromCssColorString("rgba(241,3,24,0.5)");
            entity.polygon.material = color;
          }
        }
      });

7、增加实体类，显示名称及图标

   //申请获取要增加的实体数据
        this.$http.get("/json/assetsAll.json", {}).then(res => {
        res.data.forEach(item => {
          let labelInfo = this.viewer.entities.add(new Cesium.Entity());//增加实体类
          labelInfo.position = Cesium.Cartesian3.fromDegrees(//实体的地位
            parseInt(item.X),
            parseInt(item.Y),
            -100
          );
          labelInfo.label = {//实体展现的文字
            show: true,
            showBackground: false,//是否展现背景色
            fillColor: Cesium.Color.fromCssColorString("#000"),//设置字体色彩
            // backgroundColor: Cesium.Color.fromCssColorString("#000"),//设置字体背景色
            scale: 0.5, //这里十分奇妙的先将字体大小放大一倍在放大一倍
            font: "normal 28px MicroSoft YaHei",
            text: item.stationName,
            pixelOffset: new Cesium.Cartesian2(-40, 25),//偏移量
            horizontalOrigin: Cesium.HorizontalOrigin.LEFT
          };
          labelInfo.billboard = {//实体图标
            image: item.hasFaultAsset
              ? require("@/assets/img/location-blue-sm.png")
              : item.hasTask
              ? require("@/assets/img/location-red-sm.png")
              : require("@/assets/img/flag-red-sm.png"),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
          };
        });
      });