<template>
<div class="hello">
<el-row class="btns">
<el-button>默认按钮</el-button>
<el-button type="primary" @click="positionWH">威海</el-button>
<el-button type="success" @click="AddRainEffect">下雨</el-button>
<el-button type="info" @click="RemoveRainEffect">停</el-button>
<el-button type="warning" @click="AddRainEffect('1')">下雪</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<div id="cesiumContainer"></div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
viewer: null,
_rainEffect: null,
};
},
mounted() {
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYTFiMTI0MS1kN2IwLTQ0MTctODE2Ni04ZWE0MTJkYzUzMmYiLCJpZCI6ODA2NjcsImlhdCI6MTY0MzA4NzcwNX0.kj35MO4cTZMlBibX1MiB54MZ7D9LS2rvrEB0grmjIwQ";
this.earthInit();
},
methods: {
earthInit() {
this.viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否创建动画小器件,左下角仪表
baseLayerPicker: false, //是否显示图层选择器
fullscreenButton: false, //是否显示全屏按钮
geocoder: true, //是否显示geocoder小器件,右上角查询按钮
homeButton: true, //是否显示Home按钮
infoBox: false, //是否显示信息框
sceneModePicker: false, //是否显示3D/2D选择器
selectionIndicator: false, //是否显示选取指示器组件
timeline: false, //是否显示时间轴
navigationHelpButton: false, //是否显示右上角的帮助按钮
scene3DOnly: true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
clock: new Cesium.Clock(), //用于控制当前时间的时钟对象
selectedImageryProviderViewModel: undefined, //当前图像图层的显示模型,仅baseLayerPicker设为true有意义
imageryProviderViewModels:
Cesium.createDefaultImageryProviderViewModels(), //可供BaseLayerPicker选择的图像图层ProviderViewModel数组
selectedTerrainProviderViewModel: undefined, //当前地形图层的显示模型,仅baseLayerPicker设为true有意义
terrainProviderViewModels:
Cesium.createDefaultTerrainProviderViewModels(), //可供BaseLayerPicker选择的地形图层ProviderViewModel数组
//瓦片地址地图
imageryProvider: new Cesium.UrlTemplateImageryProvider({
url: "http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
}),
//地形
terrainProvider: new Cesium.CesiumTerrainProvider({
url: Cesium.IonResource.fromAssetId(1),
requestVertexNormals: true,
requestWaterMask: true,
}),
fullscreenElement: document.body, //全屏时渲染的HTML元素,
useDefaultRenderLoop: true, //如果需要控制渲染循环,则设为true
targetFrameRate: undefined, //使用默认render loop时的帧率
showRenderLoopErrors: false, //如果设为true,将在一个HTML面板中显示错误信息
automaticallyTrackDataSourceClocks: true, //自动追踪最近添加的数据源的时钟设置
contextOptions: undefined, //传递给Scene对象的上下文参数(scene.options)
sceneMode: Cesium.SceneMode.SCENE3D, //初始场景模式
mapProjection: new Cesium.WebMercatorProjection(), //地图投影体系
dataSources: new Cesium.DataSourceCollection(),
//需要进行可视化的数据源的集合
clock: new Cesium.Clock({
currentTime: Cesium.JulianDate.fromDate(new Date()),
}),
});
this.viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权信息
// 数值越大越远
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.8; //摄像机视口远近参数,可设置地球大小
//定位到中国
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
73.0,
3.0,
135.0,
53.0
);
this.viewer.camera.flyHome(5);
},
//定位到威海
positionWH() {
// camera 相机 定位到威海
// 参数精度,维度,高度
this.viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(
122.116394,
37.509691,
28000.0
),
});
},
//下雨着色器
FragmentShader_Rain() {
return "uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
\n\
float hash(float x){\n\
return fract(sin(x*133.3)*13.13);\n\
}\n\
\n\
void main(void){\n\
\n\
float time = czm_frameNumber / 200.0;\n\
vec2 resolution = czm_viewport.zw;\n\
\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 c=vec3(.6,.7,.8);\n\
\n\
float a=-.4;\n\
float si=sin(a),co=cos(a);\n\
uv*=mat2(co,-si,si,co);\n\
uv*=length(uv+vec2(0,4.9))*.3+1.;\n\
\n\
float v=1.-sin(hash(floor(uv.x*100.))*2.);\n\
float b=clamp(abs(sin(20.*time*v+uv.y*(5./(2.+v))))-.95,0.,1.)*20.;\n\
c*=v*b; \n\
\n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(c,1), 0.5); \n\
}\n\
";
},
//定义下雪场景 着色器
FragmentShader_Snow() {
return "uniform sampler2D colorTexture;\n\
varying vec2 v_textureCoordinates;\n\
\n\
float snow(vec2 uv,float scale)\n\
{\n\
float time = czm_frameNumber / 60.0;\n\
float w=smoothstep(1.,0.,-uv.y*(scale/10.));if(w<.1)return 0.;\n\
uv+=time/scale;uv.y+=time*2./scale;uv.x+=sin(uv.y+time*.5)/scale;\n\
uv*=scale;vec2 s=floor(uv),f=fract(uv),p;float k=3.,d;\n\
p=.5+.35*sin(11.*fract(sin((s+p+scale)*mat2(7,3,6,5))*5.))-f;d=length(p);k=min(d,k);\n\
k=smoothstep(0.,k,sin(f.x+f.y)*0.01);\n\
return k*w;\n\
}\n\
\n\
void main(void){\n\
vec2 resolution = czm_viewport.zw;\n\
vec2 uv=(gl_FragCoord.xy*2.-resolution.xy)/min(resolution.x,resolution.y);\n\
vec3 finalColor=vec3(0);\n\
float c = 0.0;\n\
c+=snow(uv,30.)*.0;\n\
c+=snow(uv,20.)*.0;\n\
c+=snow(uv,15.)*.0;\n\
c+=snow(uv,10.);\n\
c+=snow(uv,8.);\n\
c+=snow(uv,6.);\n\
c+=snow(uv,5.);\n\
finalColor=(vec3(c)); \n\
gl_FragColor = mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.5); \n\
\n\
}\n\
";
},
//添加下雨
AddRainEffect(type) {
let fs_rain;
if (type == "1") {
//雪
fs_rain = this.FragmentShader_Snow();
} else {
fs_rain = this.FragmentShader_Rain();
}
let collection = this.viewer.scene.postProcessStages;
this._rainEffect = new Cesium.PostProcessStage({
name: "czm_rain",
fragmentShader: fs_rain,
});
collection.add(this._rainEffect);
},
//移除
RemoveRainEffect() {
this.viewer.scene.postProcessStages.remove(this._rainEffect);
this._rainEffect = null;
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
height: 100%;
#cesiumContainer {
height: 100%;
}
}
.btns {
position: absolute;
z-index: 1;
}
</style>
Cesium
最新推荐文章于 2024-05-18 09:42:40 发布