三维引擎cesium学习经验

1.        初始化viewer对象

//创建cesium Viewer

viewer = new Cesium.Viewer(‘cesiumContainer’,{

animation:false, //是否创建动画小器件，左下角仪表

baseLayerPicker:false, //是否显示图层选择器

fullscreenButton:false, //是否显示全屏按钮

geocoder:false, //是否显示geocoder小器件，右上角查询按钮

homeButton:false, //是否显示Home按钮

infoBox : false, //是否显示信息框

sceneModePicker:false, //是否显示3D/2D选择器

selectionIndicator : false , //是否显示选取指示器组件

timeline:false, //是否显示时间轴

navigationHelpButton:false, //是否显示右上角的帮助按钮

scene3DOnly : true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源

navigationInstructionsInitiallyVisible:false,

showRenderLoopErrors:false,

imageryProvider : new Cesium.OpenStreetMapImageryProvider({ url : ‘//a.tile.openstreetmap.org/’ }) //加载自定义地图瓦片需要指定一个自定义图片服务器//URL 为瓦片数据服务器地址

 

});

2.        对entity的操作：添加、隐藏、修改、去除、居中显示

Var rainEntity=viewer.entities.add({

       id: "rain",

     name: 'RainStation',

     parent: rainLayer3D,                

     position: Cesium.Cartesian3.fromDegrees(lon, lat),

     billboard: {

        image: 'images/pointIcons/rain1.png',

        scale:0.7,

        verticalOrigin: Cesium.VerticalOrigin.BOTTOM

    },

    label: {

              text: rainfall,

              font: '12px SimHei ',

              Width: 3,

         style: Cesium.LabelStyle.FILL,

              fillColor: Cesium.Color.AQUA,

              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

              verticalOrigin: Cesium.VerticalOrigin.TOP

    }

  });  //添加

viewer.entities.getById("rain").show = false;   //隐藏

viewer.entities.getById("rain").label.text= "drp";   //修改属性

viewer.entities.removeAll();  //移除所有

viewer.zoomTo(rainEntity);   //居中显示

3.        去掉entity的双击事件

问题所在：双击entity，会放大视图，entity居中显示，且鼠标左键失去移动功能，鼠标滚轮失去作用

解决问题：

viewer.screenSpaceEventHandler.setInputAction(function(){},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );

 

4.        获取当前视角高度

var scene = viewer.scene;

var ellipsoid = scene.globe.ellipsoid;

var height=ellipsoid.cartesianToCartographic(viewer.camera.position).height;

 

5.        获取某个经纬度在屏幕上的位置

var position = Cesium.Cartesian3.fromDegrees(lon, lat);

var clickPt =Cesium.SceneTransforms.wgs84ToWindowCoordinates (viewer.scene, position);

var screenX=clickPt.x;

var screenY=clickPt.y;

 

6.        获取三维场景屏幕中心点坐标

var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2 ( viewer.canvas.clientWidth /2 , viewer.canvas.clientHeight / 2));

var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);

var lon = curPosition.longitude*180/Math.PI;

var lat = curPosition.latitude*180/Math.PI;

 

7.        响应鼠标单击等事件，获取屏幕点击坐标

var handler = new Cesium.ScreenSpaceEventHandler(canvas);

               handler.setInputAction(function(click){},Cesium.ScreenSpaceEventType.LEFT_CLICK);

               var clickX=click.position.x;

        var clickY=click.position.y;

这个LEFT_CLICK可以换成MIDDLE_CLICK、MOUSE_MOVE等就会响应滚轮点击、鼠标移动等事件，见参考文档中的ScreenSpaceEventType()，注意不同的事件中，function中的click会有不同的属性，可console.log(click)，找到所需

 

8.        跟踪相机视角的改变

viewer.camera.moveStart.addEventListener(function(moveStartPosition){})；

viewer.camera.moveEnd.addEventListener(function(moveEndPosition){})；

其实还有个

viewer.camera.changed.addEventListener(function(moveEndPosition){})，但我不会用，总是提示changed不存在，但是camera的参考文档中这个changed和moveStart和moveEnd都可以addEventListener

 

9.        使视角到达某一地点

viewer.camera.setView({

        destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),

        orientation: {

            heading : curHeading,  //左右偏移

            pitch : curPitch,   //上下偏移

            roll : 0.0                           

        }

    });