关于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
          };
        });
      });