qe-picking

这个组件主要用于三维坐标拾取，可选单点以及多点坐标拾取。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%; ">
      <el-form :inline="true" label-width="400px">
        <el-form-item>
          <el-button 
            type="primary" 
            icon="el-icon-coordinate" 
            size="mini"
            @click="handler()"
            >坐标拾取
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-input
            style="width:400px;"
            placeholder="拾取的坐标"
            v-model="coordinateInfo">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
      :depthTestAgainstTerrain="true"
    >
      <qe-primitive-layer>
        <qe-tileset
           url="http://221.226.186.58:8025/qearth-tileset/tileset.json"
          :isZoomTo="true"
        ></qe-tileset>
      </qe-primitive-layer>
      <qe-picking
        ref="picking"
        :picking="picking"
        :is-single="false"
        @picked="pickedEvts"
      ></qe-picking>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QePrimitiveLayer, QeTileset, QePicking } 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,
    QePicking
  },
  data () {
    return {
      markers:[],
      defaultView: [
       122.06502636, 40.7235578,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      picking: false,
      coordinateInfo: ""
    };
  },
  methods: {
    handler() {
      this.picking = true;
    },
    pickedEvts(evt, evt1) {
      this.$confirm('是否确认拾取该点坐标?', '坐标拾取', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.coordinateInfo = JSON.stringify(evt);
        this.picking = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消拾取'
        });          
      });
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
picking	是否开启坐标拾取	boolean	—	false
isSingle	是否为单坐标拾取	boolean	—	false

Events

坐标拾取事件的使用请参照上面Picking 实例

---

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