# qe-ellipsoid
这个组件主要用于三维中绘制(椭)球体要素。
# 实例
隐藏代码
<template>
<div style="height: 450px;">
<qe-viewer
:imagery-type="'AMap'"
:fullscreen-button="true"
:default-view="defaultView"
>
<qe-entity-layer v-if="isShowLayer">
<qe-ellipsoid
:position="[118.78600228, 31.9135434, 1.66113721]"
:radius="{ x: 20, y: 20, z: 20 }"
:attr="{name: '测试数据'}"
:styles="styles"
@click="handler"
></qe-ellipsoid>
</qe-entity-layer>
</qe-viewer>
</div>
</template>
<script>
import { QeViewer, QeEntityLayer, QeEllipsoid } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
export default {
components: {
QeViewer,
QeEntityLayer,
QeEllipsoid
},
data () {
return {
markers:[],
defaultView: [
118.7863,
31.9087,
801.6425,
1.724684714172732,
-53.783141852231246,
0.008819224020548466
],
isShowLayer: true,
styles: {
material: "rgba(241,12,12,0.7)",
outline: true
}
};
},
methods: {
handler(evt) {
const attr = evt.overlay.attr;
alert(`该点的名称为--${attr.name}`)
}
}
}
</script>
# Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
position | 位置坐标,[lng-经度,lat-纬度,alt-高度] | array | — | — |
radius | 半径,格式为:{x: 30, y: 30, z: 30} | object | — | — |
styles | ellipsoid 可选样式参数 | object | 参照 ellipsoid-styles | — |
attr | 用户自定义属性,支持 JavaScript API 任意数据类型 | * | — | — |
# ellipsoid-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 //最远距离
}, //根据距离设置可见
"stackPartitions": 64, // 指定堆栈数。
"slicePartitions": 64, // 指定径向切片数量的属性
"subdivisions": 128 // 指定每个轮廓环的样本数,确定曲率的粒度
}
# Events
覆盖物事件的使用请参照上面Ellipsoid 实例
// 覆盖物可选事件
"ready" // 组件装载后,返回当前实例对象
"click" // 鼠标点击事件
"rightclick" // 鼠标右击事件
"dblclick" // 鼠标双击事件
"mousemove" // 鼠标移动事件
"wheel" // 鼠标滚轮事件
"mouseover" // 鼠标移入事件
"mouseout" // 鼠标移出事件
← qe-ellipse qe-label →