zoukankan      html  css  js  c++  java
  • Cesium 天地图 倾斜摄影 模型矩阵

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <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="../sanwei/static/cesium/Cesium.js"></script>
        <script src="https://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js"></script>
        <script src="src/dat.gui.min.js"></script>
        <script src="src/cesium-transform.js"></script>
        <link href="../sanwei/static/cesium/Widgets/widgets.css" rel="stylesheet" />
    
        <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: true
            });
    
            // 抗锯齿
            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;
    
            var titleurl = "http://36.133.46.163:8081/production/tileset.json";
            // 将三维球定位到中国
            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',
                                  
                                    url: titleurl,
                                    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));
    
                            });
                            /////////////////////////////////////////////////////////////
    
                        }
                    });
                    //结束
                }
            });
    
    
            // 基础参数
            let tileModelParam = {
                url: titleurl,
                scale: 1.0,
                //longitude: 116.29393709916772,
                //latitude: 39.935457593075405,
                longitude: 113.79891698,
                latitude: 34.790739139999999,
                height: 0.0,
                rx: 0,
                ry: 0,
                rz: 0,
                alphaEnble: false,
                alpha: 1.0
            }
            // 调用调整面板
            TilesetMatrixPanel(viewer, { tileModelParam: tileModelParam })
            // 叠加三维地名服务
            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,
                     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 } }]);
    
      
    
    
        </script>
    </body>
    
    </html>
  • 相关阅读:
    改变Chrome浏览器主程序_缓存_个人信息路径
    谷歌 不支持 activeX插件
    计算机基础,Python基础--变量以及简单的循环
    Python之格式化输出,初始编码以及运算符
    Python基础数据类型之列表和元组
    Python基础数据类型之int、bool、str
    Python基础数据类型之字典
    Python基础数据类型之集合以及其他和深浅copy
    Python之编码
    Python之函数基础
  • 原文地址:https://www.cnblogs.com/Jeely/p/14768022.html
Copyright © 2011-2022 走看看