openLayers加载wms图层并定位到该图层

openLayers定位到wms图层

我们的wms是加载geoserver发布的服务，wms加载的图层是没法通过layer.getSource().getExtent()来获取到extents（边界）的；实现思路是通过postgis的函数(st_extent(geom))来获取extents;

在这里插入图片描述

返回前端后格式化一下成数组的extens就可以实现定位了。

后端部分逻辑代码：

@ApiOperation("获取行政区extent")@OpLog("获取行政区extent")@GetMapping("/extent")public Result<String> getRegionExtent( String xzqdm ) {return Result.ok(regionsService.getRegionExtent(xzqdm));}// sql代码
<select id="getRegionExtent" resultType="java.lang.String">SELECT st_extent(geom) from st_2k_region_s WHERE xzqdm = #{xzqdm}
</select>

前端部分代码：

/*** 根据行政区代码定位到wms的图层*/getViewWmsLayer(xzqdm = '530000') {getRegionExtent({xzqdm}).then(({result}) => {const extents = this.parseBoxString(result)console.log('extents:', extents)this.map.getView().fit(extents, {duration: 1000});})}/*** 把st_extent的box数据转化为数组* 例如：BOX(102.167950753 24.388888934,103.669001313 26.545210101)* 转化为：[102.167950753, 24.388888934, 103.669001313, 26.545210101]*/parseBoxString(boxString) {// 正则表达式匹配BOX(...)内的内容，并分割成两个坐标对  const regex = /BOX\(([\d.]+ [\d.]+),([\d.]+ [\d.]+)\)/;const matches = boxString.match(regex);if (!matches || matches.length < 3) {throw new Error('Invalid box string format');}// 提取出经纬度坐标，并转换为数字类型  const coord1 = matches[1].split(' ').map(Number);const coord2 = matches[2].split(' ').map(Number);return [...coord1, ...coord2];}