# qe-polygon

这个组件主要用于三维中绘制多边形要素。

# 实例

隐藏代码

<template>

  <div style="height: 450px;">
    <qe-viewer
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
    <qe-entity-layer v-if="isShowLayer">
      <qe-polygon
        :positions="plyPt"
        :holes="plyHoles"
        :styles="plyStyles"
        :attr="{name: '测试数据'}"
        @click="handler"
      ></qe-polygon>
    </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QePolygon } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'

export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QePolygon
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      plyStyles: {
        material: "green",
        extrudedHeight: 50
      },
      plyPt: [
        [118.78485929, 31.91394225, 0.24679262],
        [118.7870894, 31.9140142, 0.00090438],
        [118.78630686, 31.91318961, -0.10361775],
        [118.78555958, 31.91317366, 0]
      ],
      plyHoles: [
        {
          positions: [
            [118.78550702, 31.91376746, 0.09033209],
            [118.78629252, 31.91377867, 1.01690474],
            [118.78633432, 31.91338977, 0.07308486],
            [118.78566242, 31.91329406, -0.06661843]
          ],
          holes: [
            {
              positions: [
                [118.78586977, 31.91364417, -0.0788724],
                [118.78609329, 31.91362571, -0.07865482],
                [118.78596527, 31.91351248, -0.07844403]
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    handler(evt) {
      const attr = evt.overlay.attr;
      alert(`该点的名称为--${attr.name}`)
    }
  }
}
</script>

# Attributes

参数	说明	类型	可选值	默认值
positions	多边形坐标串，格式参照示例代码	array	—	—
holes	多边形洞坐标串，格式参照示例代码	array	—	—
styles	`polygon` 可选样式参数	object	参照 polygon-styles	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

# polygon-styles

  // 样式参数(可选)
  {
    "height": 1, //高度
    "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
    "extrudedHeight": 0, //拉升高度
    "extrudedHeightReference": 0, // 拉伸的高度模式。 NONE: 0, CLAMP_TO_GROUND: 1, RELATIVE_TO_GROUND: 2
    "stRotation": 0, //旋转角度
    "fill": true, //是否用提供的材料填充多边形。
    "material": "red", //材质
    "outline": false, //是否显示边框
    "outlineColor": "black", //边框颜色
    "outlineWidth": 0, //边框宽度
    "closeTop": true, //顶面是否闭合
    "closeBottom": true, //底面是否闭合
    "arcType": 1, // 指定 polygon 线条类型。NONE: 0, GEODESIC: 1, RHUMB: 2
    "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    }, //根据距离设置可见
    "classificationType": 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者
    "zIndex": 0 //层级
  }

# Events

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

// 覆盖物可选事件
"ready" // 组件装载后，返回当前实例对象
"click" // 鼠标点击事件
"rightclick" // 鼠标右击事件
"dblclick" // 鼠标双击事件
"mousemove" // 鼠标移动事件
"wheel" // 鼠标滚轮事件
"mouseover" // 鼠标移入事件
"mouseout" // 鼠标移出事件

← qe-point qe-polyline →