qe-measure

这个组件主要用于三维测量，包括测高、测面、测距、贴地量算。

---

注意

测量操作：点击开始测量后，左键单击选择测量点，右键单击结束测量。

实例

是否贴地

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <el-button-group>
        <el-button type="primary" size="mini" @click="handler('distance')">测距</el-button>
        <el-button type="primary" size="mini" @click="handler('area')">测面</el-button>
        <el-button type="primary" size="mini" @click="handler('height')">测高</el-button>
        <el-button type="primary" size="mini" @click="clear()">清除</el-button>
      </el-button-group>
      <el-switch
        v-model="clampToGround"
        active-text="是否贴地"
        inactive-text="">
      </el-switch>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
      <qe-primitive-layer>
        <qe-tileset
          url="http://221.226.186.58:8025/qearth-tileset/tileset.json"
          :isZoomTo="true"
        ></qe-tileset>
      </qe-primitive-layer>
      <qe-measure
        ref="measure"
        :measuring="measuring"
        :measure-type="measureType"
        :clamp-to-ground="clampToGround"
        @measured="measuredEvts"
      ></qe-measure>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QePrimitiveLayer, QeTileset, QeMeasure } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementUI)

export default {
  components: {
    QeViewer, 
    QePrimitiveLayer,
    QeTileset,
    QeMeasure
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      measuring: false,
      measureType: "distance",
      clampToGround: true
    };
  },
  methods: {
    handler(measureType) {
      this.measureType = measureType;
      this.measuring = !this.measuring;
      // this.clampToGround = clampToGround;
    },
    measuredEvts(evt) {
      this.measuring = false;
    },
    clear() {
      this.$refs["measure"].clear();
      this.measuring = false;
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
measuring	是否开启测量	boolean	—	false
measureType	测量类型,distance--测距 area--测面 height--测高	string	—	distacne
clampToGround	是否开启贴地量算	boolean	—	false

Events

测量事件的使用请参照上面Measure 实例

---

// 测量可选事件
"ready" // 组件装载后，返回当前实例对象
"measured" // 测量结束事件