# 动态剖切

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>