# # 动态剖切

> mapgis-3d-dynamic-cutting

## # 属性

### # `startDistance`

- 类型: `Number`
- 可选
- 默认值: `0`
- 侦听属性
- 描述: 动态剖切的起始距离

### # `currentDistance`

- 类型: `Number`
- 可选
- 默认值: `0`
- 侦听属性
- 描述: 当前切割面所在位置，通过改变这个值来修改剖切面位置

### # `endDistance`

- 类型: `Number`
- 可选
- 默认值: `0`
- 侦听属性
- 描述: 动态剖切的结束距离，不传时，偶人取模型外包盒的距离

### # `direction`

- 类型: `String`
- 可选
- 默认值: `left`
- 侦听属性
- 描述: 动态剖切的切割面朝向，方向分为 left、right、forward、back、top、bottom

### # `color`

- 类型: `String`
- 可选
- 默认值: `#00FFFF`
- 侦听属性
- 描述: 动态剖切的剖切面颜色，与 css 的 color 属性一致，使用 16 进制颜色

### # `opacity`

- 类型: `Number`
- 可选
- 默认值: `0.7`
- 侦听属性
- 描述: 剖切对象透明度，与 css 的 opacity 属性一致

### # `defaultCutIndex`

- 类型: `Number`
- 可选
- 默认值: `第一个输入的vueIndex`
- 侦听属性
- 描述: 当有多个模型要进行剖切时，要选择一个剖切的主体模型，迫切面会绑定在这个模型上

### # `vueKey`

- 类型: `String`
- 可选
- 非侦听属性
- 默认值: `default`
- 描述:

    mapgis-web-scene组件的ID，当使用多个mapgis-web-scene组件时，需要指定该值，来唯一标识mapgis-web-scene组件，
    同时mapgis-web-scene插槽中的组件也需要传入相同的vueKey，让组件知道应该作用于哪一个mapgis-web-scene。

### # `vueIndex`

- 类型: `Number或Array`
- 必传:
- 侦听属性
- 描述: 通过 vueIndex 将剖切面绑定在模型上，当只剖切一个模型时，传一个 vueIndex 即可，当要通视对多个模型进行剖切时，传入一个[vueIndex]数组即可

## # 事件

### # `@loaded`

- Description: 动态剖切加载完毕事件
- Param: `{DynamicCutting}`
- `DynamicCutting` 动态剖切对象

## # 插槽

### # `default`

- Description: 覆盖插槽即可重写界面

## # 动态剖切使用方法

    <template>
      <mapgis-web-scene
        libPath="cesium/Cesium.js"
        pluginPath="cesium/webclient-cesium-plugin.min.js"
      >
        <mapgis-3d-igs-m3d :vueIndex="vueIndex2" :url="url"></mapgis-3d-igs-m3d>
        <mapgis-3d-igs-m3d :vueIndex="vueIndex" :url="url2"></mapgis-3d-igs-m3d>
        <mapgis-3d-dynamic-cutting
          :vueIndex="vueIndex"
          :startDistance="distance"
          :currentDistance="currentDistance"
          :defaultCutIndex="defaultCutIndex"
          :color="color"
          :opacity="opacity"
          :direction="direction"
        ></mapgis-3d-dynamic-cutting>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          url: "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s",
          url2:
            "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent",
          vueIndex: 1,
          vueIndex2: 2,
          distance: -1000,
          direction: "right",
          defaultCutIndex: 2,
          color: "#ff0000",
          opacity: 0.3,
          currentDistance: 2000
        };
      },
      methods: {}
    };
    </script>

## # 动态剖切 - 同时剖切多个模型

    <template>
      <mapgis-web-scene
        libPath="cesium/Cesium.js"
        pluginPath="cesium/webclient-cesium-plugin.min.js"
      >
        <mapgis-3d-igs-m3d :vueIndex="vueIndex2" :url="url"></mapgis-3d-igs-m3d>
        <mapgis-3d-igs-m3d :vueIndex="vueIndex" :url="url2"></mapgis-3d-igs-m3d>
        <mapgis-3d-dynamic-cutting
          :vueIndex="vueIndexArr"
          :startDistance="distance"
          :currentDistance="currentDistance"
          :defaultCutIndex="defaultCutIndex"
          :color="color"
          :opacity="opacity"
          :direction="direction"
        ></mapgis-3d-dynamic-cutting>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          url: "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s",
          url2:
            "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent",
          vueIndex: 1,
          vueIndex2: 2,
          //同时剖切多个模型时，传入一串要切割的模型的vueIndex即可
          vueIndexArr: [1, 2],
          distance: -1000,
          direction: "right",
          defaultCutIndex: 2,
          color: "#ff0000",
          opacity: 0.3,
          currentDistance: 2000
        };
      },
      methods: {}
    };
    </script>

## # 自定义界面-插槽方式

    <template>
      <mapgis-web-scene
        libPath="cesium/Cesium.js"
        pluginPath="cesium/webclient-cesium-plugin.min.js"
      >
        <mapgis-3d-igs-m3d :vueIndex="vueIndex2" :url="url"></mapgis-3d-igs-m3d>
        <mapgis-3d-igs-m3d :vueIndex="vueIndex" :url="url2"></mapgis-3d-igs-m3d>
        <mapgis-3d-dynamic-cutting
          :vueIndex="vueIndexArr"
          :startDistance="distance"
          :currentDistance="currentDistance"
          :defaultCutIndex="defaultCutIndex"
          :color="color"
          :opacity="opacity"
          :direction="direction"
          @loaded="loaded"
        >
          <div>
            <!--自定义您的界面-->
            自定义您的界面
            <button @click="change">动态剖切</button>
          </div>
        </mapgis-3d-dynamic-cutting>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          url: "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔_2_钻孔模型s",
          url2:
            "http://develop.smaryun.com:6163/igs/rest/g3d/钻孔分层点_Sur_000_Ent",
          vueIndex: 1,
          vueIndex2: 2,
          //同时剖切多个模型时，传入一串要切割的模型的vueIndex即可
          vueIndexArr: [1, 2],
          distance: -1000,
          direction: "right",
          defaultCutIndex: 2,
          color: "#ff0000",
          opacity: 0.3,
          currentDistance: 2000,
          DynamicCutting: undefined
        };
      },
      methods: {
        loaded(DynamicCutting) {
          //在这里拿到DynamicCutting组件对象
          this.DynamicCutting = DynamicCutting;
        },
        change() {
          //通过改变currentDistance的值，来改变剖切距离
          this.DynamicCutting.currentDistance = 1500;
        }
      }
    };
    </script>