> 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>