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

搞定!

相关推荐
起这个名字8 分钟前
Langchain4j Rag 知识库教程
java·后端
Autism11413 分钟前
javase-day22-stream
java·开发语言·windows·笔记
前端付豪20 分钟前
Vue3 响应式来!
前端·javascript·vue.js
芝士麻雀21 分钟前
Zustand 深度解析:原理、源码与最佳实践
前端·react.js·前端框架
fouryears_2341725 分钟前
IDEA推送github,身份认证错误:Cannot assign requested address: getsockopt 解决方法
java·ide·intellij-idea
我命由我1234526 分钟前
Android PDF 操作 - AndroidPdfViewer 显示 PDF 异常清单(数据为 null、数据为空、PDF 文件损坏、非 PDF 文件)
android·java·java-ee·pdf·android studio·android-studio·android runtime
Dontla27 分钟前
JS睡眠函数(JS sleep()函数、JS单线程、Event Loop事件循环)假睡眠
开发语言·javascript·ecmascript
fruge35 分钟前
前端性能优化实战指南:从首屏加载到用户体验的全面提升
前端·性能优化·ux
CodeCraft Studio40 分钟前
【金融行业案例】基于Vaadin全栈Java框架重构内部系统,全面提升开发效率与用户体验
java·金融·重构·vaadin·银行内部系统·纯java开发框架·java web框架
ZYMFZ41 分钟前
Redis主从复制与哨兵集群
前端·git·github