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

最新推荐文章于 2024-04-03 10:15:33 发布

supermapsupport

最新推荐文章于 2024-04-03 10:15:33 发布

阅读量1.4k

点赞数

分类专栏：三维GIS

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/109642209

版权

三维GIS 专栏收录该内容

417 篇文章 222 订阅

订阅专栏

作者：桔子
本文同步发布于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页面直接引用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="static/Cesium/Widgets/widgets.css">
    <title>SuperMapVueframework</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="static/Cesium/Cesium.js"></script>
  </body>
</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组件中初始化三维场景。

supermapsupport

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
SuperMap iClient3D for WebGL-Vue组件开发之产品引用

作者：桔子本文同步发布于https://www.jianshu.com/p/32f5c5b91c12Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。这是Vue官网对Vue的介绍，作为当前前端公认的三大主流框架之一，Vue以其MVVM架构，有着双向数据绑定、关注视图.
复制链接

扫一扫