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];
	}

搞定!

相关推荐
跟橙姐学代码6 小时前
Python 类的正确打开方式:从新手到进阶的第一步
前端·python·ipython
Jagger_6 小时前
SonarQube:提升代码质量的前后端解决方案
前端·后端·ai编程
Becauseofyou1376 小时前
如果你刚入门Three.js,这几个开源项目值得你去学习
前端·three.js
菜市口的跳脚长颌6 小时前
前端大文件上传全攻略(秒传、分片上传、断点续传、并发控制、进度展示)
前端
不一样的少年_6 小时前
同事以为要重写,我8行代码让 Vue 2 公共组件跑进 Vue 3
前端·javascript·vue.js
草履虫建模6 小时前
在 RuoYi 中接入 3D「园区驾驶舱」:Vue2 + Three.js + Nginx
运维·开发语言·javascript·spring boot·nginx·spring cloud·微服务
云枫晖6 小时前
JS核心知识-数据转换
前端·javascript
渣哥6 小时前
Java HashMap 扩容机制详解:触发条件与实现原理
java
赵星星5206 小时前
Spring Bean线程安全陷阱:90%程序员都会踩的坑,你中招了吗?
java
xuyanzhuqing6 小时前
代码共享方案-多仓库合并单仓库
前端