地图可视化上盖蒙版效果案例记录

cwr888

已于 2025-03-26 08:30:03 修改

阅读量164

点赞数 3

分类专栏： GIS html5 css3 文章标签： html5 javascript css

于 2025-03-24 13:54:16 首次发布

本文链接：https://blog.youkuaiyun.com/cwr888/article/details/146474642

版权

GIS 同时被 3 个专栏收录

28 篇文章

订阅专栏

html5

10 篇文章

订阅专栏

css3

4 篇文章

订阅专栏

做地图可视化项目时，经常要做蒙版效果，实现案例记录下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

  <style>
    html,body {
    overflow: hidden;
    width: 100%;
      height:100%;
    }

.root-view {
    position: relative;
    width: 100%;
    height: 100vh;
}
.background-placeholder {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(1.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: -1;
}
.mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 10;
    pointer-events: none;
}
.smartWaterModel, .oneMap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
}
  </style>
</head>
<body>

<div  class="root-view">
<div class="background-placeholder"></div>
<div class="mask"></div>

<div class="oneMap">
    <iframe style="width: 100%; height: 100%; margin: 0px; padding: 0px; border: none;" src="https://map.baidu.com" frameborder="0"></iframe>
</div>

</div>

</body>
</html>

样式中1.png