mapgis-3d-path-roaming
# 属性
# vueKey
- 类型:
String
- 可选
- 非侦听属性
- 默认值:
default
- 描述: mapgis-web-scene 组件的 ID,当使用多个 mapgis-web-scene 组件时,需要指定该值,来唯一标识 mapgis-web-scene 组件,同时 mapgis-web-scene 插槽中的组件也需要传入相同的 vueKey,让组件知道应该作用于哪一个 mapgis-web-scene。
# vueIndex
- 类型:
Number
- 可选
- 非侦听属性
- 默认值:
(Math.random() * 100000000).toFixed(0)
随机计算值 - 描述: 当 mapgis-web-scene 插槽中使用了多个相同组件时,例如多个 mapgis-3d-igs-doc-layer 组件,用来区分组件的标识符。
# positions
- 类型:
Array
- 可选
- 非侦听属性
- 默认值:
[{ x: 114.40150642571967, y: 30.46598749322795, z: 7.771843648287394 },{ x: 114.40168198567844, y: 30.46658777743634, z: 7.77844677044535 },{ x: 114.40227628732939, y: 30.467054308914204, z: 7.629952007623256 },{ x: 114.40232362516146, y: 30.467591260922404, z: 7.87974370284682 }]
- 描述: 漫游路径坐标集合
# setting
- 可选
- 非侦听属性
- 默认值
{
"speed": 10,
"exHeight": 1,
"heading": 90,
"pitch": 0,
"range": 1,
"animationType": 1,
"interpolationAlgorithm": "LagrangePolynomialApproximation",
"isLoop": true,
"showPath": true,
"showInfo": true,
"modelUrl": ""
}
描述: 漫游参数设置
参数 类型 描述 speed Number 漫游速度。默认 10m/s(10 米/秒) 特别提醒(漫游场景范围很大的时候,这个一定要设置大,比如飞机可能就是真实的几千米每秒 如果不按真实设置,会导致内部时间点插值过密,造成卡顿)。 exHeight Number 附加高程。默认 1 heading Number 航向角 (单位弧度)。默认 90 pitch Number 俯仰角 (单位弧度)。默认 0 range Number 视角高度。默认 0 animationType Number 动画漫游的类型。默认 1。动画漫游的类型:1 跟随,2 锁定第一视角,3 上帝视角。场景漫游三个视角解释:跟随:相机视角不与漫游模型同时移动,可交互,方位角,俯仰角,距离不可设置,因为这三个参数的值的改变对场景没有影响;锁定第一视角:模拟本人漫游,可设置方位角,俯仰角,距离;上帝视角:从上空俯视漫游,俯仰角默认为-90,方位角默认为 90,方位角和距离可设置。 interpolationAlgorithm String 插值算法 默认 LagrangePolynomialApproximation 拉格朗日 还有线性插值 LinearApproximation 埃尔米特插值插值 HermitePolynomialApproximation。 isLoop Boolean 是否循环。 默认 true showPath Boolean 是否显示路径。默认 true showInfo Boolean 是否显示提示信息。默认 true modelUrl String 模型资源路径。默认"",可通过配置界面设置
# models
- 类型:
String
- 可选
- 非侦听属性
- 默认值:
./CesiumModels/Cesium_Man.glb
- 描述: 模型
# 方法
# onClickStartOrPauseOrResume
- Description: 开始/暂停/继续漫游事件。
# onClickStop
- Description: 停止漫游。
# onCheckBoxChange
- Description: checkbox 勾选事件。(循环,显示路径,显示提示信息)。
- Param:
{val,key}
val
checkbox 改变后的值key
checkbox 对应的字段,循环(isLoop),显示路径(showPath),显示提示信息(showInfo)
# onEffectsChange
- Description: 更改方位角/俯仰角。
- Param:
{val,key}
val
改变后的值key
修改对应的字段,方位角(heading),俯仰角(pitch)
# changeRange
- Description: 更改距离。
- Param:
{val}
val
改变后的值
# onTypeChange
- Description: 切换插值方法
- Param:
{val}
val
改变后的值
# onModelChange
- Description: 切换模型
- Param:
{val}
val
改变后的值
# 事件
# @load
- Description: 在 pathroaming 组件 加载完毕后发送该事件
- Payload pathroaming 组件对象
# @unload
- Description: 在 pathroaming 组件 销毁发送该事件
- Payload pathroaming 组件对象
# 示例
# 非插槽方式
<template>
<mapgis-web-scene style="{height: '100vh'}">
<mapgis-3d-ogc-wmts-layer
:baseUrl="url"
:wmtsLayer="layer"
:tileMatrixSet="tileMatrixSet"
:format="format"
:tilingScheme="tilingScheme"
:token="token"
></mapgis-3d-ogc-wmts-layer>
<mapgis-3d-igs-m3d
:autoReset="autoReset"
:maximumScreenSpaceError="maximumScreenSpaceError"
:url="m3dUrl"
/>
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-path-roaming
:positions="positions"
:setting="setting"
:models="models"
/>
</mapgis-ui-card>
</mapgis-web-scene>
</template>
<script>
export default {
name: "pathroaming",
data() {
return {
url: "http://t0.tianditu.gov.cn/img_c/wmts",
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
autoReset: true,
maximumScreenSpaceError: 8,
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "2ddaabf906d4b5418aed0078e1657029"
},
positions: [
{ x: 114.40150642571967, y: 30.46598749322795, z: 7.771843648287394 },
{ x: 114.40168198567844, y: 30.46658777743634, z: 7.77844677044535 },
{ x: 114.40227628732939, y: 30.467054308914204, z: 7.629952007623256 },
{ x: 114.40232362516146, y: 30.467591260922404, z: 7.87974370284682 }
],
setting: {
speed: 10,
exHeight: 1,
heading: 90,
pitch: 0,
range: 1,
animationType: 1,
interpolationAlgorithm: "LagrangePolynomialApproximation",
isLoop: true,
showPath: true,
showInfo: true,
modelUrl: ""
},
models: [
{
label: "人",
value: "./CesiumModels/Cesium_Man.glb"
},
{
label: "卡车",
value: "./CesiumModels/CesiumMilkTruck.glb"
},
{
label: "飞机",
value: "./CesiumModels/Cesium_Air.gltf"
}
]
};
},
methods: {}
};
</script>
# 插槽方式
<template>
<mapgis-web-scene style="{height: '100vh'}">
<mapgis-3d-ogc-wmts-layer
:baseUrl="url"
:wmtsLayer="layer"
:tileMatrixSet="tileMatrixSet"
:format="format"
:tilingScheme="tilingScheme"
:token="token"
></mapgis-3d-ogc-wmts-layer>
<mapgis-3d-igs-m3d
:autoReset="autoReset"
:maximumScreenSpaceError="maximumScreenSpaceError"
:url="m3dUrl"
/>
<mapgis-ui-card class="storybook-ui-card">
<mapgis-3d-path-roaming
:positions="positions"
:setting="setting"
:models="models"
@load="load"
>
<!-- 这里是自定义的界面-->
<div>
<button @click="start">开始</button>
<button @click="stop">停止</button>
</div>
</mapgis-3d-path-roaming>
</mapgis-ui-card>
</mapgis-web-scene>
</template>
<script>
export default {
name: "snowczm",
data() {
return {
url: "http://t0.tianditu.gov.cn/img_c/wmts",
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
autoReset: true,
maximumScreenSpaceError: 8,
tileMatrixSet: "c",
tilingScheme: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "2ddaabf906d4b5418aed0078e1657029"
},
positions: [
{ x: 114.40150642571967, y: 30.46598749322795, z: 7.771843648287394 },
{ x: 114.40168198567844, y: 30.46658777743634, z: 7.77844677044535 },
{ x: 114.40227628732939, y: 30.467054308914204, z: 7.629952007623256 },
{ x: 114.40232362516146, y: 30.467591260922404, z: 7.87974370284682 }
],
setting: {
speed: 10,
exHeight: 1,
heading: 90,
pitch: 0,
range: 1,
animationType: 1,
interpolationAlgorithm: "LagrangePolynomialApproximation",
isLoop: true,
showPath: true,
showInfo: true,
modelUrl: ""
},
models: [
{
label: "人",
value: "./CesiumModels/Cesium_Man.glb"
},
{
label: "卡车",
value: "./CesiumModels/CesiumMilkTruck.glb"
},
{
label: "飞机",
value: "./CesiumModels/Cesium_Air.gltf"
}
]
};
},
methods: {
//坡向分析组件加载完毕事件
load(pathroaming) {
this.pathroaming = pathroaming;
},
//开始坡向分析
start() {
this.pathroaming.onClickStartOrPauseOrResume();
},
//移除坡向分析
stop() {
this.pathroaming.onClickStop();
}
}
};
</script>