Openlayers地图背景透明度设置

最新推荐文章于 2024-07-01 15:39:02 发布

GIS开发者

最新推荐文章于 2024-07-01 15:39:02 发布

阅读量6.7k

点赞数

分类专栏： Openlayers WebGIS开发文章标签： openlayers 背景透明度

本文链接：https://blog.csdn.net/GISuuser/article/details/80989878

版权

WebGIS开发同时被 2 个专栏收录

77 篇文章 119 订阅

订阅专栏

Openlayers

7 篇文章 3 订阅

订阅专栏

在实际开发中，为了美观，需要设置Openlayers中地图div中除了地图之外的地方的透明度，这个通过设置.ol-viewport的样式就可以完成。项目测试代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>背景色测试</title>
		<link rel="stylesheet" href="css/ol.css" />
		<script type="text/javascript" src="js/ol.js"></script>
	</head>

	<body style="margin: 0;padding: 0;">
		<div style="width: 100%;height: 100%;position: absolute;z-index: 1;top: 0;left: 0;background-color: red;"></div>
		<div style="width: 100%;height: 100%;position: absolute;z-index: 2;left: 0;top: 0;" id="map"></div>
		<script>
			var map = new ol.Map({
				view: new ol.View({
					center: [0, 0],
					zoom: 1
				}),
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM()
					})
				],
				target: 'map'
			});
		</script>
		<style>
			.ol-viewport {
				/*完全透明*/
				/*background-color: rgba(0, 0, 0, 0);*/
				/*完全不透明*/
				background-color: rgba(0, 0, 0, 1);
			}
		</style>
	</body>

</html>

透明效果图：