qe-polyline

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

---

实例

隐藏代码

<template>

  <div style="height: 600px;">
  <div  style="height: 10%;">
      <el-button-group>
        <el-button 
          type="primary" 
          size="mini" 
          @click="setStyle(0)">
          普通线
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(1)">
          流动线
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(2)">
          箭头线
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(3)">
          虚线
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(4)">
          虚线2
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(5)">
          虚线3
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(6)">
          虚线4
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(7)">
          虚线5
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(8)">
          虚线6
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(9)">
          虚线7
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="setStyle(10)">
          虚线8
        </el-button>
        <el-button 
          type="primary" 
          size="mini"
          @click="layerFilter()">
          layerFilter
        </el-button>
      </el-button-group>
    </div>
    <qe-viewer style="height:90%"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :default-view="defaultView"
    >
    <qe-entity-layer v-if="isShowLayer" @ready="layerHandler">
      <qe-polyline
      id="test"
        :positions="corridorPath"
        :styles="styles" 
        :attr="{name: '测试数据'}"
        @ready="getData"
        @click="handler"
      ></qe-polyline>
    </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QePolyline } from '@qycloud/vue-qearth';
import { QEarth } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
import elementUI from 'element-ui'
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(elementUI)
let layer;
export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QePolyline
  },
  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: "#00FFAA",
        width: 8
      }
    };
  },
  methods: {
    getData(ele){
      window.polyline=ele
    },
    setStyle(type){
      switch(type){
        case 0:
          window.polyline.setStyle({
            material: QEarth.Color.fromCssColorString("rgba(241,12,122,0.7)")
          });
          break;
        case 1:
          window.polyline.setStyle({
            material: new QEarth.PolylineImageTrailMaterialProperty({
              color: QEarth.Color.GREEN,
              repeat: { x: 200, y: 1 },
              speed: 10,
              image:require("../../src/assets/dataImages/arrow3.png")
            })
          });
          break;
        case 2:
          window.polyline.setStyle({
            material: new QEarth.PolylineImageMaterialProperty({
              color: QEarth.Color.fromCssColorString('#00FFAA'),
              imageWidth: 30,
              speed: 0,
              image:require("../../src/assets/dataImages/arrow3.png")
            })
          });
          break;
        case 3:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashMaterialProperty({
              color: QEarth.Color.fromCssColorString('#ed1212'),
              gapColor:QEarth.Color.fromCssColorString('#edff12'),
              dashLength:50
            })
          });
          break;
        case 4:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: false,
              dashL0: 20.0,
              dashR0: 0.2
            })
          });
          break;
        case 5:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: false,
              dashL0: 20.0,
              dashR0: 0.4
            })
          });
          break;
        case 6:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: false,
              dashL0: 20.0,
              dashR0: 0.6
            })
          });
          break;
        case 78:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: false,
              dashL0: 20.0,
              dashR0: 0.8
            })
          });
          break;
        case 8:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: false,
              dashL0: 20.0,
              dashR0: 1.0
            })
          });
          break;
        case 9:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: true,
              dashL0: 20.0,
              dashR0: 0.2,
              dashL1: 40.0,
              dashR1: 0.3
            })
          });
          break;
        case 10:
          window.polyline.setStyle({
            material: new QEarth.PolylineDashedMaterialProperty({
              color: QEarth.Color.fromCssColorString('red'),
              isMulti: true,
              dashL0: 20.0,
              dashR0: 0.2,
              dashL1: 60.0,
              dashR1: 0.3
            })
          });
          break;
          default:
            break;
      }
    },
    handler(evt) {
      const attr = evt.overlay.attr;
      alert(`该要素的名称为--${attr.name}`)
    },
    layerHandler(target){
      layer=target;
    },
    layerFilter(){
      console.log(layer._cache,'====layer._cache')
      console.log(layer._cache['test'],'====layer._cache["test"]')
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
positions	线坐标串，[[lng-经度,lat-纬度,alt-高度],[],...]	array	—	—
styles	polyline 可选样式参数	object	参照 polyline-styles	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

polyline-styles

  // 样式参数(可选)
  {
    "width": 1, //线宽
    "material": "red", //材质
    "arcType": 1, // 线条类型。NONE: 0, GEODESIC: 1, RHUMB: 2
    "clampToGround": false, //是否贴地
    "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    }, //根据距离设置可见
    "classificationType": 2, //分类 是否影响地形，3D切片或同时影响这两者。0:地形、1:3D切片、2：两者
    "zIndex": 0 //层级
  }

Events

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

---

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