mirror of
				https://github.com/jiawanlong/Cesium-Examples.git
				synced 2025-11-04 09:14:17 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			332 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			332 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
var latlng = {};
 | 
						||
/**
 | 
						||
 * 获取鼠标当前的屏幕坐标位置的三维Cesium坐标
 | 
						||
 * @param {Cesium.Scene} scene 
 | 
						||
 * @param {Cesium.Cartesian2} position 二维屏幕坐标位置
 | 
						||
 * @param {Cesium.Entity} noPickEntity 排除的对象(主要用于绘制中,排除对自己本身的拾取)
 | 
						||
 */
 | 
						||
latlng.getCurrentMousePosition = function (scene, position, noPickEntity) {
 | 
						||
    var cartesian;
 | 
						||
 | 
						||
    //在模型上提取坐标  
 | 
						||
    var pickedObject = scene.pick(position);
 | 
						||
    if (scene.pickPositionSupported && Cesium.defined(pickedObject)) { //pickPositionSupported :判断是否支持深度拾取,不支持时无法进行鼠标交互绘制
 | 
						||
        var entity = pickedObject.id;
 | 
						||
        if (noPickEntity == null || (noPickEntity && entity !== noPickEntity)) {
 | 
						||
            var cartesian = scene.pickPosition(position);
 | 
						||
            if (Cesium.defined(cartesian)) {
 | 
						||
                var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
 | 
						||
                var height = cartographic.height; //模型高度
 | 
						||
                if (height >= 0) return cartesian;
 | 
						||
 | 
						||
                //不是entity时,支持3dtiles地下
 | 
						||
                if (!Cesium.defined(pickedObject.id) && height >= -500)
 | 
						||
                    return cartesian;
 | 
						||
            }
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    //测试scene.pickPosition和globe.pick的适用场景 https://zhuanlan.zhihu.com/p/44767866
 | 
						||
    //1. globe.pick的结果相对稳定准确,不论地形深度检测开启与否,不论加载的是默认地形还是别的地形数据;
 | 
						||
    //2. scene.pickPosition只有在开启地形深度检测,且不使用默认地形时是准确的。
 | 
						||
    //注意点: 1. globe.pick只能求交地形; 2. scene.pickPosition不仅可以求交地形,还可以求交除地形以外其他所有写深度的物体。
 | 
						||
 | 
						||
    //提取鼠标点的地理坐标 
 | 
						||
    if (scene.mode === Cesium.SceneMode.SCENE3D) {
 | 
						||
        //三维模式下
 | 
						||
        var pickRay = scene.camera.getPickRay(position);
 | 
						||
        cartesian = scene.globe.pick(pickRay, scene);
 | 
						||
    } else {
 | 
						||
        //二维模式下
 | 
						||
        cartesian = scene.camera.pickEllipsoid(position, scene.globe.ellipsoid);
 | 
						||
    }
 | 
						||
    return cartesian;
 | 
						||
}
 | 
						||
 | 
						||
/**
 | 
						||
 * 提取地球中心点坐标
 | 
						||
 * @param {Cesium.Viewer} viewer 
 | 
						||
 * */
 | 
						||
latlng.getCenter = function (viewer) {
 | 
						||
    var scene = viewer.scene;
 | 
						||
    var target = pickCenterPoint(scene);
 | 
						||
    var bestTarget = target;
 | 
						||
    if (!bestTarget) {
 | 
						||
        var globe = scene.globe;
 | 
						||
        var carto = scene.camera.positionCartographic.clone();
 | 
						||
        var height = globe.getHeight(carto);
 | 
						||
        carto.height = height || 0;
 | 
						||
        bestTarget = Cesium.Ellipsoid.WGS84.cartographicToCartesian(carto);
 | 
						||
    }
 | 
						||
 | 
						||
    var result = latlng.formatPositon(bestTarget);
 | 
						||
 | 
						||
    // 获取地球中心点世界位置  与  摄像机的世界位置  之间的距离
 | 
						||
    var distance = Cesium.Cartesian3.distance(bestTarget, viewer.scene.camera.positionWC);
 | 
						||
    result.cameraZ = distance;
 | 
						||
 | 
						||
    return result;
 | 
						||
}
 | 
						||
 | 
						||
function pickCenterPoint(scene) {
 | 
						||
    var canvas = scene.canvas;
 | 
						||
    var center = new Cesium.Cartesian2(
 | 
						||
        canvas.clientWidth / 2,
 | 
						||
        canvas.clientHeight / 2);
 | 
						||
 | 
						||
    var ray = scene.camera.getPickRay(center);
 | 
						||
    var target = scene.globe.pick(ray, scene);
 | 
						||
    return target || scene.camera.pickEllipsoid(center);
 | 
						||
}
 | 
						||
 | 
						||
/**
 | 
						||
 * 提取地球视域边界
 | 
						||
 * @param {Cesium.Viewer} viewer 
 | 
						||
 * */
 | 
						||
latlng.getExtent = function (viewer) {
 | 
						||
    // 范围对象
 | 
						||
    var extent = {
 | 
						||
        xmin: 70,
 | 
						||
        xmax: 140,
 | 
						||
        ymin: 0,
 | 
						||
        ymax: 55
 | 
						||
    }; //默认值:中国区域
 | 
						||
 | 
						||
    // 得到当前三维场景
 | 
						||
    var scene = viewer.scene;
 | 
						||
 | 
						||
    // 得到当前三维场景的椭球体
 | 
						||
    var ellipsoid = scene.globe.ellipsoid;
 | 
						||
    var canvas = scene.canvas;
 | 
						||
 | 
						||
    // canvas左上角
 | 
						||
    var car3_lt = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), ellipsoid);
 | 
						||
    if (car3_lt) { // 在椭球体上
 | 
						||
        var carto_lt = ellipsoid.cartesianToCartographic(car3_lt);
 | 
						||
        extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude);
 | 
						||
        extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude);
 | 
						||
    } else { // 不在椭球体上 
 | 
						||
        var xMax = canvas.width / 2;
 | 
						||
        var yMax = canvas.height / 2;
 | 
						||
 | 
						||
        var car3_lt2;
 | 
						||
        // 这里每次10像素递加,一是10像素相差不大,二是为了提高程序运行效率
 | 
						||
        for (var yIdx = 0; yIdx <= yMax; yIdx += 10) {
 | 
						||
            var xIdx = yIdx <= xMax ? yIdx : xMax;
 | 
						||
            car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(xIdx, yIdx), ellipsoid);
 | 
						||
            if (car3_lt2) break;
 | 
						||
        }
 | 
						||
        if (car3_lt2) {
 | 
						||
            var carto_lt = ellipsoid.cartesianToCartographic(car3_lt2);
 | 
						||
            extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude);
 | 
						||
            extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude);
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    // canvas右下角
 | 
						||
    var car3_rb = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid);
 | 
						||
    if (car3_rb) { // 在椭球体上
 | 
						||
        var carto_rb = ellipsoid.cartesianToCartographic(car3_rb);
 | 
						||
        extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude);
 | 
						||
        extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude);
 | 
						||
    } else { // 不在椭球体上
 | 
						||
        var xMax = canvas.width / 2;
 | 
						||
        var yMax = canvas.height / 2;
 | 
						||
 | 
						||
        var car3_rb2;
 | 
						||
        // 这里每次10像素递减,一是10像素相差不大,二是为了提高程序运行效率
 | 
						||
        for (var yIdx = canvas.height; yIdx >= yMax; yIdx -= 10) {
 | 
						||
            var xIdx = yIdx >= xMax ? yIdx : xMax;
 | 
						||
            car3_rb2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(xIdx, yIdx), ellipsoid);
 | 
						||
            if (car3_rb2) break;
 | 
						||
        }
 | 
						||
        if (car3_rb2) {
 | 
						||
            var carto_rb = ellipsoid.cartesianToCartographic(car3_rb2);
 | 
						||
            extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude);
 | 
						||
            extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude);
 | 
						||
        }
 | 
						||
    }
 | 
						||
 | 
						||
    //交换
 | 
						||
    if (extent.xmax < extent.xmin) {
 | 
						||
        var temp = extent.xmax;
 | 
						||
        extent.xmax = extent.xmin;
 | 
						||
        extent.xmin = temp;
 | 
						||
    }
 | 
						||
    if (extent.ymax < extent.ymin) {
 | 
						||
        var temp = extent.ymax;
 | 
						||
        extent.ymax = extent.ymin;
 | 
						||
        extent.ymin = temp;
 | 
						||
    }
 | 
						||
 | 
						||
 | 
						||
    return extent;
 | 
						||
}
 | 
						||
