# qe-box
这个组件主要用于三维中绘制盒要素。
# 实例
显示代码
<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" // 鼠标移出事件