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

ops/2024/10/20 17:31:36/

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>

前端部分代码:

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

搞定!


http://www.ppmy.cn/ops/45288.html

相关文章

最新文章合集

GitHub宝藏项目&#xff1a;每天一个&#xff0c;让你的技术库增值不停&#xff01; STORM、SuperMemory、Awesome Chinese LLM、AI写作助手、资料搜集、文章生成、视角问题引导、模拟对话策略、内容导入、浏览器插件、资源库、开源微调模型 开发者必看&#xff1a;Linux终端…

leetcode 684.冗余连接

思路&#xff1a;并查集 这里的图比较像一种特殊的数据结构&#xff0c;其实也是图论的一种东西&#xff0c;就是基环树&#xff0c;但是这里并不是有向图&#xff0c;而是无向图&#xff0c;所以并不能用那种剪枝操作然后找基环。 看到连通量&#xff0c;我们应该能想到两种…

go select 原理

编译器会使用如下的流程处理 select 语句&#xff1a; 将所有的 case 转换成包含 channel 以及类型等信息的 runtime.scase 结构体。调用运行时函数 runtime.selectgo 从多个准备就绪的 channel 中选择一个可执行的 runtime.scase 结构体。通过 for 循环生成一组 if 语句&…

C# 数组/集合排序

一&#xff1a;基础类型集合排序 /// <summary> /// 排序 /// </summary> /// <param name"isReverse">顺序是否取反</param> public static void Sort<T>(this IList<T> array, bool isReverse false)where T : IComparable …

React hooks - 自定义hooks

自定义hooks 自定义封装鼠标位置的 hook自定义封装秒数倒计时的 hook 在 src 目录下新建 hooks/index.ts 模块&#xff0c;自定义hooks都写在这里&#xff0c;自定义hooks都以use开头 自定义封装鼠标位置的 hook export const useMousePosition (delay:number 0) > {cons…

vue3 + vite 项目打包优化

vue项目打包之后生成的dist包体积太大&#xff0c;超过10M, 进行影响项目加载速度。本文章从作者的实践操作写出如何做项目优化。 一、分析包体积过大的原因 项目初始打包体积为10.6M。 使用 rollup-plugin-visualizer 做打包视图分析。 安装命令&#xff1a; npm install…

YOLOv10最详细全面讲解2- 目标检测-环境搭建、训练自己的数据集

YOLOv10没想到出来的如此之快&#xff0c;作为一名YOLO的爱好者&#xff0c;以YOLOv5和YOLOv8的经验&#xff0c;打算出一套从数据集装备->环境配置->训练->验证->目标追踪全系列教程。请大家多多点赞和收藏&#xff01;&#xff01;&#xff01; 系列文章&#xf…

产品经理-原型绘制(五)

1. 概念 用线条、图形描绘出的产品框架&#xff0c;也称为线框图&#xff0c;是需求和功能的具体化表现 2. 常用工具 Axure 3. 类别 3.1 草图原型 手绘图稿&#xff0c;修改方便&#xff0c;规划的早期使用 3.2 低保真原型 简单交互&#xff0c;无设计图&#xff0c;无需…