朔州网站建设费用东莞网上商城网站建设

当前位置： 首页 > news >正文

朔州网站建设费用,东莞网上商城网站建设,北京网站建设找降龙,鞍山是哪个省哪个市一、视图#xff08;Viewer#xff09; viewer是cesium的核心类#xff0c;是一切的开端。通过new Cesium.Viewer(container, options)来创建一个Viewer对象#xff0c;而通过这个 Viewer对象#xff0c;可以添加图层、实体、相机控制等#xff0c;以及设置一些全局属性…一、视图Viewer viewer是cesium的核心类是一切的开端。通过new Cesium.Viewer(container, options)来创建一个Viewer对象而通过这个 Viewer对象可以添加图层、实体、相机控制等以及设置一些全局属性。在日常Cesium开发中几乎都是围绕着这个对象展开的。 创建Viewer实例 let viewer new Cesium.Viewer(container, options);container必需表示视图器容器元素的ID字符串或HTML元素。 options可选用于定制Viewer对象。有许多选项可以配置。更多选项请查看 示例代码 // 实例化地球let viewerOption {geocoder: false, // 地名查找,默认truehomeButton: false, // 主页按钮默认truesceneModePicker: false, //二三维切换按钮baseLayerPicker: false, // 地图切换控件(底图以及地形图)是否显示,默认显示truenavigationHelpButton: false, // 问号图标导航帮助按钮显示默认的地图控制帮助// animation: false, // 动画控制默认true .shouldAnimate: true, // 是否显示动画控制默认true .shadows: true, // 阴影timeline: true, // 时间轴,默认true .CreditsDisplay: false, // 展示数据版权属性fullscreenButton: false, // 全屏按钮,默认显示trueinfoBox: true, // 点击要素之后显示的信息,默认trueselectionIndicator: true, // 选中元素显示,默认truecontextOptions: {webgl: {preserveDrawingBuffer: true //cesium状态下允许canvas转图片convertToImage}}};let viewer new Cesium.Viewer(cesiumContainer, viewerOption);主要方法更多内容请查看 destroy(): 销毁viewer。 extend(): 扩展viewer。 resize(): 调整viewer的大小。 zoomTo(): 缩放视图以查看给定的对象。 flyTo(): 飞向一个对象。 forceResize(): 强制重新调整viewer的大小。 例如 viewer.destroy(); //销毁viewer二、场景 (Scene) 通过Scene对象可以在视图下添加图形primitive、添加场景特效如后处理特效postProcessStage、添加场景事件或控制视图下的星空skyBox、大气层skyAtmosphere、地球globe、太阳sun和月亮moon。 示例代码 添加场景特效之雪天效果 viewer.scene.postProcessStages.add(this.snowStage);/*** 雪天效果/SnowEffect() {var viewer this.viewer;let option {snowSize: 0.01, // 雪花大小值越大雪花越大 最好不要超过0.01snowSpeed: 60 // 雪花速度值越大雪花越慢};this.snowStage new Cesium.PostProcessStage({name: czm_snow,fragmentShader: this.Snow(),uniforms: {snowSize: () {return option.snowSize;},snowSpeed: () {return option.snowSpeed;}}});viewer.scene.postProcessStages.add(this.snowStage);},/** 雪天效果着色器* returns {string} 着色器/Snow() {return uniform sampler2D colorTexture;\n\varying vec2 v_textureCoordinates;\n\n\uniform float snowSpeed;\n\uniform float snowSize;\n\float snow(vec2 uv,float scale){\n\float time czm_frameNumber / snowSpeed;\n\float wsmoothstep(1.,0.,-uv.y(scale/10.));\n\if(w.1)return 0.;\n\uvtime/scale;\n\uv.ytime2./scale;\n\uv.xsin(uv.ytime.5)/scale;\n\uv*scale;\n\vec2 sfloor(uv),ffract(uv),p;\n\float k3.,d;\n\p.5.35*sin(11.*fract(sin((spscale)*mat2(7,3,6,5))*5.))-f;\n\dlength(p);\n\kmin(d,k);\n\ksmoothstep(0.,k,sin(f.xf.y)*snowSize);\n\return k*w;\n}\n\n\void main(){\n\vec2 resolution czm_viewport.zw;\n\vec2 uv(gl_FragCoord.xy2.-resolution.xy)/min(resolution.x,resolution.y);\n\vec3 finalColorvec3(0);\n\float c 0.0;\n\csnow(uv,30.).0;\n\csnow(uv,20.).0;\n\csnow(uv,15.).0;\n\csnow(uv,10.);\n\csnow(uv,8.);\n\csnow(uv,6.);\n\csnow(uv,5.);\n\finalColor(vec3©);\n\gl_FragColor mix(texture2D(colorTexture, v_textureCoordinates), vec4(finalColor,1), 0.3);\n\n}\n\;},三、相机Camera Camera表示观察场景的视角。通过操作摄像机可以控制视图的位置、方向和角度。 更多请查看 示例代码 //设置相机位置viewer.camera.setView({// 定义相机的目标位置(笛卡尔坐标)destination: {x: -2349785.4381783823,y: 4596905.031779513,z: 3743318.751622788},// 定义相机的方向和角度orientation: {// 相机的偏转角度heading表示从正北开始逆时针旋转的角度。其数值是以弧度表示的。一个值为0的heading通常表示正北// 偏航角飞机向左飞还是向右飞heading: 0.1015029573852555,// 相机的上下倾斜角度一个负的pitch值表示相机是向下倾斜的。// 俯仰角飞机向上抬头或是向下低头pitch: -0.3482370478292893,// 相机围绕其查看方向或称前进方向的旋转角度当roll值为π/2或90°转换为弧度时相机将绕其前进方向旋转90度。这意味着相机的“顶部”现在指向其右侧。// 翻滚角飞机沿前进方向轴顺时针翻转为正角度roll: 0.00005029594533212389}});Cesium中的orientation属性用于设定各种对象的方向不仅仅是相机的方向还包括其他实体如模型的方向。下面以飞机模型为例当设定飞机模型的orientation实际上是在定义飞机的朝向和姿态。想象自己在驾驶这架飞机那么飞机的前进方向和你的视线方向在概念上是相似的那么你的眼就相当于相机 。 飞机水平飞行 飞机向左偏 飞机抬头 飞机顺时针旋转
相机操作 1飞行(fly): 使相机飞向某个指定的位置。这通常是一个平滑的过渡不仅仅是简单的位置变换。 viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(lon,lat,height),duration: duration //持续时间});2缩放(zoom): 使相机向前或向后移动从而使视野放大或缩小。 // 缩小 viewer.camera.zoomOut(500); // 向后移动500米 // 放大 viewer.camera.zoomIn(500); // 向前移动500米3移动(move): 沿着地平面或其他方向移动相机而不改变它的高度或朝向。 // 向右移动 viewer.camera.moveRight(500); // 地面上向右移动500米4视角(look): 改变相机的朝向但不改变其位置。通常用于围绕某个点旋转。 viewer.camera.look(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(-10)); // 向下看10度5平面扭转(twist): 改变相机的roll值使相机绕其前进方向轴旋转。 viewer.camera.twistRight(Cesium.Math.toRadians(10)); // 顺时针扭转10度63D旋转(rotate): 在三维空间中旋转相机可以是任意方向的旋转。 viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(10)); // 绕Z轴旋转10度7用于将相机视角锁定到目标位置(lookAt): 设置相机的位置和朝向以使其始终面向某个特定的点或对象。 var targetPosition Cesium.Cartesian3.fromDegrees(103.851959, 1.290270); viewer.camera.lookAt(targetPosition, new Cesium.HeadingPitchRange(0, -Cesium.Math.PI_OVER_FOUR, 1500.0));8将地球或场景缩放到该实体的视图范围内(viewer.zoomTo()): 调整相机的位置和朝向以最佳地查看某个特定的实体或对象 var entity viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(103.851959, 1.290270),box: {dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),material: Cesium.Color.RED.withAlpha(0.5),outline: true,outlineColor: Cesium.Color.RED} }); viewer.zoomTo(entity);