ol-ext添加遮罩

最新推荐文章于 2024-05-17 13:58:02 发布

dragonzoebai

最新推荐文章于 2024-05-17 13:58:02 发布

阅读量705

点赞数 1

分类专栏： openlayers GIS 文章标签： javascript openlayer ol-ext

本文链接：https://blog.csdn.net/dragonzoebai/article/details/125031770

版权

GIS 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

openlayers

6 篇文章 0 订阅

订阅专栏

参考：ol-ext: Crop filter

效果：

其中重要代码：

var mask = new ol.filter.Mask({
	feature: feature,
	fill: new ol.style.Fill({
		color: [0, 0, 0, 0.5]
	})
});
xyzLayer.addFilter(mask);

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Mask遮罩</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<!-- Openlayers -->
		<link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
		<script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
		<!-- ol-ext -->
		<script type="text/javascript" src="./dist/ol-ext.js"></script>
		<style>
			html,
			body,
			.map {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div id="map" class="map"></div>
		<script>
			var xyzLayer = new ol.layer.Tile({
				source: new ol.source.XYZ({
					url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
				})
			});
			var map = new ol.Map({
				target: 'map',
				view: new ol.View({
					zoom: 14.5,
					center: [12127495.117988808, 4058905.64276462]
				}),
				layers: [xyzLayer]
			});
			
			// 添加边界数据
			var maskSource = new ol.source.Vector({
				format: new ol.format.GeoJSON(),
				url: './data/xiaozhai_3857.geojson'
			})
			var maskLayer = new ol.layer.Vector({
				source: maskSource,
				style: new ol.style.Style({
					stroke: new ol.style.Stroke({
						color: '#5fcac7',
						width: 3
					}),
				})
			})
			map.addLayer(maskLayer)
			maskSource.on('featuresloadend', (obj) => {
				addMask(obj.features[0])
			})
			
			// 添加遮罩
			function addMask(feature){
				var mask = new ol.filter.Mask({
					feature: feature,
					fill: new ol.style.Fill({
						color: [0, 0, 0, 0.5]
					})
				});
				xyzLayer.addFilter(mask);
			}
		</script>

	</body>
</html>

dragonzoebai

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
ol-ext添加遮罩

参考：ol-ext: Crop filter效果：其中重要代码：var mask = new ol.filter.Mask({ feature: feature, fill: new ol.style.Fill({ color: [0, 0, 0, 0.5] })});xyzLayer.addFilter(mask);完整代码：<!DOCTYPE html><html> <head> <title>Mask遮.
复制链接

扫一扫

专栏目录