cesium 地图蒙版遮罩效果

在这里插入图片描述

示例代码

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

相关阅读:
Python入门基础篇
java File、io篇
Gin学习记录2——路由
Uni-App之使用RichText组件实现富文本内容展示教程
前端项目实战141-RTKQ项目中案例详解2
八股系列——Java基础
遍历set、tuple、list哪个速度最快呢？
.NET6: 开发基于WPF的摩登三维工业软件 (10) - 机器人
【linux基础】— linux下的source filename.sh及与sh filename.sh、./filename.sh命令的区别
算法练习-LeetCode 剑指 Offer 48. 最长不含重复字符的子字符串

原文地址：https://blog.csdn.net/weixin_46730573/article/details/133779063