skyversation-public
/
web_develop_ui


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!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>Document</title>
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">
    <script src="./Cesium/Cesium.js"></script>
    <script src="./skyscenery.js"></script>
    <style>
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0 0;
            padding: 0 0;
        }

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

<body>
    <div id="cesiumContainer">

    </div>
</body>
<script>
    // tk 为天地图密钥，补充后使用demo时
    var tk = "";

    let viewer = new Skyscenery.Viewer("cesiumContainer", {
        animation: false,
        timeline: false,
        fullscreenButton: false,
        infoBox: false,
        baseLayerPicker: false,
        imageryProvider: new Skyscenery.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: Skyscenery.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0),
        }),
        geocoder: false,
        homeButton: false,
        selectionIndicator: false,
        sceneModePicker: false,
        navigationHelpButton: false,
    });

    viewer.imageryLayers.addImageryProvider(
        new Skyscenery.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=" + 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.camera.flyTo({
        destination: Skyscenery.Cartesian3.fromDegrees(
            120.90235464348983,
            27.945280684840125,
            700,
        ),
        orientation: {
            heading: Skyscenery.Math.toRadians(80),
            pitch: Skyscenery.Math.toRadians(-30),
            roll: Skyscenery.Math.toRadians(0),
        },
    });

    let plan = Skyscenery.add3DTilesData("plan")
    let pianyi = Skyscenery.createMatrix4({
        scale: 1.0,
        longitude: 120.91824,
        latitude: 27.94132,
        height: 0,
        rx: 0,
        ry: 0,
        rz: 0,
    })
    plan.readyPromise.then(function () {
        plan.root.transform = pianyi;
    });
</script>

</html>