SuperMap iClient3D for WebGL-Vue组件开发之Viewer组件

作者：桔子
本文同步发布于https://www.jianshu.com/p/ff85ffd72113

前面已经介绍了SuperMap iClient3D for WebGL采用Vue框架进行开发时资源引用的方式，那么这篇文章就来介绍SuperMap iClient3D for WebGL使用的核心——Viewer组件。Viewer组件是用来承载三维球，是整个应用的核心。至于Vue工程如何创建、Vue语法等这里就不再赘述。下面进入核心开发过程。

1、模板构建

<template>
  <div>
    <div id="cesiumContainer" class="customCesium" ref="viewer"></div>
    <div id="loadingbar" class="spinner" v-show="loadingbarshow">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </div>
</template>

这块没有特别的设置，和普通单页面开发一样，也是设置一个viewer的容器，用于初始化viewer，另外保留了初始化动画，通过v-show控制其显示。

2、脚本部分

export default {
  name: "viewer",
  data() {
    return { loadingbarshow: true };
  },
  //注意参数名大小写问题，umd打包之后，html页面需要通过-连接，如debug-show
  props: {
    debugShow: {
      type: Boolean,
      default: false
    },
    sceneurl: {
      type: String
    },
    navigation: {
      type: Boolean,
      default: false
    },
    isdashboard: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    //异步加载资源
    getCesiumScript(CesiumPath, prettycsspath) {
      if (!window.Cesium) {
        //widgets样式
        let $widgetslink = document.createElement("link");
        $widgetslink.rel = "stylesheet";
        window.document.head.appendChild($widgetslink);
        $widgetslink.href = CesiumPath + "/Widgets/widgets.css";

        //pretty样式
        let $prettycsspath = document.createElement("link");
        $prettycsspath.rel = "stylesheet";
        window.document.head.appendChild($prettycsspath);
        $prettycsspath.href = prettycsspath;

        //Cesium.js资源
        let $Cesiumscript = document.createElement("script");
        window.document.body.appendChild($Cesiumscript);
        $Cesiumscript.src = CesiumPath + "/Cesium.js";
        return new Promise((resolve, reject) => {
          $Cesiumscript.onload = () => {
            if (window.Cesium) {
              resolve(window.Cesium);
            } else {
              reject(console.log("load failed"));
            }
          };
        });
      }
    },
    //异步加载资源，等同于promise，资源路径存放在globe.js中
    async beforeInit() {
      await this.getCesiumScript(CesiumPath, prettycsspath);
    },
    init() {
      if (this.$globe.Viewer) {
        return;
      }
      let viewer = new Cesium.Viewer(this.$refs.viewer, {
        navigation: this.$props.navigation,
        orderIndependentTranslucency: false,
        contextOptions: {
          webgl: {
            alpha: true
          }
        }
      });
      viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
      let scene = viewer.scene;
      scene.sun.show = false;
      //scene.globe.show = false
      scene.skyAtmosphere.show = false;
      scene.skyBox.show = false;
      //扩展globe的viewer属性，方便其他组件调用
      this.$set(this.$globe, "viewer", viewer);
      viewer.scene.debugShowFramesPerSecond = this.$props.debugShow;
      this.$data.loadingbarshow = false;
      if (this.$props.sceneurl) {
        viewer.scene.open(this.$props.sceneurl);
      }
    }
  },
  mounted: function() {
    var _that = this;
    // self
    //   .getCesiumScript(self.$globe.CesiumPath, self.$globe.prettycsspath)
    //   .then(() => {
    //     self.$nextTick(() => {
    //       self.init();
    //     });
    //   });

    _that.beforeInit().then(() => {
      _that.init();
    });
  }
};

这里做几点解释：
（1）viewer、scene等和场景相关的对象不通过data进行监听。

（2）props中可自定义多个参数，用于组件初始化时传参。

（3）异步加载资源再初始化需要时间，使用 async await和Vue.$nextTick操作上效果相同。

（4）Vue.$globe属性是自定义属性，其作用在后面章节里边进行介绍。

相关代码，已经上传GitHub，https://github.com/OrangeOrg/vue-webgl-components，后续也将进一步完善，欢迎大家下载使用。