> mapgis-3d-analysis-profile

注意：必须在外部定义一个 div，并通过 echartsDivId 参数将 div 的 id 传入组件，用于显示剖面信息(echarts 图表)

## # 属性

### # `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 组件，用来区分组件的标识符。

### # `profileType`

- 类型: `Number`
- 可选
- 非侦听属性
- 默认值: `0`
- 描述: 分析类型，0 代表地形，1 代表地形和模型兼容

### # `polylineGroundColor`

- 类型: `String`
- 可选
- 侦听属性
- 默认值: `rgb(255,0,0)`
- 描述: 剖切线颜色

### # `samplePrecision`

- 类型: `Number`
- 可选
- 侦听属性
- 默认值: `2`
- 描述: 采样精度(采样间隔，平面距离，单位米，模型推荐为 0.2，地形推荐为 2)

### # `showPolygon`

- 类型: `Boolean`
- 可选
- 侦听属性
- 默认值: `false`
- 描述: 是否显示剖面

### # `pointColor`

- 类型: `String`
- 可选
- 侦听属性
- 默认值: `rgb(0,255,0)`
- 描述: 交互点颜色(关闭剖面的时候生效)

### # `polyLineColor`

- 类型: `String`
- 可选
- 侦听属性
- 默认值: `rgb(0,255,0)`
- 描述: 交互线颜色(开启剖面的时候生效)

### # `polygonColor`

- 类型: `String`
- 可选
- 侦听属性
- 默认值: `rgb(0,0,255)`
- 描述: 剖面颜色

### # `polygonHeight`

- 类型: `Number`
- 可选
- 侦听属性
- 默认值: `100`
- 描述: 剖面高度

### # `useMask`

- 类型: `Boolean`
- 可选
- 默认值: `true`
- 非侦听属性
- 描述: 是否使用内置的遮罩层

### # `echartsDivId`

- 类型: `String`
- 必选
- 非侦听属性
- 描述: 剖面信息显示容器的 id

### # `echartsOptions`

- 类型: `Object`
- 可选
- 非侦听属性
- 描述: 二维剖面显示样式
- 默认值:

     {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "line",
          lineStyle: {
            color: "#41aeff",
            type: "solid"
          }
        },
        confine: true, // 是否将 tooltip 框限制在图表的区域内。
        backgroundColor: "rgba(255, 255, 255, 0.8)"
      },
      title: {
        show: false
      },
      grid: {
        top: 25,
        left: 60,
        right: 20,
        bottom: 20,
        contentLabel: false
      },
      calculable: true,
      xAxis: [
        {
          show: false,
          type: "value",
          max: "dataMax"
        }
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#d9d9d9",
              type: "dotted"
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            formatter: value => {
              const texts = [];
              if (value > 999) {
                const text = (Number(value) / 1000).toFixed(2);
                texts.push(`${text}km`);
              } else {
                texts.push(`${parseInt(value)}m`);
              }
              return texts;
            }
          }
        }
      ],
      series: [
        {
          type: "line",
          smooth: true, // 建议地形平滑显示二维剖面，模型取消平滑
          itemStyle: {
            color: "#40a9ff"
          },
          markPoint: {
            symbol: "circle",
            symbolSize: 15,
            label: { position: "top" },
            data: [
              { type: "max", name: "最高点" },
              { type: "min", name: "最低点" }
            ]
          },
          areaStyle: {}
        }
      ]
    }

## # 方法

### # `analysis`

- Description: 剖面分析

### # `remove`

- Description: 移除剖面分析对象，移除剖面分析结果，关闭二维剖面显示

## # 事件

### # `@load`

- Description: 在 Profile 加载完毕后发送该事件
- Payload 剖面分析对象

### # `@start`

- Description: 在剖面分析绘制完后,开始分析前发送该事件

### # `@success`

- Description: 在剖面分析结束后发送该事件

### # `@remove`

- Description: 在移除分析对象和分析结果后，发送该事件

## # 示例

