cesium-study
/
64.定位相关功能_lookAt-不能移动.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <div id='tool' style="float:left;position:absolute;left:10px;top:10px;"></div>
    <script src='./js/baiduMap.js'> </script>
    <script src='./js/CreateTestBtn.js'> </script>
    <script>
        var imageryProvider = new BaiduImageryProvider({
            url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
        });
        //创建一个基本地球
        let viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: imageryProvider,
            animation: false, //动画控制，默认true （图中1）
            baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true  （图中6）
            fullscreenButton: true,//全屏按钮,默认显示true  （图中4）
            geocoder: false,//地名查找,默认true  （图中9）
            // timeline: false,//时间线,默认true  （图中3）
            vrButton: false,//双屏模式,默认不显示false
            homeButton: true,//主页按钮，默认true  （图中8）
            infoBox: false,//点击要素之后显示的信息,默认true
            selectionIndicator: true,//选中元素显示,默认true
            shadows: true,
        });
        viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印

        viewer.scene.debugShowFramesPerSecond = true;//开启帧数
        //viewer.scene.globe.enableLighting = true;


        var shadowMap = viewer.shadowMap;
        shadowMap.softShadows = true;
        shadowMap.maximumDistance = 350.0;
        shadowMap.size = 8192;


        //添加数据

        //添加文字
        viewer.entities.add({
            name: '文字',
            position: Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571),
            label: {
                text: '看这里',
                font: '19px Helvetica',
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                fillColor: Cesium.Color.AZURE,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 3,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
            }
        });


        viewer.camera.moveStart.addEventListener(function () { console.log("相机移动了") });


        /////


        ///
        // viewer.camera.changed.addEventListener(function () { console.log(viewer.camera.directionWC) });
        CreateTestBtn("定位元素1", () => {
            // 1. Using a cartesian offset
            var center = Cesium.Cartesian3.fromDegrees(-98.0, 40.0);
            viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));


        });
        CreateTestBtn("定位元素11", () => {
            // 1. Using a cartesian offset
            var center = Cesium.Cartesian3.fromDegrees(-98.0, 42.0);
            viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));


        });
        CreateTestBtn("定位元素111", () => {
            // 1. Using a cartesian offset
            var center = Cesium.Cartesian3.fromDegrees(-98.0, 42.0);
            viewer.camera.lookAt(center, new Cesium.Cartesian3(0.0, -100.0, 100.0));


        });
        CreateTestBtn("定位元素2", () => {
            // 2. Using a HeadingPitchRange offset
            var center = Cesium.Cartesian3.fromDegrees(-72.0, 40.0);
            var heading = Cesium.Math.toRadians(50.0);
            var pitch = Cesium.Math.toRadians(-20.0);
            var range = 5000.0;
            viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
        });

        CreateTestBtn("定位元素22", () => {
            // 2. Using a HeadingPitchRange offset
            var center = Cesium.Cartesian3.fromDegrees(-72.0, 42.0);
            var heading = Cesium.Math.toRadians(50.0);
            var pitch = Cesium.Math.toRadians(-20.0);
            var range = 5000.0;
            viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));


            camera.lookAtTransform(Matrix4.IDENTITY);//解决一些诡异的问题：https://blog.csdn.net/weitaming1/article/details/93512713
            //又要用到camera.flyTo相机会跳到很高的视角然后在定位，而不是平滑的进入，解决方案
        });


        CreateTestBtn("定位元素3—flyToBoundingSphere", () => {
            var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), 1870);

            viewer.camera.flyToBoundingSphere(boundingSphere, { duration: 2 });
        });


        CreateTestBtn("官网上的一个好办法-未测试", () => {
            var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
            var heading = Cesium.Math.toRadians(230.0);
            var pitch = Cesium.Math.toRadians(-20.0);
            camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));
        });
        alert("实lookAt之后，相机不能发平移了");


    </script>


</body>

</html>