openlayers天地图叠加geoserver图层，并对包含多个图层的图层进行过滤

描述

项目要求模拟设备水位，叠加图层显示淹水的区域。运用滚动条来模拟水位，获取该设备的图层列表，再根据模拟数值显示对应图层。

一个个叠加图层

先筛选后端接口返回的图层，再一个个叠加显示。
要求geoserver发布多个图层，再根据数据进行筛选。

缺点：
需要在geoserver一个范围发布一个图层，一个设备要发布多个图层，太繁琐。

	this.addView=[
	{
	addTime: "2021-08-23 17:12:50",
	expression: "$>0.5",
	id: "1",
	lableId: "87",
	layerUrl: "http://xxxx.com:30009/geoserver/sz/wms?a=b",
	name: "sz:nlwmx",
	prefix: "PY",
	stationId: "0C634110E03CD1F7821EC5214BA1B2F2",
	updateTime: "2021-08-23 17:12:57",
	},
	{
	addTime: "2021-08-23 17:12:50",
	expression: "$>1",
	id: "2",
	lableId: "87",
	layerUrl: "http://xxxx.com:30009/geoserver/sz/wms?a=b",
	name: "sz:nlwmx",
	prefix: "PY",
	stationId: "0C634110E03CD1F7821EC5214BA1B2F2",
	updateTime: "2021-08-23 17:12:57",
	},
	]
	if(this.addView.length>0){
		 this.addView.forEach((item)=>{
			 var geoserverUrl = item.layerUrl.slice(0,item.layerUrl.indexOf('?'))
			 var wmsSource = new TileWMS({
			   url: geoserverUrl,
			   params: { LAYERS: item.name, TILED: true },
			   serverType: "geoserver",
			   crossOrigin: "anonymous",
			 });
			 
			 var wmsLayer = new TileLayer({
			   source: wmsSource,
			 }); 
			 console.log('图层',geoserverUrl,item.name)
			 map.addLayer(wmsLayer);
		 })
	 } 

过滤显示图层

geoserver发布的一个图层里包含了多个图层，图层里有level和devId作为过滤条件。

获取后端图层数据，前端进行处理后再在天地图中显示。

		this.addView=[
		{
		addTime: "2021-08-23 17:12:50",
		expression: "$>1",
		id: "2",
		lableId: "87",
		layerUrl: "http://xxxx.com:30009/geoserver/sz/wms?a=b",
		name: "sz:nlwmx",
		prefix: "PY",
		stationId: "0C634110E03CD1F7821EC5214BA1B2F2",
		updateTime: "2021-08-23 17:12:57",
		level:2
		},
		]

//一个图层按条件筛选显示 条件 "level <= 2 and devId=9280010684"
		
			if(this.addView[0]){
				let item=this.addView[0]
			  	var geoserverUrl = item.layerUrl.slice(0,item.layerUrl.indexOf('?'))
			  	var wmsSource = new TileWMS({
			  	     url: geoserverUrl,
			  	    params: { LAYERS: item.name, TILED: true ,
			  	      'CQL_FILTER': `level <= ${item.level} and devId=${item.devId}`,
			  	     },
			  	      serverType: "geoserver",
			  	      crossOrigin: "anonymous",
			  	    });
			  		var wmsLayer = new TileLayer({
			  		  		source: wmsSource,
			  		}); 
					console.log('图层',geoserverUrl,item.name,
					`level <= ${item.level} and devId=${item.devId}`)
			  		  
			   map.addLayer(wmsLayer);
				 
			}

效果

在这里插入图片描述