Imagery Layers.html

最新推荐文章于 2023-08-13 01:22:25 发布

原创最新推荐文章于 2023-08-13 01:22:25 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

cesium_demo 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用Cesium JavaScript库叠加多种影像图层，包括基础地图、夜间地球灯光效果及特定区域的logo图层。通过调整图层属性如透明度、亮度，实现丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>Imagery Layers</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', {
            // 要使用的图像提供者。
            imageryProvider : new Cesium.ArcGisMapServerImageryProvider({
                // ArcGIS地图服务器服务的url。
                url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
            }),
            // 基层拾取器。
            baseLayerPicker : false
        });
        // 获取将在全球呈现的图像层的集合。
        let layers = viewer.imageryLayers;
        // 后添加的图层在已有的图层的上边展示（后来居上）。
        let earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));
        // layers.lower(earthAtNight);
        earthAtNight.alpha = 0.5; // 0.0 透明  1.0 不透明。
        earthAtNight.brightness = 2.0; // > 1.0 增加灯的亮度  < 1.0 降低亮度

        layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
            // 瓷砖的url。
            url : '../images/Cesium_Logo_overlay.png',
            // 矩形，以弧度表示，由图像覆盖。
            // Cesium.Rectangle.fromDegrees(west, south, east, north, result) → Rectangle
            // 创建以度为单位的给定边界经度和纬度的矩形。
            rectangle : Cesium.Rectangle.fromDegrees(-75.0, 28.0, -67.0, 29.75)
        }));
    </script>
</body>

</html>