实现思路

根据WFS服务参数可以看出，一种是空间查询（一定范围内的数据查询）、还有一种数据查询（类似于sql查询，使用关键字filter），以上两种查询配合返回的数据量count就可以确定查询的数据范围，可以解决数据量大带来的卡顿问题。
1、WMS配合WFS实现属性查询，为了更加流畅的在地图中展示并叠加地图服务，先通过wms瓦片服务进行地图展示，然后通过点击地图中的要素，计算bbox范围数据，通过wfs服务进行查询范围查询（包括交叉），可以返回要素的属性信息。
2、直接通过WFS进行图层展示和属性查询，该方式可以根据当前屏幕的坐标范围和返回的数据量解决数据叠加卡顿问题，获取当前屏幕的左上角右下角的坐标值给bbox，同时根据当前的地图级别，一般在要素能够清晰显示的最大图层下设置数量和bbox即可。

实现方式

示例地址：http://localhost:8081/geoserver/wfs?service=WFS&version=2.0.0&request=GetFeature&outputFormat=application/json&typename=xx:xxxx&count=50&bbox=xx.xxxxxxx,xxx.xxxxxxxx,xx.xxxxxx,xxx.xxxxxxxx
参数介绍：
count:返回的数据量，根据实际情况定义即可。
typename:图层名称，通过geoserver预览页查看。
bbox:查询范围（左上角，右下角坐标），两个坐标组成的矩形范围。

一、空间查询

1、计算bbox范围，通过点击地图，获取坐标，根据当前获取的坐标计算bbox，方法如下：

假设点击坐标点经纬度为 (lat_center, lon_cente)，矩形的宽度为width，矩形的高度为 height，则矩形的左上角和右下角的经纬度可以通过以下方式计算 ：
计算左上角的纬度: lat_top_left = lat_center +(height / 2.0)
计算左上角的经度: lon_top_left = lon center -(width /2.0)
计算右下角的纬度: lat_bottom_right = lat center - (height / 2.0)
计算右下角的经度: lon_bottom_right = lon center + (width / 2.0)
因此，矩形的左上角经纬度为 (lat_top_left, lon _top_left)，
右下角经纬度为 (lat_bottom_right, lon _bottom_right)。

2、根据bbox的范围调用wfs服务，获取属性信息，完成业务展示。

二. 数据查询

1、获取屏幕或者可视范围内的矩形的左上角，右下角经纬度坐标信息，赋值给bbox，一般地图的api都支持获取。
2、将地图放缩到合适的级别（即能够看清要查询的要素，例如展示路线图层，应该清楚的看到每条路线，不能重叠，同时点击时不会出现同时点击多条路线）。
3、根据获取的级别，设置返回的数据量count值，由于地图级别限制此时的值不会很大，完全可以流畅叠加。
4、添加图层的点击事件，获取属性实现业务展示。

备注：计算bbox参数值网上还提供了以下方式

（https://blog.csdn.net/qcmy980/article/details/131737089），可以自行测试，具体如下：
/**
计算用户坐标应该减去的差值
/ function getZoomBbox(zoom){
let level0 = 142.03125
let box = level0 / Math.pow(2,zoom)
box = box / 2
return box } /
*根据用户点击的坐标计算 bbox参数
*/ function bbox(latlng,zoom) {
let box = this.getZoomBbox(zoom)
let boxMin = {
lat: latlng.lat - box,
lng: latlng.lng - box
}
let boxMax = {
lat: latlng.lat + box,
lng: latlng.lng + box
}
// console.table({zoom,box,latlng,boxMin, boxMax })
return ${boxMin.lng},${boxMin.lat},${boxMax.lng},${boxMax.lat} }