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)!
声明:转载请声明出处。