### # 非插槽方式

    <template>
      <mapgis-web-scene style="{height: '100vh'}" 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-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
        <mapgis-ui-card customPosition="top-right">
          <mapgis-3d-analysis-profile
            :profileType="profileType"
            :polygonHeight="polygonHeight"
            :polygonColor="polygonColor"
            :polyLineColor="polyLineColor"
            :pointColor="pointColor"
            :polylineGroundColor="polylineGroundColor"
            :showPolygon="showPolygon"
            :samplePrecision="samplePrecision"
            :echartsDivId="'profileChart'"
            @success="success"
            @remove="remove"
          />
        </mapgis-ui-card>
        <mapgis-ui-window
          :visible.sync="profile2dVisible"
          :min-width="400"
          :max-height="250"
          anchor="bottom-left"
          title="剖面信息"
        >
          <div
            id="profileChart"
            style="width: 380px; height: 180px; float: right"
          ></div>
        </mapgis-ui-window>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      name: "profile-example.vue",
      data() {
        return {
          url: "http://t0.tianditu.gov.cn/img_c/wmts",
          //地形url TODO这里地址打包的时候改一下
          terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
          tileMatrixSet: "c",
          tilingScheme: "EPSG:4326",
          layer: "img",
          format: "tiles",
          token: {
            key: "tk",
            value: "2ddaabf906d4b5418aed0078e1657029"
          },
          profileType: 0,
          polygonHeight: 100,
          polygonColor: "rgb(0,0,255)",
          polyLineColor: "rgb(0,255,0)",
          pointColor: "rgb(0,255,0)",
          polylineGroundColor: "rgb(255,0,0)",
          showPolygon: false,
          samplePrecision: 2,
          profile2dVisible: 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(121, 24, {
            height: 5900,
            heading: 60,
            pitch: -16,
            roll: 0
          });
        },
        success() {
          this.profile2dVisible = true;
        },
        remove() {
          this.profile2dVisible = false;
        }
      }
    };
    </script>

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

    <template>
      <mapgis-web-scene style="{height: '100vh'}" 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-igs-terrain :url="terrainUrl" :requestVertexNormals="true" />
        <mapgis-3d-analysis-profile
          :profileType="profileType"
          :position="position"
          :polygonHeight="polygonHeight"
          :polygonColor="polygonColor"
          :polyLineColor="polyLineColor"
          :pointColor="pointColor"
          :polylineGroundColor="polylineGroundColor"
          :showPolygon="showPolygon"
          :samplePrecision="samplePrecision"
          :echartsDivId="'profileChart'"
          @success="success"
          @load="load"
        >
          <!--      这里是自定义的界面-->
          <div>
            <button @click="analysis">分析</button>
            <button @click="remove">清除</button>
          </div>
        </mapgis-3d-analysis-profile>
        </mapgis-ui-card>
        <mapgis-ui-window
          :visible.sync="profile2dVisible"
          :min-width="400"
          :max-height="250"
          anchor="bottom-left"
          title="剖面信息"
        >
          <div
            id="profileChart"
            style="width: 380px; height: 180px; float: right"
          ></div>
        </mapgis-ui-window>
      </mapgis-web-scene>
    </template>

    <script>
    export default {
      name: "profile-example.vue",
      data() {
        return {
          url: "http://t0.tianditu.gov.cn/img_c/wmts",
          //地形url TODO这里地址打包的时候改一下
          terrainUrl: "http://192.168.21.191:6163/igs/rest/g3d/terrain",
          tileMatrixSet: "c",
          tilingScheme: "EPSG:4326",
          layer: "img",
          format: "tiles",
          token: {
            key: "tk",
            value: "2ddaabf906d4b5418aed0078e1657029"
          },
          position: "left",
          profileType: 0,
          polygonHeight: 100,
          polygonColor: "rgb(0,0,255)",
          polyLineColor: "rgb(0,255,0)",
          pointColor: "rgb(0,255,0)",
          polylineGroundColor: "rgb(255,0,0)",
          showPolygon: false,
          samplePrecision: 2,
          profileAnalysis: null,//剖面分析组件对象
          profile2dVisible: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(121, 24, {
            height: 5900,
            heading: 60,
            pitch: -16,
            roll: 0
          });
        },
        //剖面分析组件加载完毕事件
        load(profileAnalysis) {
          this.profileAnalysis = profileAnalysis;
        },
        //开始剖面分析
        analysis() {
          this.profileAnalysis.analysis();
        },
        //移除剖面分析
        remove() {
          this.profileAnalysis.remove();
          this.profile2dVisible = false;
        },
        success() {
          this.profile2dVisible = true;
        }
      }
    };
    </script>