《学习笔记》VueCesium第四篇：VcEntity

加载实体图形，相当于初始化一个 Cesium.Entity 实例。

需要作为 vc-viewer, vc-datasource-custom, vc-datasource-geojson, vc-datasource-kml, vc-datasource-czml 的子组件才能正常加载。使用时可以直接指定 vc-entity 的各个 graphic 属性，也用 VueCesium 提供的 vc-graphics-xxx 系列组件作为 vc-entity 子组件挂载各个 graphic，但一个实体下同类型 grahpic 只能挂载一个。如果需要加载大量实体实例集合，建议添加到数据源组件下。

属性

show:指定其子项是否显示

description:指定 entity 的 HTML 描述信息。

position：指定entity的位置

const position = ref({ lng: 102.845, lat: 30.444, height: 3000 });

viewFrom:指定entity的初始偏移量

代码示例

<template>
  <el-row ref="viewerContainer" class="demo-viewer">
    <vc-viewer
      @ready="ready"
      :camera="{
        position: [102.8, 30.57, 6000],
        heading: 162,
        pitch: -18.25,
        roll: 0.05,
      }"
    >
      <vc-entity
        ref="entity"
        :show="show"
        description="<div style='background:#aaa'>让我看看谁不点赞</div>"
        :billboard="billboard"
        :position="position"
        :label="label"
        @click="onEntityEvt"
        @mouseover="onEntityEvt"
        @mouseout="onEntityEvt"
      >          
      </vc-entity>
      <vc-navigation ref="navigation" :offset="[35, 35]"></vc-navigation>
      <vc-terrain-provider-tianditu
        ref="provider"
        token="436ce7e50d27eede2f2929307e6b33c0"
      ></vc-terrain-provider-tianditu>
      <vc-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="img_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
  
    </vc-viewer>
    <div class="demo-toolbar">
      <el-row>
        <ElButton type="primary" round @click="changeShow">{{
          show ? "关闭" : "开启"
        }}</ElButton>
        <el-button type="danger" round @click="unload">销毁</el-button>
        <el-button type="danger" round @click="load">加载</el-button>
        <el-button type="danger" round @click="reload">重载</el-button>
      </el-row>
    </div>
  </el-row>
</template>

<script>
import { ref, getCurrentInstance } from "vue";
export default {
  setup() {
    // state

    const point = ref({
      pixelSize: 28,
      color: "red",
    });
    const label = ref({
      text: "我看看是谁不点赞",
      pixelOffset: [0, 120],
    });
    let show = ref(true); //
    const billboard = ref({
      image:
        "https://img2.baidu.com/it/u=1867244078,1157066755&fm=253&fmt=auto&app=138&f=JPEG?w=386&h=390",
      scale: 0.5,
    });
    const position = ref({ lng: 102.845, lat: 30.444, height: 3000 });
    const instance = getCurrentInstance();
    const provider = ref(null);
    let viewer = undefined;

    // methods
    const changeShow = () => {
      show.value = !show.value;
      console.log(show.value);
    };
    const unload = () => {
      provider.value.unload();
    };
    const reload = () => {
      provider.value.reload();
    };
    const load = () => {
      provider.value.load();
    };
    let orientation = ref();
    const ready = ({ Cesium, viewer }) => {
      orientation = new Cesium.Quaternion(1000, 1000, 1000, 500);
    };
    return {
      orientation,
      changeShow,
      show,
      ready,
      provider,
      unload,
      reload,
      load,
      point,
      label,
      billboard,
      position,
    };
  },
};
</script>