Cesium 各种封装效果的使用

1.创建cesium地球

 var viewer = new Cesium.Viewer("cesiumContainer", {
      selectionIndicator: true,
      infoBox: true,
      //需要进行可视化的数据源的集合
      animation: true, //是否显示动画控件
      shouldAnimate: true,
      homeButton: true, //是否显示Home按钮
      fullscreenButton: true, //是否显示全屏按钮
      baseLayerPicker: true, //是否显示图层选择控件
      geocoder: true, //是否显示地名查找控件
      timeline: true, //是否显示时间线控件
      sceneModePicker: true, //是否显示投影方式控件
      navigationHelpButton: true, //是否显示帮助信息控件
      requestRenderMode: true, //启用请求渲染模式
      scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
      sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
      //加载天地图影像地图,WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
      //tileset添加地形,本地地址
      imageryProvider: new Cesium.TileMapServiceImageryProvider({
        url: 'http://127.0.0.1:8080' + '/TMS/',

        fileExtension: 'jpg',
        layer: 'img',
        style: 'default',
        tileMatrixSetID: 'w',
        format: 'tiles',
        maximumLevel: 20,
        name: "main"
      }),
    });
    //去掉版权信息
    viewer._cesiumWidget._creditContainer.style.display = "none";
    //光照
    viewer.scene.globe.enableLighting = true;
    //地形深度
    viewer.scene.globe.depthTestAgainstTerrain = false;

2.各个脚本初始

 //云
    var cloud = new Cloud({
      viewer: viewer,
    });
    //雨
    var rain = new Rain(viewer);
    //雪
    var snow = new Snow(viewer);
    //积雪
    var snowcover = new SnowCover(viewer);
    //雾
    var fog = new Fog(viewer);

3.使用方法

 $("#clouds").click(function () {
      console.log("天气--->云");
      cloud.LoadClouds();
    });
    $("#rains").click(function () {
      console.log("天气--->雨");
      rain.createRain();
    });
    $("#snows").click(function () {
      console.log("天气--->雪");
      snow.createSnow();
    });
    $("#snowscover").click(function () {
      console.log("天气--->积雪");
      snowcover.createSnowCover();
    });
    $("#fogs").click(function () {
      console.log("天气--->雾");
      fog.createFog();
    });
    $("#clear").click(function () {
      console.log("天气--->清除");
      cloud.clearClouds();
      rain.clearRain();
      snow.clearSnow();
      snowcover.clearSnowCover();
      fog.clearFog();
    });


 var slider = document.getElementById("slider");
    slider.addEventListener("change", function () {
      console.log("雪大小:", slider.value);
      //snow.setSnowAlpha(slider.value);
      //snowPostProcess.alpha = 0.6;
      var brightnessValue =parseFloat(slider.value).toFixed(1);
      snowcover.setSnowCover(brightnessValue);
      console.log("模型:", tileset,"特效:",viewer.scene.postProcessStages);
    });

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Cs.js是一个开源的WebGL框架,支持绘制点、线和面等3D图形。它提供了一个简单的封装负责管理WebGL渲染流程和带有简单工具库的API。其中,cesium绘制点线面封装是其重要的功能之一。 cesium绘制点线面封装可以在3D场景中绘制不同的几何形状。它使用CeisumJS的基础结构,通过提供必要的参数,可以生成一个形状对象。这个形状对象可以在场景中随意移动、放大、旋转或者删除。除此之外,绘制点、线和面可以使用不同的样式和颜色。 通过cesium绘制点线面封装,用户可以创建简单的图形形状或是更加复杂的3D模型。例如,用户可以绘制一个球体、立方体、圆形或者多边形等形状。这些形状可以是实心的、空心的或者半透明的,且可以根据需要进行颜色和纹理的调整。 总的来说,cesium绘制点线面封装简化了3D场景的创建和管理流程。同时,它具有强大的可定制性,使得用户可以根据自己的需求和喜好制作精美的3D图形。 ### 回答2: Cesium是一种开放源代码的虚拟地球浏览器,它允许用户在浏览器中查看,操作和交互地理信息。Cesium提供了丰富的API,其中包括绘制多种类型的图形功能。Cesium绘制点线面封装,即是通过Cesium提供的API对点线面进行封装和自定义样式。 首先,可以使用Cesium的Entity API创建点线面,这些基本实体包括点、直线、多段线、面以及它们的混合体,如多边形和多面体。通过设置不同的样式和属性,例如颜色、透明度、线宽、面纹理等,可以自定义图形样式。 其次,Cesium还提供了Primitive类型来提高绘制效率和性能。Primitive是Cesium中一种基于WebGL实现的渲染图元,它可以用来绘制所有类型的点线面图形。具体而言,可以使用GroundPrimitive类型绘制贴地图形,如粒子云、热力图等;使用ShadowVolume类型绘制视觉效果良好和高效的实时阴影。 最后,Cesium提供了与三维地球视图交互的接口,可以在地球上自由移动、旋转、缩放视图,并支持与用户输入交互。因此,Cesium绘制点线面封装可以轻松实现图形可视化和交互性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值