SuperMap_iClient3D_VUE_for_WebGL

使用前须知


推荐：从github上下载源码工程上修改组件更方便。

npm安装下的lib介绍：

  • index.js : 完整组件js文件，import方式引用。
  • index.min.js ：完整组件js文件，CDN方式引用，绑定在window对象的webgl3d属性。
  • index_basis.js : 完整组件功能实现js库，import方式引用。
  • index_basis.min.js: 完整组件功能实现js库，CDN方式引用，绑定在window对象的webgl3d_mc属性。
  • 其他js文件：包括拖动指令，语言资源，及其他各功能按需引入的js文件。

使用说明

将从以下几个方面简单介绍使用自定义组件方式

1. NPM方式使用

举例：

// 在main.js
import webgl3d_mc from "@supermap/iclient3d-vue-for-webgl/lib/index_basis.js"  //先引入
window.webgl3d_mc = webgl3d_mc;  //便于全局调用

// 在自定义组件的地方使用
setup(props) {
    let { digTerrain, clearDig } = webgl3d_mc.terrainOperation(props);  //函数返回值参调用方式，其他返回参考该组件文档
    return { digTerrain, clearDig }
    }

2. CDN方式使用

同样以地形开挖为例：

<!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-->
    <script src="https://www.supermapol.com/earth/vue-iEarth/examples/public/js/vue.global.prod.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>
    <!-- 组件库-->
    <script src="https://www.supermapol.com/earth/vue-iEarth/examples/dist/components_basis.js"></script>
    <title>自定义组件-CDN引入-demo</title>
</head>
<style>
    html,
    body,
    #app,
    #cesiumContainer {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    .demo {
        position: absolute;
        top: 50px;
        right: 100px;
        background-color: rgb(253, 252, 252);
        padding: 5px;
    }
</style>

<body>
    <div id="app">
        <div id="cesiumContainer"></div>
        <div class="demo">
            <h3>自定义界面</h3>
            <button @click="digTerrain">开挖</button>
            <button @click="clearDig" style="margin-left: 8px;">清除</button>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            setup(props) {
                //初始化地球和加载测试地形场景
                Vue.onMounted(() => {
                    viewer = new Cesium.Viewer("cesiumContainer");
                    viewer.scene.open('http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace');
                });
                // 引入组件功能函数
                let { digTerrain, clearDig } = webgl3d_mc.terrainOperation(props)
                return { digTerrain, clearDig }
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

3. 下载github源码

直接在源码上修改或重构需要的组件。

TIP

  • 源码默认启动是范例程序，当只需对单个组件进行调试，可以在index.html中修改路径，在App.vue 中使用标签调用。
  • 自定义组件时，当组件需要提供props时别忘了传给调用的函数，否则使用组件时设置修改某属性无效。

js库功能函数介绍

1. 工具类

initDrag

说明：拖拽指令。 使用方式：

//注册指令
  webgl3d_mc.initDrag(app);

//在标签上使用
   <div v-drag> 可以拖拽
       <div v-stopdrag> 禁止拖拽</div>
   </div>

tool

说明：一些工具函数。

接口：

(1) Message:消息提示。

  • Message.errorMsg('错误提示)。Message.warnMsg('警告提示)。Message.successMsg('成功提示)。

(2) axiosJsonp：拓展axios支持jsonp。

axiosJsonp(url).then((result)=>{console.log(result)})

(3)isEqualArr:判断两个数组每一项是否相等。

  • isEqualArr(arr1,arr2) ==> return true/false

(4) CartesiantoDegrees：笛卡尔转经纬度

CartesiantoDegrees(Cartesians)  //返回经纬度数组[]

(5) CartesiantoDegreesObjs:笛卡尔转经纬度(每个点是独立的对象)

CartesiantoDegreesObjs(Cartesians)  //返回经纬度数组[{},{}···]

(6) unique:数组去重函数。unique(arr) 返回新数组。

(7) gradientColors:获取渐变色函数。

gradientColors(start, end, steps, gamma) //开始颜色，结束颜色，分成多少份，透明度
//返回数组['#123456',···]

(8) getAngleAndRadian:获取两点的角度和弧度。

getAngleAndRadian(pointA, pointB)
//   return {angle,radian};

(9) CartographictoDegrees：弧度转经纬度。

 CartographictoDegrees(wgsPosition)  ==> return [longitude, latitude, height];

layerManagement

说明：封装了常用图层管理的函数。

接口： (1) addS3mLayers:添加s3m图层。

addS3mLayers(scps, callback)   //scps:[{ url, options:{name}]} ;callback(layers) ; 无返回值

(2) addScene:添加场景。

 addScene(url, options, callback)   //无返回值options:{SceneToken,autoSetView}; autoSetView:true/false(自动定位)

(3) addTerrainLayer:添加地形。

addTerrainLayer(LayerURL, isSct)

(4) addImageLayer:添加影像。

addImageLayer(LayerURL)    // 返回img图层layer

(5) addMvtLayer:添加矢量图层。

addMvtLayer(LayerURL, name, callback)     // 返回layer

(6) layersDelete:删除图层。

layersDelete(type, id_name, callback) //type：S3M/IMG/TERRAIN/MVT; id_name:图层名称（影像可以是id）

camera

说明：封装了一部分相机操作的函数

接口： (1) flyByCameraParam:飞向指定相机参数的位置

flyByCameraParam (cameraParam)  //cameraParam:{Cartesian3,heading,pitch,roll}

(2) flyByLayerName:飞向指定名称的图层

 flyByLayerName(type, id_name) //type:S3M/IMG/MVT; id_name:图层名称（影像可以是id）

2. 组件类

例举所有组件功能函数，返回值参考具体功能文档部分。
initViewer：初始化地球
地形
terrainOperation：地形操作，包含地形开挖与地形修改
terrainSlope：地形坡度坡向
terrainIsoline：地形等值线
terrainFlood：地形淹没分析
裁剪
clipBoxEditor：裁剪box交互
clipPolygon：裁剪多边形
clipPlane：裁剪平面
clipCross：裁剪Cross
分析
measure：量算
skyLine：天际线分析
shadowquery：阴影分析
viewshed：可视域分析
profile：剖面分析
sightLine：通视分析
openness：开敞度分析
spatialQuery3d：三维（GPU）查询分析
场景
splitScreen：分屏
roller：卷帘
sceneAttribute：场景属性
facade：立面图
compass：罗盘
flyRoute：飞行路线 modelFlood：模型淹没分析
geologicalBody：地质体模型
volume：体渲染
projection：视频投放
light：添加灯光
图层
layerManage：图层管理
mvtlayerStyle： mvt图层
s3mlayerAttribute：s3m图层属性
s3mlayerStyle：s3m图层风格
s3mlayerOperation：s3m图层操作
photography：倾斜摄影模型操作
imglayerAttribute：影像图层属性
绘制与特效
drawLineSurface：绘制线面
symbol：添加符号
scanEffect：扫描线
particle：粒子火焰喷泉

最后更新时间: