cesium默认底图不显示
// 不显示底图
viewer.imageryLayers.get(0).show = false;
去除cesiumlogo
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = "none";
//viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
cesium设置相机视觉位置
cesium原始的初始视角和相机位置是固定的,但在实际应用的时候,需要将相机设置到自己研究区域的合适位置上,需要先在浏览器中将cesium视角调至合适位置,再在控制台中查看当前相机的信息,使用代码设置即可。
查看位置
在浏览器中按F12,在控制台中依次输入查看代码,即可查看位置。
// 输入代码为:
viewer.camera.position
viewer.camera.heading
viewer.camera.pitch
viewer.camera.roll
帧率显示
// 显示帧率
viewer.scene.debugShowFramesPerSecond = true;
获取当前屏幕中心点坐标
调用传入viewer
// 获取地图中心点
this.getCenterPosition(viewer)
// 获取当前地图中心的经纬度
getCenterPosition(viewer) {
let centerResult = viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(
viewer.canvas.clientWidth / 2,
viewer.canvas.clientHeight / 2,
),
)
let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult);
let curLongitude = (curPosition.longitude * 180) / Math.PI;
let curLatitude = (curPosition.latitude * 180) / Math.PI;
console.log(370, curLongitude, curLatitude);
return {
lon: curLongitude,
lat: curLatitude,
}
},
抓取当前经纬度坐标并加点
// 调用 抓取当前经纬度坐标
this.getClickPointAdd(viewer);
//======================================
// 抓取当前经纬度坐标
/**
* @description: 获取当前鼠标点击位置坐标,并添加到图上显示
* @param {*} _viewer
* @return {*}
*/
getClickPointAdd(_viewer) {
// 注册屏幕点击事件
let handler = new Cesium.ScreenSpaceEventHandler(_viewer.scene.canvas);
handler.setInputAction(function (event) {
// 转换为不包含地形的笛卡尔坐标
let clickPosition = _viewer.scene.camera.pickEllipsoid(event.position);
// 转经纬度(弧度)坐标
let radiansPos = Cesium.Cartographic.fromCartesian(clickPosition);
// 转角度
console.log("经度:" + Cesium.Math.toDegrees(radiansPos.longitude) + ", 纬度:" + Cesium.Math.toDegrees(radiansPos.latitude));
// 添加点
_viewer.entities.add({
position: clickPosition,
point: {
color: Cesium.Color.YELLOW,
pixelSize: 30
}
})
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
cesium实现三维空间量测功能
地址教程:blog.csdn.net/weixin_4578…
cesium实现鹰眼地图(三维)效果
地址教程:blog.csdn.net/weixin_4578…
cesium实现鹰眼地图(三维)与主图联动效果
地址教程:blog.csdn.net/weixin_4578…
cesium实现鹰眼地图(二维)
地址教程:blog.csdn.net/weixin_4578…