《学习笔记》VueCesium第二篇：VcLayerImagery

加载一个影像图层，相当于初始化一个 Cesium.ImageryLayer 实例。

需要作为 vc-viewer 的子组件才能正常加载。可以通过imageryProvider属性进行图层数据指定，或者引用组件库vc-imagery-provider-xxx系列组件作为 vc-layer-imagery 子组件挂载各个 imageryProvider，但一个影像图层只能挂载一个 provider。

属性

props	type	description
sortOrder	number	指定图层相对顺序
imageryProvider	VcImageryProvider	指定影像图层的瓦片提供方式。
rectangle	VcRectangle	指定影像图层的矩形范围，此矩形限制了影像可见范围。
alpha	LayerPropCallback	指定影像图层透明度值，取值范围为 0.0~1.0
contrast	LayerPropCallback	指定影像图层对比度。值为 1.0 表示使用原图；值大于 1.0 表示增加对比度；值小于 1.0 表示降低对比度

以上为常见属性，全部属性请查看文档 组件 | VcLayerImagery,其中type复杂类型请查看 基础类型

示例图

本示例为天地图地形展示

代码示例

<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-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-layer-imagery>
        <vc-imagery-provider-tianditu
          map-style="cva_c"
          token="436ce7e50d27eede2f2929307e6b33c0"
        ></vc-imagery-provider-tianditu>
      </vc-layer-imagery>
    </vc-viewer>
    <div class="demo-toolbar">
      <el-row>
        <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 instance = getCurrentInstance();
    const provider = ref(null);
    let viewer = undefined;
    // methods
    const unload = () => {
      provider.value.unload();
    };
    const reload = () => {
      provider.value.reload();
    };
    const load = () => {
      provider.value.load();
    };
    const ready = ({ Cesium, viewer }) => {};
    return {
      ready,
      provider,
      unload,
      reload,
      load,
    };
  },
};
</script>

<style></style>

注：map-style 指定了天地图所加载的地图类型