# qe-box

这个组件主要用于三维中绘制盒要素。


# 实例

Data provided by:
×
    26.79 MS
    显示代码
    <template>
    
      <div style="height: 450px;">
        <qe-viewer
          :imagery-type="'AMap'"
          :fullscreen-button="true"
          :default-view="defaultView"
        >
        <qe-entity-layer v-if="isShowLayer">
          <qe-box
            :position="[118.78600228, 31.9135434, 1.66113721]"
            :length="40"
            :width="60"
            :hright="80"
            :styles="bxStyles"
            :attr="{name: '测试数据'}"
            @click="handler"
          ></qe-box>
        </qe-entity-layer>
        </qe-viewer>
      </div>
    </template>
    
    <script>
    import { QeViewer, QeEntityLayer, QeBox } from '@qycloud/vue-qearth';
    import 'vue2qearth/vue2qearth.css'
    
    export default {
      components: {
        QeViewer, 
        QeEntityLayer, 
        QeBox
      },
      data () {
        return {
          markers:[],
          defaultView: [
            118.7863,
            31.9087,
            801.6425,
            1.724684714172732,
            -53.783141852231246,
            0.008819224020548466
          ],
          isShowLayer: true,
          bxStyles: {
            material: "rgba(241,12,12,0.7)",
            outline: true
          }
        };
      },
      methods: {
        handler(evt) {
          const attr = evt.overlay.attr;
          alert(`该点的名称为--${attr.name}`)
        }
      }
    }
    </script>
    
    Copied!

    # Attributes

    参数 说明 类型 可选值 默认值
    position 位置坐标,[lng-经度,lat-纬度,alt-高度] array
    width 宽度 number
    length 长度 number
    height 高度 number
    styles box 可选样式参数 object 参照 box-styles
    attr 用户自定义属性,支持 JavaScript API 任意数据类型 *

    # box-styles

      // 样式参数(可选)
      {
        "heightReference": 0, //高度参照,0:位置无参照,位置是绝对的,1:位置固定在地形上 2:位置高度是指地形上方的高度。
        "fill": true, //是否用提供的材料填充多边形。
        "material": "red", //材质
        "outline": false, //是否显示边框
        "outlineColor": "black", //边框颜色
        "outlineWidth": 0, //边框宽度
        "shadows": 0, //阴影类型,0:禁用、1:启用 、2:投射、3:接受
        "distanceDisplayCondition": {
          "near": 0, //最近距离
          "far": Number.MAX_VALUE //最远距离
        } //根据距离设置可见
      }
    

    # Events

    覆盖物事件的使用请参照上面Box 实例


    // 覆盖物可选事件
    "ready" // 组件装载后,返回当前实例对象
    "click" // 鼠标点击事件
    "rightclick" // 鼠标右击事件
    "dblclick" // 鼠标双击事件
    "mousemove" // 鼠标移动事件
    "wheel" // 鼠标滚轮事件
    "mouseover" // 鼠标移入事件
    "mouseout" // 鼠标移出事件
    
    最后更新时间: 8/16/2022, 10:45:53 AM