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页面直接引用
<!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组件中初始化三维场景。
本文地址：https://blog.csdn.net/supermapsupport/article/details/109642209
上一篇： java实现角色+武器攻击小游戏
下一篇： java poi导出模板