方式一:NPM安装
推荐使用 npm 的方式安装(安装组件库及UI依赖)。
npm install @supermap/iclient3d-vue-for-webgl element-plus@1.0.2-beta.65 -D
注:暂不支持淘宝镜像,且版本Vue > 3.0 , node > 12.0
使用此方式前请先检查电脑中是否已安装应用程序 Node.js,若未安装,可通过下载 安装程序 进行安装。 若已安装,请阅读快速使用章节。
方式二:CDN引入
获取文件后,只需要按照普通的 JavaScript 库的使用方法去使用 <script> 标签引入即可。
- 引入 Vue-iClient3D-WebGL文件
<!-- 引入样式 -->
<link rel="stylesheet" href="https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.css">
<!-- 引入组件库 -->
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.js"></script>
示例
通过引入文件方式可以快速写出一个量算功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<!-- vue + element-plus-->
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/js/vue.global.prod.js"></script>
<link rel="stylesheet" href="https://www.supermapol.com/earth/vue-iEarth/examples/public/element-plus/index.css">
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/element-plus/index.full.js"></script>
<!-- cesium -->
<link href="https://www.supermapol.com/earth/vue-iEarth/examples/public/Cesium/Widgets/widgets.css"
rel="stylesheet">
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/Cesium/Cesium.js"></script>
<!-- 组件包 -->
<link href="https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.css" rel="stylesheet">
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/dist/components.js"></script>
<title>完整组件-CDN引入-量算</title>
</head>
<body>
<div id="app">
<sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
<sm3d-measure></sm3d-measure>
</sm3d-viewer>
</div>
<script>
const app = Vue.createApp({});
app.use(webgl3d); // webgl3d为全局引入时绑定在window的对象名
app.mount("#app");
</script>
</body>
<!-- 根据使用具体组件的需要引入其他第三方依赖 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js" async></script>
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/js/axios.min.js" async></script> -->
</html>