Cesium加载倾斜摄影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>国家地理信息公共服务平台 天地图</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="./static/cesium/Cesium.js"></script>
    <script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
    <link rel="stylesheet" type="text/css" href="./static/cesium/Widgets/widgets.css" />
    <style>
        html, body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }

        #cesiumContainer .cesium-viewer-bottom{
            display: none;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <script>
        var token = '';
    // 服务域名
    var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
    // 服务负载子域
    var subdomains=['0','1','2','3','4','5','6','7'];

    // cesium 初始化
    var viewer = new Cesium.Map('cesiumContainer', {
        shouldAnimate: true,
        selectionIndicator:true,
        infoBox:false
    });
    
    // 抗锯齿
    viewer.scene.postProcessStages.fxaa.enabled=false;
    // 水雾特效
    viewer.scene.globe.showGroundAtmosphere = true;
    // 设置最大俯仰角,[-90,0]区间内,默认为-30,单位弧度
    viewer.scene.screenSpaceCameraController.constrainedPitch = Cesium.Math.toRadians(-20);
    // 取消默认的双击事件
    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

    // 叠加影像服务
    var imgMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new Cesium.WebMercatorTilingScheme(),
        maximumLevel : 18
    });
    viewer.imageryLayers.addImageryProvider(imgMap); 

    // 叠加国界服务
    var iboMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new Cesium.WebMercatorTilingScheme(),
        maximumLevel : 10
    });
    viewer.imageryLayers.addImageryProvider(iboMap);

    // 叠加地形服务
    var terrainUrls = new Array();
    
    for (var i = 0; i < subdomains.length; i++){
        var url = tdtUrl.replace('{s}', subdomains[i]) + 'DEM90M/DataServer?T=elv_c&tk=' + token;
        terrainUrls.push(url);
    }

    var provider = new Cesium.GeoTerrainProvider({
        urls: terrainUrls
    });

    viewer.terrainProvider = provider;
    
    // 将三维球定位到中国
    viewer.camera.flyTo({
       // destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        destination: Cesium.Cartesian3.fromDegrees(113.79891698, 34.790739139999999, 17850000),
        orientation: {
            heading :  Cesium.Math.toRadians(348.4202942851978),
            pitch : Cesium.Math.toRadians(-89.74026687972041),
            roll : Cesium.Math.toRadians(0)
        },
        complete:function callback() {
            // 定位完成之后的回调函数
            viewer.camera.flyTo({
                duration: 8,
                destination: Cesium.Cartesian3.fromDegrees(113.79891698, 34.790739139999999, 5000.0),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-90.0),
                    roll: Cesium.Math.toRadians(0.0)
                },
                complete: function callback() {
                    // 叠加倾斜模型
                    var tileset = viewer.scene.primitives.add(
                        new Cesium.Cesium3DTileset({
                            url: 'http://47.92.159.240:9025/oblique/build/dayanta/tileset.json',

                            maximumScreenSpaceError: 2,
                            maximumNumberOfLoadedTiles: 100000,

                        })
                    );
      
                    ////////////////////////////////////////////////////////////
                    //控制模型的位置
                    tileset.readyPromise.then(function (palaceTileset) {
                        //alert(1);
                        //添加到场景
                        viewer.scene.primitives.add(palaceTileset);
                        var longitude = 113.79891698; //模型需要改变的经度
                        var latitude = 34.790739139999999; //模型需要改变的纬度
                        //var heightOffset = 20.0; //模型需要改变的高度
                        var heightOffset = 0.0; //模型需要改变的高度

                        //获取3Dtlies的bounds范围
                        var boundingSphere = palaceTileset.boundingSphere;
                        //获取3Dtlies的范围中心点的弧度
                        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
                        //定义3Dtlies改变之后中心点的弧度
                        var offsetvalue = Cesium.Cartographic.fromDegrees(longitude, latitude, heightOffset)
                        //模型本身的位置
                        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
                        //模型改变的位置
                        var offset = Cesium.Cartesian3.fromRadians(offsetvalue.longitude, offsetvalue.latitude, heightOffset);

                        //定义模型的改变状态
                        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
                        //修改模型的位置
                        palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                        viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius *
                            1.0));
                        
                    });
                    /////////////////////////////////////////////////////////////

                }
            });
            //结束
        }
    });
    
    // 叠加三维地名服务
    var wtfs = new Cesium.GeoWTFS({
        viewer,
        //三维地名服务,使用wtfs服务
        subdomains:subdomains,
        metadata:{
            boundBox: {
                minX: -180,
                minY: -90,
                maxX: 180,
                maxY: 90
            },
            minLevel: 1,
            maxLevel: 20
        },
        aotuCollide: true, //是否开启避让
        collisionPadding: [5, 10, 8, 5], //开启避让时,标注碰撞增加内边距,上、右、下、左
        serverFirstStyle: true, //服务端样式优先
        labelGraphics: {
            font:"28px sans-serif",
            fontSize: 28,
            fillColor:Cesium.Color.WHITE,
            scale: 0.5,
            outlineColor:Cesium.Color.BLACK,
            outlineWidth: 5,
            style:Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground:false,
            backgroundColor:Cesium.Color.RED,
            backgroundPadding:new Cesium.Cartesian2(10, 10),
            horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,
            verticalOrigin:Cesium.VerticalOrigin.TOP,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset:new Cesium.Cartesian2(0, 8)
        },
        billboardGraphics: {
            horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
            verticalOrigin:Cesium.VerticalOrigin.CENTER,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset:Cesium.Cartesian2.ZERO,
            alignedAxis:Cesium.Cartesian3.ZERO,
            color:Cesium.Color.WHITE,
            rotation:0,
            scale:1,
            width:18,
            height:18
        }
    });
    
    //三维地名服务,使用wtfs服务
    wtfs.getTileUrl = function(){
        return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token; 
    }
    
    // 三维图标服务
    wtfs.getIcoUrl = function(){
        return tdtUrl + 'mapservice/GetIcon?id={id}&tk='+ token;
    }
    
        wtfs.initTDT([{ "x": 6, "y": 1, "level": 2, "boundBox": { "minX": 90, "minY": 0, "maxX": 135, "maxY": 45 } }, { "x": 7, "y": 1, "level": 2, "boundBox": { "minX": 135, "minY": 0, "maxX": 180, "maxY": 45 } }, { "x": 6, "y": 0, "level": 2, "boundBox": { "minX": 90, "minY": 45, "maxX": 135, "maxY": 90 } }, { "x": 7, "y": 0, "level": 2, "boundBox": { "minX": 135, "minY": 45, "maxX": 180, "maxY": 90 } }, { "x": 5, "y": 1, "level": 2, "boundBox": { "minX": 45, "minY": 0, "maxX": 90, "maxY": 45 } }, { "x": 4, "y": 1, "level": 2, "boundBox": { "minX": 0, "minY": 0, "maxX": 45, "maxY": 45 } }, { "x": 5, "y": 0, "level": 2, "boundBox": { "minX": 45, "minY": 45, "maxX": 90, "maxY": 90 } }, { "x": 4, "y": 0, "level": 2, "boundBox": { "minX": 0, "minY": 45, "maxX": 45, "maxY": 90 } }, { "x": 6, "y": 2, "level": 2, "boundBox": { "minX": 90, "minY": -45, "maxX": 135, "maxY": 0 } }, { "x": 6, "y": 3, "level": 2, "boundBox": { "minX": 90, "minY": -90, "maxX": 135, "maxY": -45 } }, { "x": 7, "y": 2, "level": 2, "boundBox": { "minX": 135, "minY": -45, "maxX": 180, "maxY": 0 } }, { "x": 5, "y": 2, "level": 2, "boundBox": { "minX": 45, "minY": -45, "maxX": 90, "maxY": 0 } }, { "x": 4, "y": 2, "level": 2, "boundBox": { "minX": 0, "minY": -45, "maxX": 45, "maxY": 0 } }, { "x": 3, "y": 1, "level": 2, "boundBox": { "minX": -45, "minY": 0, "maxX": 0, "maxY": 45 } }, { "x": 3, "y": 0, "level": 2, "boundBox": { "minX": -45, "minY": 45, "maxX": 0, "maxY": 90 } }, { "x": 2, "y": 0, "level": 2, "boundBox": { "minX": -90, "minY": 45, "maxX": -45, "maxY": 90 } }, { "x": 0, "y": 1, "level": 2, "boundBox": { "minX": -180, "minY": 0, "maxX": -135, "maxY": 45 } }, { "x": 1, "y": 0, "level": 2, "boundBox": { "minX": -135, "minY": 45, "maxX": -90, "maxY": 90 } }, { "x": 0, "y": 0, "level": 2, "boundBox": { "minX": -180, "minY": 45, "maxX": -135, "maxY": 90 } }]);

        function changeHeight(height) {
            height = Number(height);
            alert("我是changeHeight函数中的height:" + height);
            if (isNaN(height)) {
                return;
            }

            var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
            var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
            var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
            var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
            tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        }


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

 

posted @ 2021-05-14 11:58  DarJeely  阅读(1661)  评论(0编辑  收藏  举报