《学习笔记》VueCesium第五篇： 常见的过渡属性

VueCesium的常见过渡属性有distanceDisplayCondition、translucencyByDistance、pixelOffsetScaleByDistance、scaleByDistance、disableDepthTestDistance。他们的共同点是随着镜头到物体的距离的变化，对其属性的改变。

distanceDisplayCondition 它的作用是在一定范围内可见，超出则隐藏。

translucencyByDistance 透明度随相机距离改变的参数。 参数 {near:2000 , nearValue: 1, far: 100000,farValue: 0.01},在距离2000到100000之间，透明度在1~0.01中变换。注：farValue不能为0，否则不生效。

scaleByDistance 随相机距离缩放的参数。

代码示例

<template>
  <el-row ref="viewerContainer" class="demo-viewer">
    <vc-viewer @ready="ready">
      <vc-entity
        ref="entity"
        :show="show"
        :position="position"
        :label="label"
        @click="onEntityEvt"
        @mouseover="onEntityEvt"
        @mouseout="onEntityEvt"
      >
        <vc-graphics-billboard
          ref="billboard"
          :image="billboard.image"
          :scale="billboard.scale"
          :show="show"
          description="<div style='background:#aaa'>让我看看谁不点赞</div>"
          :distance-display-condition="{ near: 1000, far: 200000 }"
          :translucencyByDistance="{
            near: 2000,
            nearValue: 1,
            far: 100000,
            farValue: 0.01,
          }"
          :pixelOffsetScaleByDistance="{
            near: 2000,
            nearValue: 1,
            far: 100000,
            farValue: 0.01,
          }"
          :scaleByDistance="{
            near: 2000,
            nearValue: 1,
            far: 100000,
            farValue: 0.01,
          }"
          :horizontal-origin="horizontalOrigin"
        ></vc-graphics-billboard>
        <vc-graphics-point color="red" :pixel-size="2"></vc-graphics-point>
      </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],
      distanceDisplayCondition: { near: 0, far: 200000 },
      translucencyByDistance: {
        near: 2000,
        nearValue: 1,
        far: 100000,
        farValue: 0.01,
      },
    });
    let show = ref(true); 
    const billboard = ref({mage:"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: 0 });
    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>