/**
 | 
						||
 * 提取视域边界
 | 
						||
 * @param {Cesium.Viewer} viewer 
 | 
						||
 * 
 | 
						||
 * */
 | 
						||
latlng.getViewBounds = function (viewer) {
 | 
						||
    var rectangle = viewer.camera.computeViewRectangle();
 | 
						||
    // 弧度转为经纬度,west为左(西)侧边界的经度,以下类推
 | 
						||
    var west = rectangle.west / Math.PI * 180;
 | 
						||
    var north = rectangle.north / Math.PI * 180;
 | 
						||
    var east = rectangle.east / Math.PI * 180;
 | 
						||
    var south = rectangle.south / Math.PI * 180;
 | 
						||
    // 鉴于高德、leaflet获取的边界都是southwest和northeast字段来表示,本例保持一致性
 | 
						||
    var bounds = {
 | 
						||
        southwest: {
 | 
						||
            lng: west,
 | 
						||
            lat: south
 | 
						||
        },
 | 
						||
        northeast: {
 | 
						||
            lng: east,
 | 
						||
            lat: north
 | 
						||
        }
 | 
						||
    }
 | 
						||
    return bounds;
 | 
						||
}
 | 
						||
 | 
						||
/**
 | 
						||
 * 提取相机视角范围参数
 | 
						||
 * @param {Cesium.Viewer} viewer 
 | 
						||
 * 
 | 
						||
 * */
 | 
						||
