cesium 地图蒙版遮罩效果

news2024/11/19 14:40:58

在这里插入图片描述

示例代码

<!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>