cesium 地图蒙版遮罩效果

GIS-CL

已于 2025-04-12 22:31:51 修改

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cesium 文章标签：前端 cesium javascript

于 2023-10-11 21:12:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46730573/article/details/133779063

cesium 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在HTML页面中利用Cesium.js库创建一个全屏的3D视图，并通过CSS和JavaScript实现一个蒙版遮罩效果，以增强用户体验。

摘要生成于 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 application 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>蒙版遮罩效果</title>
    <script src="/Cesium/Cesium.js"></script>
    <link href="/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      .mask{
        position: absolute;
            left: 0;
            top: 0;
            z-index: 999;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background-image: radial-gradient(rgba(139,138,138,.12) 20%,rgba(65,57,57,.56) 50%,rgb(17,16,16) 80%);
      }
    </style>
  </head>
  <body>
    <div class="mask"></div>
    <div id="cesiumContainer"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer",{
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        fullscreenButton: false,
        vrButton: false,
        baseLayerPicker: false,
        infoBox: false,
        selectionIndicator: true,
        animation: false,
        timeline: false,
        shouldAnimate: true,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
      });
      
      
    </script>
  </body>
</html>