Cesium获取场景内鼠标点击的经纬度

Cesium获取场景内鼠标点击的经纬度

**

Cesium获取场景内鼠标点击的经纬度：
（一）首先我们要知道我们在Cesium获取的坐标有两种：

• 一种是笛卡尔3三维坐标类似于这种
  Cartesian3：（-2223370.493219466, 5192279.252569285, 2952871.861093514）
• 一种是笛卡尔2二维屏幕坐标类似于这种
  Cartesian2 ：（x: 569.5592856186945, y: 571.9133071992151）
• 而我们想要的是这种格式：
  经纬度：（113.18111061885816 27.75780613915045 58.51329991778111）
• 所以，我们想直接获取经纬度坐标，我们就需要将这两种的一种转换为经纬度坐标，代码如下：

		var viewer = new Cesium.Viewer('cesiumContainer', {
			//加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
			imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
			animation: false, //是否显示动画控件
			shouldAnimate: true,
			homeButton: false, //是否显示Home按钮
			fullscreenButton: false, //是否显示全屏按钮
			baseLayerPicker: false, //是否显示图层选择控件
			geocoder: false, //是否显示地名查找控件
			timeline: false, //是否显示时间线控件
			sceneModePicker: true, //是否显示投影方式控件
			navigationHelpButton: false, //是否显示帮助信息控件
			infoBox: false, //是否显示点击要素之后显示的信息
			requestRenderMode: true, //启用请求渲染模式
			scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
			sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
			//加载谷歌影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
				url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
				layer: 'img',
				style: 'default',
				tileMatrixSetID: 'w',
				format: 'tiles',
				maximumLevel: 18
			})
		});.
		 //定义canvas屏幕点击事件
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		//注册鼠标事件,event参数是点击的地方是在哪里
		handler.setInputAction(function (event) {
				//定义一个屏幕点击的事件，pickPosition封装的是获取点击的位置的坐标
				var position = viewer.scene.pickPosition(event.position);
				//输出之后我们发现如前言所说的坐标都是笛卡尔坐标，所以我们需要转换笛卡尔坐标
				console.log("笛卡尔3："+position);
			
  				//将笛卡尔坐标转化为弧度坐标
				var cartographic = Cesium.Cartographic.fromCartesian(position);
				console.log("弧度："+cartographic);
				//将弧度坐标转换为经纬度坐标
       			var longitude = Cesium.Math.toDegrees(cartographic.longitude); //经度
				var latitude = Cesium.Math.toDegrees(cartographic.latitude); //纬度
				var height = cartographic.height; //高度
				console.log("经纬度："+longitude,latitude,height);
				alert("经度："+ longitude + "纬度："+ latitude + "高度："+  height);
				
				//同时也可以将经度度转回为笛卡尔 
				var ellipsoid = viewer.scene.globe.ellipsoid;
				//定义84坐标为一个Cartesian值
				var wgs84 = Cesium.Cartographic.fromDegrees(longitude, latitude, height)
				
				//将84坐标转换为笛卡尔
				var dikaer = ellipsoid.cartographicToCartesian(wgs84)
				//赋值
				var longitude = dikaer.x;
				var latitude = dikaer.y;
				var height = dikaer.z;
				alert("笛卡尔x："+ longitude+"笛卡尔y："+ latitude+"笛卡尔z："+  height);
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

效果如图所示：

后续小编会持续更新cesium各种源码，特效以及其他效果或者模型加载的实现方式，还希望大家多多关注，小编也会持续更新的（Q657155100）！

声明：转载请声明出处。