latlng.getCameraView = function (viewer) {
 | 
						||
    var camera = viewer.camera;
 | 
						||
    var position = camera.positionCartographic;
 | 
						||
 | 
						||
    var bookmark = {};
 | 
						||
    bookmark.y = Number(Cesium.Math.toDegrees(position.latitude).toFixed(6));
 | 
						||
    bookmark.x = Number(Cesium.Math.toDegrees(position.longitude).toFixed(6));
 | 
						||
    bookmark.z = Number(position.height.toFixed(1));
 | 
						||
    bookmark.heading = Number(Cesium.Math.toDegrees(camera.heading || -90).toFixed(1));
 | 
						||
    bookmark.pitch = Number(Cesium.Math.toDegrees(camera.pitch || 0).toFixed(1));
 | 
						||
    bookmark.roll = Number(Cesium.Math.toDegrees(camera.roll || 0).toFixed(1));
 | 
						||
 | 
						||
    return bookmark;
 | 
						||
}
 | 
						||
 | 
						||
 | 
						||
/**
 | 
						||
 * 格式化坐标点为可显示的可理解格式(如:经度x:123.345345、纬度y:31.324324、高度z:123.1)。
 | 
						||
 * @param {Cesium.Cartesian3} position 
 | 
						||
 * */
 | 
						||
latlng.formatPositon = function (position) {
 | 
						||
    var carto = Cesium.Cartographic.fromCartesian(position);
 | 
						||
    var result = {};
 | 
						||
    result.y = Number(Cesium.Math.toDegrees(carto.latitude).toFixed(6));
 | 
						||
    result.x = Number(Cesium.Math.toDegrees(carto.longitude).toFixed(6));
 | 
						||
    result.z = Number(carto.height.toFixed(1));
 | 
						||
    return result;
 | 
						||
};
 | 
						||
 | 
						||
//笛卡尔转经纬度/弧度
 | 
						||
latlng.Cartesian3To = function (cartesian3, viewer) {
 | 
						||
    if (cartesian3) {
 | 
						||
        if (viewer) {
 | 
						||
            var ellipsoid = viewer.scene.globe.ellipsoid;
 | 
						||
            var cartographic;
 | 
						||
            //转弧度
 | 
						||
            cartographic = ellipsoid.cartesianToCartographic(cartesian3);
 | 
						||
        } else {
 | 
						||
            cartographic = Cesium.Cartographic.fromCartesian(cartesian3);
 | 
						||
        }
 | 
						||
        //转经纬度
 | 
						||
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
 | 
						||
        var lng = Cesium.Math.toDegrees(cartographic.longitude);
 | 
						||
        var height = cartographic.height;
 | 
						||
        return {
 | 
						||
            cartesian3: cartesian3,
 | 
						||
            cartographic: cartographic,
 | 
						||
            latlng: {
 | 
						||
                lat: lat,
 | 
						||
                lng: lng,
 | 
						||
                height: height
 | 
						||
            }
 | 
						||
        };
 | 
						||
    }
 | 
						||
}
 | 
						||
