1、准备依赖资源

  • 组件依赖的cesium包需要在index.html里面引入:

在node_module里找到组件包,public文件里有需要的资源,可以复制到工程目录下的public文件夹中,然后引入cesium等资源文件,参考如下(以下由vite2新建工程为例):

2、引入依赖资源

在 index.html 中:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="Cesium/Cesium.js" ></script>
  <title>webgl3d</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <script src="js/echarts.min.js" async></script>  
  <script src="js/axios.min.js" ></script>
</body>
</html>

3、按需引入

在 main.js 中:

import '@supermap/iclient3d-vue-for-webgl/lib/theme/index.css'
import { Sm3dViewer,Sm3dTerrainOperation,resourceCN,initDrag } from "@supermap/iclient3d-vue-for-webgl"

app.config.globalProperties.Resource = resourceCN;  //设置中文,目前只支持中文,按需加载要设置
initDrag(app)  //拖拽功能,默认设置,按需加载要设置
app.use(Sm3dTerrainOperation)
app.use(Sm3dViewer)
app.mount('#app')

4、使用测试

在App.vue里测试代码:

<template>
 <sm3d-viewer scene-url="http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace">
    <sm3d-terrain-operation></sm3d-terrain-operation>
 </sm3d-viewer>
</template>

5、所有导出

initDrag
resourceCN
Sm3dPointSymbol
Sm3dClipBoxByeditor
Sm3dClipCross
Sm3dClipPlane
Sm3dClipPolygon
Sm3dCompass
Sm3dCustomService
Sm3dDrawLinePolygon
Sm3dFacade
Sm3dFlyRoute
Sm3dGeologicalBody
Sm3dImglayerAttribute
Sm3dLayerManage
Sm3dLight
Sm3dMeasure
Sm3dModelFlood
Sm3dMvtlayerStyle
Sm3dObliquePhotography
Sm3dOpenness
Sm3dParticleSystem
Sm3dAddPbr
Sm3dProfile
Sm3dProjectionImage
Sm3dRoller
Sm3dS3mlayerAttribute
Sm3dS3mlayerOperation
Sm3dS3mlayerStyle
Sm3dScanEffect
Sm3dSceneAttribute
Sm3dShadowQuery
Sm3dSightline
Sm3dSkyline
Sm3dSpatialQuery3d
Sm3dSplitScreen
Sm3dTerrainFlood
Sm3dTerrainIsoline
Sm3dTerrainOperation
Sm3dTerrainSlope
Sm3dViewer
Sm3dViewshed
Sm3dVolumeRender

最后更新时间: