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

搞定!

相关推荐
Cosolar4 分钟前
前端如何实现VAD说话检测?
前端
CodeSheep22 分钟前
当了leader才发现,大厂最想裁掉的,不是上班总迟到的,也不是下班搞失联的,而是经常把这3句话挂在嘴边的
前端·后端·程序员
吃饺子不吃馅26 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒1 小时前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼11 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
皮皮林55111 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript