qe-model

这个组件主要用于三维添加格式为 glb/gltf 的三维模型。

---

实例

隐藏代码

<template>

  <div style="height: 450px;">
  <div  style="height: 8%;">
      <button @click="layerFilter" style="height: 30px;">
      layerFilter
      </button>
    </div>
    <qe-viewer style="height:90%"
      :imagery-type="'AMap'"
      :fullscreen-button="true"
      :shouldAnimate="true"
      :default-view="defaultView"
    >
      <qe-entity-layer v-if="isShowLayer" @ready="layerHandler">
        <qe-model
        id="test"
          :position="[118.78600228, 31.9135434, 1.66113721]"
          :url="'../Cesium_Man.glb'"
          :styles="styles" 
          :attr="{name: '测试数据'}"
          @click="handler"
        ></qe-model>
      </qe-entity-layer>
    </qe-viewer>
  </div>
</template>

<script>
import { QeViewer, QeEntityLayer, QeModel } from '@qycloud/vue-qearth';
import 'vue2qearth/vue2qearth.css'
let layer;
export default {
  components: {
    QeViewer, 
    QeEntityLayer, 
    QeModel
  },
  data () {
    return {
      markers:[],
      defaultView: [
        118.7863,
        31.9087,
        801.6425,
        1.724684714172732,
        -53.783141852231246,
        0.008819224020548466
      ],
      isShowLayer: true,
      styles: {
        scale: 200
      }
    };
  },
  methods: {
    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	—	—
url	资源地址	string/Resource	—	—
styles	模型可选样式参数	object	参照 model-styles	—
attr	用户自定义属性，支持 JavaScript API 任意数据类型	*	—	—

model-styles

  // 样式参数(可选)
  {
    "scale": 1, //比例
    "minimumPixelSize": 0, //指定模型的最小像素大小，而不考虑缩放
    "maximumScale": 0, //指定模型的最大比例
    "heightReference": 0, //高度参照，0：位置无参照，位置是绝对的，1：位置固定在地形上 2：位置高度是指地形上方的高度。
    "shadows": 0, //阴影类型，0：禁用、1：启用 、2：投射、3：接受
    "silhouetteColor": "red", //轮廓颜色
    "silhouetteSize": 0, //轮廓宽度
    "lightColor": "red", //模型着色时指定灯光颜色
    "distanceDisplayCondition": {
      "near": 0, //最近距离
      "far": Number.MAX_VALUE //最远距离
    } //根据距离设置可见
  }

Events

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

---

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