SuperMap iClient3D for WebGL-Vue组件开发之产品引用

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

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

这是Vue官网对Vue的介绍，作为当前前端公认的三大主流框架之一，Vue以其MVVM架构，有着双向数据绑定、关注视图层、易上手等等特点，积累了大量开发者。
SuperMap iClient 3D for WebGL 一款在服务式 GIS 架构体系中， 无任何插件，跨浏览器的客户端产品。它基于Cesium开源框架,面向 HTML 5 的三维应用开发，快速构建内容丰富、响应迅速、体验流畅的三维真空间应用，在GIS圈也是一款主流三维产品，也拥有众多开发者。
Vue是一套用于构建用户界面的渐进式框架，有自己的开发体系，SuperMap iClient 3D for WebGL 产品能否在Vue框架下进行开发呢？答案是肯定的。下面来说两种实现的方式。

1、index.html页面直接引用

这种方式比较直接简单，也比较好操作，但不够优雅，不太符合Vue组件化的思想。

2、动态引用方式

在Vue组件中进行使用异步方式动态的引用资源脚本，这种方式相对比较优雅。

//异步加载资源
    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);
    },

下一节将讲解如何实现在vue组件中初始化三维场景。