skyversation-public
/
web_show_function_ui_mars3d


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>长春倾斜摄影</title>

    <link rel="stylesheet" href="../lib/Cesium/Widgets/widgets.css">
    <script type="text/javascript" src="../lib/Cesium/Cesium.js"></script>

    <style>
        html,
        body {
            margin: 0 0;
            padding: 0 0;
            width: 100%;
            height: 100%;
        }

        #cesiumContainer {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
</body>

<script>

    let viewer = new Cesium.Viewer("cesiumContainer", {
        // useDefaultRenderLoop: false,  //关闭自动渲染
        animation: false, //动画控制不显示
        timeline: false, //时间线不显示
        fullscreenButton: false, //全屏按钮不显示
        infoBox: false,
        baseLayerPicker: false, //地图切换不显示
        // terrainProvider: Cesium.createWorldTerrain(), // 地形
        imageryProvider: new Cesium.SingleTileImageryProvider({
            url: (function createColorCanvas(color) {
                var width = 1,
                    height = 1;
                var canvas = document.createElement("canvas");
                canvas.width = width;
                canvas.height = height;
                var ctx = canvas.getContext("2d");
                ctx.fillStyle = color;
                ctx.fillRect(0, 0, width, height);
                return canvas.toDataURL();
            })("#ffffff00"),
            rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        }),
        geocoder: false,
        homeButton: false,
        selectionIndicator: false, // 去除绿色选择框
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true, // 仅以3D渲染以节省GPU内存
        useBrowserRecommendedResolution: true, // 以浏览器建议的分辨率渲染
    });

    //去除版权标记
    viewer._cesiumWidget._creditContainer.style.display = "none";

    let tdt_tk = "e90d56e5a09d1767899ad45846b0cefd";
    // 加载天地图影像
    viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + tdt_tk,
            layer: "img",
            style: "default",
            tileMatrixSetID: "w",
            format: "image/jpeg",
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            tileMatrixSetID: "GoogleMapsCompatible",
            show: true,
            minimumLevel: 1,
            maximumLevel: 18,
        })
    );
    //加载影像注记
    viewer.imageryLayers.addImageryProvider(
        new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" + tdt_tk,
            layer: "cia",
            style: "default",
            tileMatrixSetID: "w",
            format: "tiles",
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
            maximumLevel: 20,
        })
    );

    let tileset = new Cesium.Cesium3DTileset({
        url: location.origin + "/static/data/CH_QXSY/tileset.json",
        skipLevelOfDetail: true, //开启跳级加载 
        maximumScreenSpaceError: 16,
        maximumNumberOfLoadedTiles: 2000,
        maximumMemoryUsage: 512,//tileset可以使用的最大内存
        show: true,
        immediatelyLoadDesiredLevelOfDetail: true,
    });
    viewer.scene.primitives.add(tileset);
    tileset.readyPromise.then(function () {
        viewer.zoomTo(tileset);
    });

</script>

</html>