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, //是否显示时间轴 sceneMode:Cesium.SceneMode.COLUMBUS_VIEW,//设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING navigationHelpButton:false, //是否显示右上角的帮助按钮 scene3DOnly : true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源 navigationInstructionsInitiallyVisible:false, showRenderLoopErrors:false, imageryProvider : new Cesium.OpenStreetMapImageryProvider({ url : ‘//a.tile.openstreetmap.org/’ }) //加载自定义地图瓦片需要指定一个自定义图片服务器//URL 为瓦片数据服务器地址 });
2.
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){});
9. 使视角到达某一地点
viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(lon, lat, height), orientation: { heading : curHeading, //左右偏移 pitch : curPitch, //上下偏移 roll : 0.0 } });
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。