# # 填挖方分析

> mapgis-3d-cut-fill

## # 属性

### # `height`

- 类型: `Number`
- 默认值: `100`
- 侦听属性
- 描述: 填方或挖方的起始高度，挖方从下往上挖，填方从上往下填

### # `xPaneNum`

- 类型: `Number`
- 默认值: `16`
- 侦听属性
- 描述: x方向采样个数，数值越大，计算的值越准确

### # `yPaneNum`

- 类型: `Number`
- 默认值: `16`
- 侦听属性
- 描述: y方向采样个数，数值越大，计算的值越准确

### # `color`

- 类型: `String`
- 默认值: `#398167`
- 侦听属性
- 描述: 填挖方墙体颜色，与css的color属性一致，使用16进制颜色

### # `opacity`

- 类型: `Number`
- 默认值: `0.7`
- 侦听属性
- 描述: 填挖方墙体透明度，与css的opacity属性一致

##方法

### # `startAnalyse`

- Description: 开始填挖方分析
- Param: `{type,height,xPaneNum,yPaneNum}`
- `type` 可选，分析类型，cut：开挖分析，fill：填方分析
- `height` 可选，填方或挖方的起始高度，挖方从下往上挖，填方从上往下填
- `xPaneNum` 可选，x方向采样个数，数值越大，计算的值越准确
- `yPaneNum` 可选，y方向采样个数，数值越大，计算的值越准确

### # `stopAnalyse`

- Description: 清除填挖方分析

## # 事件

### # `@loaded`

- Description: 填挖方组件加载完毕事件
- Payload `{ Fill }`
- `Fill` 填挖方组件对象

### # `@analysed`

- Description: 在填挖方分析完毕后发送该事件
- Payload `{ result }`
- `result` 分析结果

### # `@analyseStoped`

- Description: 在清除填挖方分析后发送该事件

## # 填挖方分析使用方法

    <template>
      <mapgis-web-scene
        libPath="cesium/Cesium.js"
        pluginPath="cesium/webclient-cesium-plugin.min.js"
        v-on:load="handleLoad"
      >
        <mapgis-3d-ogc-wmts-layer
                :baseUrl="url"
                :wmtsLayer="layer"
                :tileMatrixSet="tileMatrixSet"
                :format="format"
                :tilingScheme="tilingScheme"
                :token="token"
        ></mapgis-3d-ogc-wmts-layer>
        <mapgis-3d-terrain-provider :url="terrainUrl" :v-if="showTerrain"></mapgis-3d-terrain-provider>
        <mapgis-3d-cut-fill></mapgis-3d-cut-fill>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          url: "http://t0.tianditu.gov.cn/img_c/wmts",
          terrainUrl: '',
          tileMatrixSet: "c",
          tilingScheme: "EPSG:4326",
          layer:"img",
          format: "tiles",
          token:{
            key: "tk",
            value: "9c157e9585486c02edf817d2ecbc7752"
          },
          showTerrain: false
        };
      },
      methods: {
        handleLoad(e) {
          const { component, Cesium } = e;
          Cesium.Ion.defaultAccessToken =
                  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE';
          const { webGlobe } = component;
          webGlobe.viewer.camera.setView({
            direction: { x: 0.4680575394156845, y: -0.8267033643312148, z: 0.31222377744109403 },
            position: { x: -674271.5790185562, y: 5530042.656916835, z: 3232882.3357299212 }
          });
          //构造视图功能管理对象（视图）
          var sceneManager = new CesiumZondy.Manager.SceneManager({
            viewer: webGlobe.viewer
          });
          //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
          sceneManager.flyToEx(94.73761648879076, 29.44177452960854, {
            height: 5900,
            heading: 60,
            pitch: -16,
            roll: 0
          });
          this.terrainUrl = new Cesium.IonResource.fromAssetId(1);
          this.showTerrain = true;
        }
      }
    };
    </script>

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

    <template>
      <mapgis-web-scene
              libPath="cesium/Cesium.js"
              pluginPath="cesium/webclient-cesium-plugin.min.js"
      >
        <mapgis-3d-ogc-wmts-layer
                :baseUrl="url"
                :wmtsLayer="layer"
                :tileMatrixSet="tileMatrixSet"
                :format="format"
                :tilingScheme="tilingScheme"
                :token="token"
        ></mapgis-3d-ogc-wmts-layer>
        <mapgis-3d-terrain-provider :url="terrainUrl" :v-if="showTerrain"></mapgis-3d-terrain-provider>
        <mapgis-3d-cut-fill
          @loaded="loaded"
        >
          <div>
            <button @click="startAnalyse">开始分析</button>
            <button @click="stopAnalyse">结束分析</button>
          </div>
        </mapgis-3d-cut-fill>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      data() {
        return {
          url: "http://t0.tianditu.gov.cn/img_c/wmts",
          terrainUrl: '',
          tileMatrixSet: "c",
          tilingScheme: "EPSG:4326",
          layer:"img",
          format: "tiles",
          token:{
            key: "tk",
            value: "9c157e9585486c02edf817d2ecbc7752"
          },
          showTerrain: false,
          analyse: undefined
        };
      },
      methods: {
        loaded(analyse){
          this.analyse = analyse;
        },
        startAnalyse(){
          //这里可自己指定分析类型、高度以及分析精度，如果不指定，则取prop中传入的，最后取默认值
          this.analyse.startAnalyse("cut",100,16,16);
        },
        stopAnalyse(){
          this.analyse.stopAnalyse();
        },
        handleLoad(e) {
          const { component, Cesium } = e;
          Cesium.Ion.defaultAccessToken =
                  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiM2Q0ZGMxYy1iZGZkLTQ4OWItODlhMy1iOWNkMDE0M2U3YWEiLCJpZCI6NTEzNSwiaWF0IjoxNjA2MjE0OTkyfQ.2aktNrUASlLsPwSFtkgKBTQLJTAnOTyjgKDRQmnafiE';
          const { webGlobe } = component;
          webGlobe.viewer.camera.setView({
            direction: { x: 0.4680575394156845, y: -0.8267033643312148, z: 0.31222377744109403 },
            position: { x: -674271.5790185562, y: 5530042.656916835, z: 3232882.3357299212 }
          });
          //构造视图功能管理对象（视图）
          var sceneManager = new CesiumZondy.Manager.SceneManager({
            viewer: webGlobe.viewer
          });
          //视点跳转（经度，纬度，视角高度，方位角，俯仰角，翻滚角）
          sceneManager.flyToEx(94.73761648879076, 29.44177452960854, {
            height: 5900,
            heading: 60,
            pitch: -16,
            roll: 0
          });
          this.terrainUrl = new Cesium.IonResource.fromAssetId(1);
          this.showTerrain = true;
        }
      }
    };
    </script>