# ImageryLayer

vc-layer-imagery 组件用于加载 Cesium 影像,可以直接指定 vc-layer-imageryimageryProvider 加载影像,也可以挂载子组件 vc-provider-imager-xxx 加载影像。

# 示例

# 加载影像图层到场景

# 预览

透明度
亮度
对比度
收起
  <template>
    <div class="viewer">
      <vc-viewer @ready="ready">
       <vc-layer-imagery :alpha="alpha" ref="layer"  :effect="effect" :brightness="brightness" :contrast="contrast">
          <vc-provider-imagery-tianditu
            mapStyle="img_c"
            token="436ce7e50d27eede2f2929307e6b33c0">
          </vc-provider-imagery-tianditu>
       </vc-layer-imagery>
      </vc-viewer>
      <div class="demo-tool">
        <span>透明度</span>
        <el-slider v-model="alpha" :min="0" :max="1" :step="0.01"  ></el-slider>
        <span>亮度</span>
        <el-slider v-model="brightness" :min="0" :max="3" :step="0.01"  ></el-slider>
        <span>对比度</span>
        <el-slider v-model="contrast" :min="0" :max="3" :step="0.01"  ></el-slider>
        <el-button @click="removeEffect">{{btntext}}</el-button>
      </div>
    </div>
  </template>

  <script>
    export default {
      data () {
        return {
          btntext:'移除滤镜',
          alpha: 1,
          brightness: 1,
          contrast: 1,
          effect:{}
        }
      },
      mounted(){
        this.effect = {
          bgColor: Cesium.Color.RED,
          alpha: 0.5,
          invert: false,
          preMultiplyAlpha: false,
        }
      },
      methods: {
        ready (cesiumInstance) {
          const {Cesium, viewer} = cesiumInstance
        },
        removeEffect(){
          if(this.effect){
            this.effect=null;
            this.btntext='添加滤镜'
          }
          else {
            this.effect={
             bgColor: Cesium.Color.RED,
              alpha: 0.5,
              invert: false,
              preMultiplyAlpha: false,
            }
            this.btntext='移除滤镜'
          }
        }
    }
  }
  </script>

# 属性

属性名 类型 默认值 描述
rectangle Object imageryProvider.rectangle optional图层的矩形范围,此矩形限制了影像可见范围。
alpha Number|function 1.0 optional图层透明度值,取值范围为 0.0~1.0。
brightness Number|function 1.0 optional图层亮度值。值为 1.0 表示使用原图;值大于 1.0 时图像将变亮;值小于 1.0 时图像将变暗。
contrast Number|function 1.0 optional图层对比度。值为 1.0 表示使用原图;值大于 1.0 表示增加对比度;值小于 1.0 表示降低对比度。
hue Number|function 0.0 optional图层色调。值为 0.0 表示使用原图。
saturation Number|function 1.0 optional图层饱和度。值为 1.0 表示使用原图;值大于 1.0 表示增加饱和度;值小于 1.0 表示降低饱和度。
gamma Number|function 1.0 optional图层伽马校正。值为 1.0 表示使用原图。
splitDirection Number 0 optional指定影像图层分割方向。 LEFT: -1, NONE: 0, RIGHT: 1
minificationFilter Number 9729 optional 指定图层纹理缩小过滤器。 可能的值是 TextureMinificationFilter.LINEAR 和 TextureMinificationFilter.NEAREST。NEAREST: 9728, LINEAR: 9729, NEAREST_MIPMAP_NEAREST: 9984, LINEAR_MIPMAP_NEAREST: 9985, NEAREST_MIPMAP_LINEAR: 9986, NEAREST_MIPMAP_NEAREST: 9984
magnificationFilter Number 9729 optional 指定图层纹理缩小过滤器。 可能的值是 TextureMagnificationFilter.LINEAR 和 TextureMagnificationFilter.NEAREST。 NEAREST: 9728, LINEAR: 9729
show Boolean true optional 指定图层是否显示,如果显示图层,则为 true; 否则,false。
maximumAnisotropy Number maximum supported optional 指定纹理过滤的最大各向异性级别。 如果未指定此参数,则将使用 WebGL 堆栈支持的最大各向异性。 较大的值使图像在水平视图中看起来更好。
minimumTerrainLevel Number optional最小地形细节层次。level 0 是最小细节层次。
maximumTerrainLevel Number optional最大地形细节层次。
cutoutRectangle Object optional 指定裁剪此影像图层的矩形范围。 结构:{ west: number, south: number, east: number, north: number }
colorToAlpha Object optional 指定透明时的颜色。
colorToAlphaThreshold Number 0.004 optional 颜色到alpha的阈值。

# 事件

事件名 参数 描述
ready {Cesium, viewer, cesiumObject} 该组件渲染完毕时触发,返回 Cesium 类, viewer 实例,以及当前组件的 cesiumObject。