//绕点 环绕飞行
 | 
						||
latlng.windingPoint = {
 | 
						||
    isStart: false,
 | 
						||
    viewer: null,
 | 
						||
    start: function (viewer, point) {
 | 
						||
        if (!point)
 | 
						||
            point = getCenter(viewer);
 | 
						||
 | 
						||
        this.viewer = viewer;
 | 
						||
        this.position = Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z);
 | 
						||
 | 
						||
        this.distance = point.distance || Cesium.Cartesian3.distance(this.position, viewer.camera.positionWC); // 给定相机距离点多少距离飞行 
 | 
						||
        this.angle = 360 / (point.time || 60); //time:给定飞行一周所需时间(单位 秒)
 | 
						||
 | 
						||
        this.time = viewer.clock.currentTime.clone();
 | 
						||
        this.heading = viewer.camera.heading; // 相机的当前heading
 | 
						||
        this.pitch = viewer.camera.pitch;
 | 
						||
 | 
						||
        this.viewer.clock.onTick.addEventListener(this.clock_onTickHandler, this);
 | 
						||
        this.isStart = true;
 | 
						||
    },
 | 
						||
    clock_onTickHandler: function (e) {
 | 
						||
        var delTime = Cesium.JulianDate.secondsDifference(this.viewer.clock.currentTime, this.time); // 当前已经过去的时间,单位 秒
 | 
						||
        var heading = Cesium.Math.toRadians(delTime * this.angle) + this.heading;
 | 
						||
 | 
						||
        this.viewer.scene.camera.setView({
 | 
						||
            destination: this.position, // 点的坐标
 | 
						||
            orientation: {
 | 
						||
                heading: heading,
 | 
						||
                pitch: this.pitch,
 | 
						||
            }
 | 
						||
        });
 | 
						||
        this.viewer.scene.camera.moveBackward(this.distance);
 | 
						||
    },
 | 
						||
    stop: function () {
 | 
						||
        if (!this.isStart) return;
 | 
						||
 | 
						||
        if (this.viewer)
 | 
						||
            this.viewer.clock.onTick.removeEventListener(this.clock_onTickHandler, this);
 | 
						||
        this.isStart = false;
 | 
						||
    }
 | 
						||
};
 | 
						||
 | 
						||
//固定点 向四周旋转
 | 
						||
latlng.aroundPoint = {
 | 
						||
    isStart: false,
 | 
						||
    viewer: null,
 | 
						||
    start: function (viewer, point) {
 | 
						||
        if (!point)
 | 
						||
            point = getCenter(viewer);
 | 
						||
 | 
						||
        this.viewer = viewer;
 | 
						||
        this.position = Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z);
 | 
						||
 | 
						||
        this.angle = 360 / (point.time || 60); //time:给定飞行一周所需时间(单位 秒)
 | 
						||
 | 
						||
        this.time = viewer.clock.currentTime.clone();
 | 
						||
        this.heading = viewer.camera.heading; // 相机的当前heading
 | 
						||
        this.pitch = viewer.camera.pitch;
 | 
						||
 | 
						||
        this.viewer.clock.onTick.addEventListener(this.clock_onTickHandler, this);
 | 
						||
        this.isStart = true;
 | 
						||
    },
 | 
						||
    clock_onTickHandler: function (e) {
 | 
						||
        // 当前已经过去的时间,单位s
 | 
						||
        var delTime = Cesium.JulianDate.secondsDifference(this.viewer.clock.currentTime, this.time);
 | 
						||
        var heading = Cesium.Math.toRadians(delTime * this.angle) + this.heading;
 | 
						||
        viewer.scene.camera.setView({
 | 
						||
            orientation: {
 | 
						||
                heading: heading,
 | 
						||
                pitch: this.pitch,
 | 
						||
            }
 | 
						||
        });
 | 
						||
    },
 | 
						||
    stop: function () {
 | 
						||
        if (!this.isStart) return;
 | 
						||
 | 
						||
        if (this.viewer)
 | 
						||
            this.viewer.clock.onTick.removeEventListener(this.clock_onTickHandler, this);
 | 
						||
        this.isStart = false;
 | 
						||
    }
 | 
						||
}; |