cesium在h5页面中的常用方法

浅谈cesium在h5页面中的应用

因为在最近的项目中才上手cesium，所以理解也不太深。自己在学这个的查了好多文档才找到想要使用的几个简单功能，为了方便以后的同学们学习和使用，就把我自己的浅薄知识分享出来吧！不足之处请大佬们指正，嘿嘿嘿。。。。。

下载安装

这方面在网上有好多教程，大家可以找来看看，基本上就是下载压缩包，然后cmd，node server.js，之后打开http://localhost:8088/就能看见大家要的内个地球了。

1. 调整页面顺序 把hello world.html这个文件改成index.html就行了；
2. 改变默认端口 打开server.js，
   然后把原来的8080改成你要打开的端口

默认页面调整

1. 各种默认图标的隐藏
   
   
   我用的是css的方法隐藏方式，还有一种js的方式也能用来隐藏这些
   
2. 默认位置的改变
   小房子按钮能回到默认位置，而默认的位置应该是在美洲，好多人（我自己）的需求是默认中国，我是在CSDN上找的代码，Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

常用的操作

1. 自转
   viewer.clock.multiplier = 100; //速度
   viewer.clock.shouldAnimate = true;
   var previousTime = viewer.clock.currentTime.secondsOfDay;
   function onTickCallback() {
   var spinRate = 1;
   var currentTime = viewer.clock.currentTime.secondsOfDay;
   var delta = (currentTime - previousTime) / 1000;
   previousTime = currentTime;
   viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
   }
   viewer.clock.onTick.addEventListener(onTickCallback);
   //监听点击事件，当点击地图时停止旋转
   var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
   handler.setInputAction(function(click) {
   viewer.clock.onTick.removeEventListener(onTickCallback);}

   2. 广告牌
      test = viewer.entities.add({
      name: [tada[i][j].id, tada[i][j].no, tada[i][j].style,tada[i][j].name],
      // code: ‘11111’,

      				// description: '测试', //可写Html代码
      				position: Cesium.Cartesian3.fromDegrees(tada[i][j].jzb, tada[i][j].wzb, 99), //广告牌坐标
      
      				billboard: {
      					id: tada[i][j].id,
      					image: tada[i][j].timg,
      
      
      					rotation: 0, //设置以弧度为单位的旋转角度
      					scale: 1.0, //以像素为单位
      					show: true,
      					style: Cesium.LabelStyle.FILL,
      					width: 22,
      					height: 24,
      					// border:1 solid red,
      					backgroundColor: new Cesium.Color(0.5, 0.6, 1, 1.0),
      					scaleByDistance: new Cesium.NearFarScalar(20000000, 1, 30000000, 0),
      					translucencyByDistance: new Cesium.NearFarScalar(20000000, 1, 30000000, 0),
      
      					disableDepthTestDistance: Number.POSITIVE_INFINITY, //广告牌不进行深度检测
      					heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
      
      				},
      				label: {
      					text: tada[i][j].name,
      					font: '12px',
      					// fillColor: Cesium.Color.WHITE,
      					style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      					outlineWidth: 5,
      					show: true,
      					//垂直位置
      
      					verticalOrigin: Cesium.VerticalOrigin.BUTTON,
      					horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
      					//中心位置
      					pixelOffset: new Cesium.Cartesian2(-30, 40),
      					scaleByDistance: new Cesium.NearFarScalar(10000000, 1, 20000000, 0),
      					translucencyByDistance: new Cesium.NearFarScalar(50000, 1, 100000, 0),
      					disableDepthTestDistance: Number.POSITIVE_INFINITY //广告牌的文字不进行深度检测
      				}
      			})
      

3.定位
viewer.camera.flyTo({
destination : Cesium.Cartesian3.fromDegrees($(经度,纬度,高度),
orientation : {
heading : Cesium.Math.toRadians(90.0),
pitch : Cesium.Math.toRadians(-90.0),
roll : 0.0
}
})}

结束

因为我用的不多，基本上我用到的就都在上面了，欢迎留言。。。。。