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

openLayers定位到wms图层

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

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

后端部分逻辑代码:

java 复制代码
@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>

前端部分代码:

js 复制代码
/**
	 * 根据行政区代码定位到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];
	}

搞定!

相关推荐
长风破浪会有时呀15 分钟前
记一次接口优化历程 CountDownLatch
java
云朵大王40 分钟前
SQL 视图与事务知识点详解及练习题
java·大数据·数据库
我爱Jack1 小时前
深入解析 LinkedList
java·开发语言
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
七夜zippoe1 小时前
前端开发中的难题及解决方案
前端·问题
27669582922 小时前
tiktok 弹幕 逆向分析
java·python·tiktok·tiktok弹幕·tiktok弹幕逆向分析·a-bogus·x-gnarly
晓13132 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
用户40315986396633 小时前
多窗口事件分发系统
java·算法
Hockor3 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军3 小时前
React 实现 useMemo
前端·react.js·前端框架