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

最新推荐文章于 2024-04-14 16:58:32 发布

原创

最新推荐文章于 2024-04-14 16:58:32 发布 · 2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue

该项目旨在模拟设备水位，通过叠加Geoserver发布的图层在OpenLayers上显示淹水区域。利用滚动条控制水位，从后端获取图层列表，依据模拟数值动态展示图层。首先筛选并逐个加载图层，然后通过Geoserver发布一个包含多个图层的图层，利用level和devId作为过滤条件在前端进行过滤，以提高效率。最终实现动态效果。

描述

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

一个个叠加图层

先筛选后端接口返回的图层，再一个个叠加显示。
要求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"