Cesium 的各种定位方法汇总——未完待续

Posted 2020-12-21 dog2016

/*
 * @Author: 苹果园dog
 * @Date: 2020-10-31 21:50:33
 * @LastEditTime: 2020-11-05 23:06:14
 * @LastEditors: Please set LastEditors
 * @Description: Cesium 的各种定位方法汇总，只列出项目中经常使用的，如果不够灵活，可直接调用Cesium官方API，也很方便。
 * Cesium的定位从效果上包含两种：直接定位、飞行定位。在方法封装上，本狗姑且将直接定位分类为zoomTo系列，飞行定位分类flyTo。
 * 定位的对象上包括：坐标点、矩形范围、entities、3dtiles、gltf、kml、geojson、影像、地形、geometry 
 * Cesium的定位主要是使用Camera对象和Viewer对象，Viewer的定位zoomTo,flyTo等方法是较高级别的函数，可以定位到Entity、3dtiles、DataSource等添加到三维球上显示的实体，
 * Viewer的定位方法内部都是调用Camera的相关定位方法，针对不同的定位对象，通过一些列计算得出传入实体的合适定位范围，然后定位，使用起来很方便。
 * Camera的flyTo、flyToBoundingSphere、lookat、setView等方法是较低级别函数，通过定位坐标和角度参数的传入，精细化控制定位视角，灵活，后续本狗再专门写一篇Camera。
 * @FilePath: webcesiumScesiumcesiummytest朝花夕拾定位cesiumLocateUtil.js
 */
var cesiumLocateUtil = {
    zoomTo: {

    },
    flyTo: {
        /**
         * @description: 飞行定位到一个笛卡尔空间直角坐标点位置
         * @param {Cartesian3} destination 目标点 Cartesian3
         * @param {Number} heading  默认=0.0   偏航角 正北,由正北向东偏向为正
         * @param {*} pitch  =-90     俯仰角 垂直向下， ENU局部坐标系中XY平面的旋转角度，平面下为负，上为正，
         * @param {*} range    =0.0   距目标点距离
         * @param {*} duration =3   持续时间
         * @param {*} callBack =null   回调函数，定位完成后执行
         */
        flyToPoint: function (destination, heading = 0.0, pitch = -90, range = 0.0, duration = 3, callBack = null) {
            if (!viewer) {
                console.log(‘三维球未初始化！‘);
                return;
            }
            if (!destination) {
                console.log(‘定位目标点不对！‘);
                return;
            }
            var boundingSphere = new Cesium.BoundingSphere(destination, 0.0);
            viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: duration,
                maximumHeight: undefined,
                complete: function () {
                    if (callBack) {
                        callBack();
                    }else{
                        console.log(‘定位失败！‘);
                    }
                },
                cancel: function () {
                    console.log(‘定位取消！‘);
                },
                offset: {
                    heading: Cesium.Math.toRadians(heading),
                    pitch: Cesium.Math.toRadians(pitch),
                    range: range
                },
            });

        },

        /**
         * @description: 飞行定位到一个矩形
         * @param {Array.<Cartesian3>} cartesians 笛卡尔坐标数组 Array.<Cartesian3>
         * @param {Number} heading  =0.0   偏航角 正北,由正北向东偏向为正
         * @param {*} pitch  =-90     俯仰角  =-90 ENU局部坐标系，XY平面的旋转角度，平面下为负，上为正，
         * @param {*} scale    =1.0   范围缩放倍率
         * @param {*} duration =3   持续时间
         * @param {*} callBack =null   回调函数，定位完成后执行
         * @return {*}
         */
        flyToRectangle: function (cartesians, heading = 0.0, pitch = -90, scale = 1.0, duration = 3, callBack = null) { 
            if (!viewer) {
                console.log(‘三维球未初始化！‘);
                return;
            }
            if (!Array.isArray(cartesians)) {
                console.log(‘定位范围不对！‘);
                return;
            }         
            if(scale<0.1){
                scale=1.0;
            }  
            var rec = Cesium.Rectangle.fromCartesianArray(cartesians);
            var boundingSphere = Cesium.BoundingSphere.fromRectangle3D(rec);
            boundingSphere.radius=boundingSphere.radius*scale;
            viewer.camera.flyToBoundingSphere(boundingSphere, {
                duration: duration,
                maximumHeight: undefined,
                complete: function () {
                    if (callBack) {
                        callBack();
                    }else{
                        console.log(‘定位失败！‘);
                    }
                },
                cancel: function () {
                    console.log(‘定位取消！‘);
                },
                offset: {
                    heading: Cesium.Math.toRadians(heading),
                    pitch: Cesium.Math.toRadians(pitch),
                    range: 0.0
                }
            });
        },

        flyToEntity(entity,){

        }
    }

}

测试

<!--
 * @Author: 苹果园dog
 * @Date: 2020-10-31 21:48:16
 * @LastEditTime: 2020-11-02 22:48:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: webcesiumScesiumcesiummytest朝花夕拾定位定位.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朝花夕拾——定位</title>
    <script src="../../../Build/CesiumUnminified/Cesium.js"></script>
    <script src="../../cesiumCommon.js"></script>
    <script src="../../cesiumUtil.js"></script>
    <script src="../../jquery.min.js"></script>
    <script src="../../cesiumCoordUtil.js"></script>
    <script src="../../cesium3dTilesUtil.js"></script>
    <script src="./cesiumLocateUtil.js"></script>
    <style>
        @import url(../../../Build/CesiumUnminified/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #trailer {
            position: absolute;
            bottom: 75px;
            right: 0;
            width: 320px;
            height: 180px;
        }

        #testtool {
            position: absolute;
            top: 75px;
            left: 100px;
        }

        button {
            margin-right: 30px;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay">
        <h1>Loading...</h1>
    </div>
    <div id="testtool" style="background: gray;">

        <button onclick="flyToPoint()"> flyToPoint </button>

        <button onclick="flyToRectangle()"> flyToRectangle </button>
    </div>

    <script>

        var viewer = init3D("cesiumContainer");
        var scene = viewer.scene;
        var center = Cesium.Cartesian3.fromDegrees(116, 39, 0);
        var center2 = Cesium.Cartesian3.fromDegrees(116.5, 39.3, 0);
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
        var referenceFramePrimitive = scene.primitives.add(
            new Cesium.DebugModelMatrixPrimitive({
                modelMatrix: transform,
                length: 100000.0,
            })
        );

        function flyToPoint() {
            removeAll();
            cesiumLocateUtil.flyTo.flyToPoint(center, 30, -45, 5000, 3, function () {
                alert(‘定位成功!‘);
            })
        }

        function flyToRectangle() {
            removeAll();
            var redRectangle = viewer.entities.add({
                name: "Red translucent rectangle",
                rectangle: {
                    coordinates: Cesium.Rectangle.fromCartesianArray([center, center2]),
                    material: Cesium.Color.RED.withAlpha(0.5),
                },
            });
            cesiumLocateUtil.flyTo.flyToRectangle([center, center2], 0, -45, 3, 2, function () {
                alert(‘定位成功!‘);
            })
        }

        function removeAll(){
            viewer.entities.removeAll();
        }

        

    </script>
</body>

</html>