qe-polyline-volume

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

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
    <div  style="height: 8%;">
      <button @click="handlerData('circle')" style="height: 30px;">
      圆形管道测试
      </button>
      <button @click="handlerData('star')" style="height: 30px;">
      星形管道测试
      </button>
    </div>
    <qe-viewer
      style="height: 90%;"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
    <qe-entity-layer v-if="isShowLayer">
      <qe-polyline-volume
        :positions="corridorPath"
        :styles="styles" 
        :shape="shape"
        :attr="{name: '测试数据'}"
        @click="handler"
      ></qe-polyline-volume>
    </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

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

export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QePolylineVolume
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      corridorPath: [
        [118.78653636, 31.91315607, -0.14395184],
        [118.78717476, 31.91365014, 0.9309363],
        [118.78773082, 31.91401772, 0.65392468],
        [118.78792258, 31.91435828, 4.09293584]
      ],
      styles: {
        material: "rgba(241,12,12,0.7)",
        outline: true,
        cornerType: 1,
        outlineColor: "black" //边框颜色
      },
      shape: [
        {x: -15, y: -15},
        {x: 15, y: -15},
        {x: 15, y: 15},
        {x: -15, y: 15}
      ]
    };
  },
  methods: {
    handler(evt) {
      const attr = evt.overlay.attr;
      alert(`该要素的名称为--${attr.name}`)
    },
    handlerData(type) {
      this.shape = type === "circle" ? this.computeCircle(8) : this.computeStar(7,10,5);
      this.styles = {
        material: "rgba(241,12,12,0.7)",
        outline: type === "circle" ? false : true,
        cornerType: 1
      }
    },
    computeCircle(radius) {
      const positions = [];
      for (let i = 0; i < 360; i++) {
        const radians = i * Math.PI / 180.0;
        positions.push({
          x: radius * Math.cos(radians),
          y: radius * Math.sin(radians)
        });
      }
      return positions;
    },
    computeStar(arms, rOuter, rInner) {
        const angle = Math.PI / arms;
        const length = 2 * arms;
        const positions = new Array(length);
        for (let i = 0; i < length; i++) {
            let r = (i % 2) === 0 ? rOuter : rInner;
            positions[i] = { x: Math.cos(i * angle) * r, y: Math.sin(i * angle) * r};
        }
        return positions;
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
positions	线坐标串，[[lng-经度,lat-纬度,alt-高度],[],...]	array	—	—
shape	定义要拉伸的形状的位置数组, [{x:,y:},{},...],也就是管道要素横截面边界坐标	array	—	—
styles	polyline-volume 可选样式参数	object	参照 polyline-volume-styles	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

polyline-volume-styles

  // 样式参数(可选)
  {
    "cornerType": 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

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

---

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