cesium 1.52 demo - Polyline.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 app 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>polyline</title>

    <!-- The Cesium library. -->
    <script src="../ThirdParty/Cesium/Cesium.js"></script>
    <!-- Style our app. -->
    <style>
        @import url(../ThirdParty/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>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNDhhYmQxOC1mYzMwLTRhYmEtOTI5Ny1iNGExNTQ3ZTZhODkiLCJpZCI6NTQ1NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MzM3Mzc0NH0.RU6ynAZcwQvdfygt_N_j2rb2lpsuyyROzdaLQg0emAg';

        let viewer = new Cesium.Viewer('cesiumContainer');

        let redLine = viewer.entities.add({
            name : 'Red line on terrain',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                    -125, 35]),
                width : 5,
                material : Cesium.Color.RED,
                clampToGround : true
            }
        });

        let glowingLine = viewer.entities.add({
            name : 'Glowing blue line on the surface',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArray([-75, 37,
                    -125, 37]),
                width : 10,
                material : new Cesium.PolylineGlowMaterialProperty({
                    glowPower : 0.2,  // 总线宽变成原来的20%。
                    color : Cesium.Color.BLUE
                })
            }
        });

        let orangeOutlined = viewer.entities.add({
            name : 'Orange line with black outline at height and following the surface',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,
                    -125, 39, 250000]),
                width : 5,
                material : new Cesium.PolylineOutlineMaterialProperty({
                    color : Cesium.Color.ORANGE,
                    outlineWidth : 2,
                    outlineColor : Cesium.Color.BLACK
                })
            }
        });

        let purpleArrow = viewer.entities.add({
            name : 'Purple straight arrow at height',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
                    -125, 43, 500000]),
                width : 10,
                followSurface : false,  // 跟随地球表面，默认true。
                material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
            }
        });

        let dashedLine = viewer.entities.add({
            name : 'Blue dashed line',
            polyline : {
                positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 45, 500000,
                    -125, 45, 500000]),
                width : 4,
                material : new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.CYAN  // 青色
                })
            }
        });

        viewer.zoomTo(viewer.entities);
    </script>
</body>

</html>
cesium 1.52 demo - Polyline.html

猜你喜欢
