master

分支 (1)

管理

管理

master

cesium-study
/
40.测试直接引用源码.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 type='module' src="../cesiumsource/Source/Cesium.js"></script>
    <!--<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>
    <script>

        //创建一个基本地球
        let viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: 'http://t0.tianditu.gov.cn/img\_w/wmts?tk=0702d09e30dca11ed07ba4cec6d6bdac',
                layer: 'img',
                style: 'default',
                tileMatrixSetID: 'w',
                format: 'tiles',
                maximumLevel: 18
            }),
            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 = 300.0;


        //添加数据

        //添加文字
        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, //垂直方向以底部来计算标签的位置
            }
        });

        //添加3dtiles

        //const local_translation = new Cesium.Cartesian3(0.0, 0.0, 0.0); // 向模型中心为原点，正北为y，正东为x，地心朝上为z分别平移 310、-140、10米
        //const local_translation = Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 0);
        //let hpRoll = new Cesium.HeadingPitchRoll(0, 90, 0);//这个里面可以修改自身的角度，可以传入h、p、r值
        //let fixedFrameTransforms = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');

        var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
            //  url: '测试辅助文件/Lab导出环氧乙烷/tileset.json', //数据路径
            //url: '测试辅助文件/张单单大厦/tileset.json', //数据路径
            // url: '测试辅助文件/eo/tileset.json', //数据路径
            // url: '测试辅助文件/eo/tileset.json', //数据路径
            url: '测试辅助文件/催化重整-顶点压缩/tileset.json', //数据路径
            //  url: '测试辅助文件/催化重整/催化重整.json', //数据路径
            maximumScreenSpaceError: 22, //最大的屏幕空间误差，数值越小，显示越精细
            maximumNumberOfLoadedTiles: 1500, //最大加载瓦片个数

            //minimumPixelSize: 500,
        }));

        tileset.readyPromise.then(function (model) {

            ////方法1，有问题，旋转的中心点不对

            // var m = tileset.modelMatrix;
            //RotateX为旋转角度，转为弧度再参与运算
            // var m1 = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(0.01));

            //矩阵计算
            // tileset.modelMatrix = Cesium.Matrix4.multiplyByMatrix3(m, m1, new Cesium.Matrix4());

            //赋值
            // tileset.modelMatrix = m;


            ////方法2
            var params = {
                tx: 116.3904715,  //模型中心X轴坐标（经度，单位：十进制度）
                ty: 39.90571,    //模型中心Y轴坐标（纬度，单位：十进制度）
                tz: 20,    //模型中心Z轴坐标（高度，单位：米）
                rx: -90,    //X轴（经度）方向旋转角度（单位：度）圆心应该是在地心，改动其中一个值的时候，不止变化了该变量，比如改动ry，模型的高度也有了显著上升
                ry: 0,    //Y轴（纬度）方向旋转角度（单位：度）
                rz: 0      //Z轴（高程）方向旋转角度（单位：度）
            };
            //旋转
            var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
            var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
            var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
            var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
            var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
            var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
            //平移
            var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);

            var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            //旋转、平移矩阵相乘
            Cesium.Matrix4.multiply(m, rotationX, m);
            Cesium.Matrix4.multiply(m, rotationY, m);
            Cesium.Matrix4.multiply(m, rotationZ, m);
            //赋值给tileset
            tileset._root.transform = m;


        });


        var boundingSphere = new Cesium.BoundingSphere(Cesium.Cartesian3.fromDegrees(116.3904715, 39.90571, 10), 18.7);

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


        viewer.scene.postProcessStages.fxaa.enabled = true;
        alert("貌似不行，还在学习中");
        //下面修改时间

        //viewer.animation.viewModel.dateFormatter = this.DateTimeFormatter
        //viewer.animation.viewModel.timeFormatter = this.TimeFormatter
        //viewer.timeline.makeLabel = this.DateTimeFormatter

        //function DateTimeFormatter(datetime, viewModel, ignoredate) {
        //    var julianDT = new Cesium.JulianDate()
        //    Cesium.JulianDate.addHours(datetime, 8, julianDT)
        //    var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT)
        //    var objDT
        //    if (ignoredate)
        //        objDT = ''
        //    else {
        //        objDT = new Date(gregorianDT.year, gregorianDT.month - 1, gregorianDT.day)
        //        objDT = gregorianDT.year + '年' + objDT.toLocaleString('zh-cn', { month: 'short' }) + gregorianDT.day + '日'
        //        if (viewModel || gregorianDT.hour + gregorianDT.minute === 0)
        //            return objDT
        //        objDT += ' '
        //    }
        //    return objDT + Cesium.sprintf('%02d:%02d:%02d', gregorianDT.hour, gregorianDT.minute, gregorianDT.second)
        //}

        //function TimeFormatter(time, viewModel) {
        //    return this.DateTimeFormatter(time, viewModel, true)
        //}
        var utc = Cesium.JulianDate.fromDate(new Date("2019/10/04 12:30:00"));//UTC
            //viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 8, new Cesium.JulianDate());//北京时间=UTC+8=GMT+8

    </script>
</body>
</html>