中地数码

# 量测组件

mapgis-3d-measure

# 属性

# vueKey

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

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

# vueIndex

  • 类型: Number
  • 可选
  • 非侦听属性
  • 描述:

    当 mapgis-web-scene 插槽中使用了多个相同组件时，例如多个 mapgis-3d-igs-doc-layer 组件，用来区分组件的标识符。

# 槽

# default

  • 描述: Measure 的自定义槽的实现，可以自定义绘制控件样式

# 事件

# @load

  • 描述: 在 Measure 加载完毕后发送该事件
  • 回调参数 { Measure }
  • Measure Measure 对象

# @unload

  • 描述: 在 Measure 注销完毕后发送该事件

# @measured

  • 描述: 在 Measure 测量完毕后发送该事件

    直线测量结果：Array,[起始点（0），第一次点击距离起始点的长度，第二次点击距离起始点的长度，...，右键结束测量后，最后一个点距离起始点的长度]， 单位：千米
    面积测量结果：Number,测量的面积，单位：平方米
    三角测量结果：Object,{horizontalDiatance（水平距离）,slantDiatance（直线距离）,verticalDiatance（高差）}
    坡度测量：number，坡度，单位：度

  • 回调参数 { result }

# 方法

# enableMeasureLength

  • 描述: 激活直线测量功能

# enableMeasureArea

  • 描述: 激活面积测量功能

# enableMeasureTriangle

  • 描述: 激活三角测量功能

# enableMeasureSlope

  • 描述: 激活坡度测量功能

# 示例

# 简单使用

# 多屏使用

<template>
  <div id="app">
    <!--第一个webscene-->
    <mapgis-web-scene v-bind:vueKey="vueKeyOne"> </mapgis-web-scene>
    <!--第二个webscene，多个webscene请指定vueKey来标识组件，这里让测量组件作用在vueKey为vueKeyTwo的组件上-->
    <mapgis-web-scene v-bind:vueKey="vueKeyTwo">
      <mapgis-3d-Measure
        v-bind:vueKey="vueKeyTwo"
        @load="handleLoad"
        @measured="measured"
      >
        <div id="toolbar-wrapper">
          <div class="toolbar-item" v-on:click="measureLength">直线测量</div>
          <div class="toolbar-item" v-on:click="measureArea">面积测量</div>
          <div class="toolbar-item" v-on:click="measureTriangle">三角测量</div>
          <div class="toolbar-item" v-on:click="measureSlope">坡度测量</div>
          <div class="toolbar-item" v-on:click="deleteMeasure">删除</div>
        </div>
      </mapgis-3d-Measure>
    </mapgis-web-scene>
  </div>
</template>

<script>
export default {
  name: "cesiumWmtsLayer",
  data() {
    return {
      vueKeyOne: "sceneOne",
      vueKeyTwo: "sceneTwo"
    };
  },
  methods: {
    handleLoad(measure) {
      console.log("地图加初始化完毕！", measure);
      //取得测量组件对象
      this.measure = measure;
    },
    measured(result) {
      //取得测量结果
      console.log("result", result);
    },
    measureLength() {
      //激活直线测距
      this.measure && this.measure.enableMeasureLength();
    },
    measureArea() {
      //激活面积测量
      this.measure && this.measure.enableMeasureArea();
    },
    measureTriangle() {
      //激活三角测量
      this.measure && this.measure.enableMeasureTriangle();
    },
    measureSlope() {
      //激活坡度测量
      this.measure && this.measure.enableMeasureSlope();
    },
    deleteMeasure() {
      //删除测量结果
      this.measure && this.measure.deleteMeasure();
    }
  }
};
</script>

<style scoped>
#app {
  height: 100vh;
  width: 100vw;
}
#toolbar-wrapper {
  position: absolute;
  z-index: 9999;
  display: inline-flex;
  overflow-x: hidden;
  overflow-y: visible;
  top: 20px;
  left: 20px;
}
.toolbar-item {
  background: #ffffff;
  border: 1px dashed #666666;
  text-align: center;
  font-size: 20px;
  line-height: 20px;
  height: fit-content;
  padding: 6px 16px;
  cursor: pointer;
}
</style>

← IGS二维矢量 →