# install dependencies
npm install
# serve with hot reload at localhost:3000
npm run dev
# build for production with minification
npm run build:js
npm run build:style
注:项目存放文件夹路径中不能有中文字符,否则启动会有异常报错。
npm install @supermap/iclient3d-vue-for-webgl --save-d
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
// 完整引入第三方库,部分组件需要
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
app.use(ElementPlus)
//import * as echarts from 'echarts';
//window.echarts = echarts //挂载到window上
// 引入webgl3d组件包
import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css'
import webgl3d from "@supermap/iclient3d-vue-for-webgl"
app.use(webgl3d)
app.mount('#app')
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="public/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="public/Cesium/Cesium.js" ></script>
<title>webgl3d</title>
</head>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js" async></script>
<script src="public/js/axios.min.js" ></script>
</body>
</html>
<template>
<sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
<sm3d-measure></sm3d-measure>
</sm3d-viewer>
</template>
<script>
<!DOCTYPE html>
<html lang="en">
<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引入-demo</title>
</head>
<div id="app">
<sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
<sm3d-measure></sm3d-measure>
</sm3d-viewer>
<script>
const app = Vue.createApp({});
app.use(webgl3d);
app.mount("#app");
</script>
</body>
<!-- 根据使用具体组件的需要引入其他第三方依赖 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js" async></script>
<script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/js/axios.min.js" async></script> -->
</html>