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>