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

搞定!

相关推荐
Ramos丶4 分钟前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~14 分钟前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
sniper_fandc15 分钟前
SpringMVC详解
java·springmvc
qq_4116719824 分钟前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
TT哇1 小时前
【Java EE初阶】计算机是如何⼯作的
java·redis·java-ee
清幽竹客1 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim1 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js
滿2 小时前
Vue3 父子组件表单滚动到校验错误的位置实现方法
前端·javascript·vue.js
专注VB编程开发20年2 小时前
javascript的类,ES6模块写法在VSCODE中智能提示
开发语言·javascript·vscode
夏梦春蝉3 小时前
ES6从入门到精通:模块化
前端·ecmascript·es6