# 雾组件
mapgis-3d-fog-effect
# 属性
# alpha
- 类型:
Number
- 默认值:
0
- 侦听属性
- 描述: 控制雾的透明度,取值范围为[0,1],值越大,雾的透明度越低。
# enable
- 类型:
Boolean
- 默认值:
true
- 侦听属性
- 描述: 控制雾组件的显示
# 雾组件使用方法
<template>
<mapgis-web-scene
lib-path="static/libs/cdn/cesium/Cesium.js"
plugin-path="static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
>
<mapgis-3d-ogc-wmts-layer
:baseUrl="urlT"
:wmtsLayer="layer"
:tileMatrixSet="tileMatrixSetID"
:format="format"
:tilingScheme="srs"
:token="token"
/>
<mapgis-3d-igs-m3d
:auto-reset="autoReset"
:maximum-screen-space-error="maximumScreenSpaceError"
:url="m3dUrl"
>
</mapgis-3d-igs-m3d>
<mapgis-3d-fog-effect :alpha="alpha" :enable="enable"></mapgis-3d-fog-effect>
<mapgis-ui-button @click="changeAlpha" class="changeAlpha">改变透明度</mapgis-ui-button>
<mapgis-ui-button @click="changeShow" class="changeShow">改变显示</mapgis-ui-button>
</mapgis-web-scene>
</template>
<script>
export default {
name: "fogczm",
data() {
return {
//天地图参数
urlT: "http://t0.tianditu.gov.cn/img_c/wmts",
tileMatrixSetID: "c",
srs: "EPSG:4326",
layer: "img",
format: "tiles",
token: {
key: "tk",
value: "f5347cab4b28410a6e8ba5143e3d5a35"
},
m3dUrl: "http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels",
autoReset: true,
maximumScreenSpaceError: 8,
enable:true,
alpha:0.1,
}
},
methods:{
changeShow() {
let vm = this;
vm.enable = !(vm.enable);
},
changeAlpha(){
this.alpha += .05;
console.log("alpha",this.alpha)
},
}
}
</script>
<style scoped>
.changeAlpha {
position: absolute;
top: 20px;
right: 20px;
}
.changeShow {
position: absolute;
top: 20px;
right: 200px;
}
</style>