vue-iclient3d
v0.0.5
Published
# 简介 ### 特点: - 采用当前Vue3升级组件,相比原来有更快的速度和更好的性能 - 实现了界面与功能分离,可以更灵活的适用于各种应用场景 - 全面的开源组件源码,可以更容易的理解和修改等二次开发,轻松实现自定义组件。
Downloads
3
Readme
vue-iClient3D
简介
特点:
- 采用当前Vue3升级组件,相比原来有更快的速度和更好的性能
- 实现了界面与功能分离,可以更灵活的适用于各种应用场景
- 全面的开源组件源码,可以更容易的理解和修改等二次开发,轻松实现自定义组件。
示例:https://www.supermapol.com/earth/vue-iClient3D/index.html
Vue目前提供的组件可以参考示例项目中,如您在使用过程中遇到问题,或更好的使用建议,欢迎提issues,开发人员看到会及时给予处理
快速使用
Vue工程,NPM 安装:
npm install vue-iclient3d --save
1、修改index.html文件:
- 在index.html里引入SuperMap3D等资源文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.supermapol.com/earth/SuperMap3D/SuperMap3D.js"></script>
<title>webgl3d</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2、修改main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
// 引入ui依赖
import {
Button,
Layout,
Checkbox,
Switch,
Radio,
Spin,
Menu,
Dropdown,
Input,
Select,
Timeline,
InputNumber,
Slider
} from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';
app.use(Button)
.use(Timeline)
.use(Layout)
.use(Radio)
.use(Menu)
.use(Input)
.use(Spin)
.use(Select)
.use(Dropdown)
.use(Switch)
.use(Checkbox)
.use(InputNumber)
.use(Slider);
// 引入vue-iclient3d组件包
import webgl3d from 'vue-iclient3d'
import 'vue-iclient3d/index.css'
app.use(webgl3d)
app.mount('#app')
3、在App.vue里测试使用量算功能组件:
<template>
<sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
<sm3d-terrainSlope></sm3d-terrainSlope>
</sm3d-viewer>
</template>
<script>