# ImageryLayer
vc-layer-imagery
组件用于加载 Cesium 影像,可以直接指定 vc-layer-imagery
的 imageryProvider
加载影像,也可以挂载子组件 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的阈值。 |
- 参考官方文档: ImageryLayer (opens new window)
# 事件
事件名 | 参数 | 描述 |
---|---|---|
ready | {Cesium, viewer, cesiumObject} | 该组件渲染完毕时触发,返回 Cesium 类, viewer 实例,以及当前组件的 cesiumObject。 |
← 导航 ArcGISMapServer影像 →