当前位置: 首页 > news >正文

【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注

书接上回,我使用GeoServer发布了服务【开源WebGIS】02-矢量数据传入PostGIS+发布GeoServer服务+QGIS符号化,并进行了配色。接下来在前端对服务进行了调用显示,效果如下:
在这里插入图片描述

今天实现的是属性的标注,效果如下:在这里插入图片描述
实现步骤如下:
原本以为是可以通过调用WMS的属性或者什么方法可以在前端获取shp要素的属性表信息,请教了大佬之后发现不是这样的。实现标注的方法是在符号化时就加上标注,然后将符号化保存为sld文件,拿到sld文件之后需要对其进行简单的处理,然后上传到geoserver的stlyle里面即可。

  1. 在QGIS中对shp要素进行符号化,加上标注,导出符号化的sld文件
  2. 使用记事本对sld文件进行编辑,让标注始终显示在要素的中心位置,防治重复标注的情况出现
  3. 将修改后的sld文件上传至geoserver的style文件
  4. 前端调用服务即可

1 使用QGIS进行符号化,添加标注

1、 符号化
在这里插入图片描述
2、 导出符号化的sld文件
在这里插入图片描述

2 编辑sld文件

在大约122行的位置写入以下代码,并保存,设置标注始终出现在要素的质心的位置

<se:Geometry>
	<ogc:Function name="centroid"> 
		<ogc:PropertyName>geom</ogc:PropertyName>
	</ogc:Function>
</se:Geometry>

在这里插入图片描述
在这里插入图片描述
geom是数据的空间字段
在这里插入图片描述

若不这样改,就会出现同一个要素,出现很多标注的问题,效果如图:
在这里插入图片描述
这一步的操作是参考大佬的文章:Geoserver中Polygon图层Label标注重复的问题小结

3 更新GeoServer的style

将上一步编辑的sld文件上传至GeoServer即可
在这里插入图片描述
效果如下:
在这里插入图片描述

鸣谢大佬

Southejor
giser
谢谢谢谢谢峰
Clumsy 

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

相关文章:

  • JavaWeb编年史(青铜时代)
  • 机器学习笔记 - 模式识别的应用场景之一简单车牌识别
  • Selenium基础 — 多窗口操作
  • Nginx之动静分离
  • 怎么成为稚晖君?
  • 离线数仓 (四) --------- 用户行为数据采集模块
  • HACKTHEBOX——Valentine
  • 哈佛结构和冯诺依曼结构
  • 【黄啊码】MySQL入门—7、这些函数运用得好,高级工程师都直呼内行
  • UnityPackageManager相关
  • 数字图像处理——基本运算
  • Cosmos模块化功能链 走向亿级用户的超级Dapp时代
  • 【黑马程序员名师pink老师讲HTML】HTML很容易忘记?有它我不慌的
  • .NetCore项目nginx发布
  • 主流开源OLAP对比分析
  • 《深入 React 技术栈》
  • 30秒的PHP代码片段(1)数组 - Array
  • Android组件 - 收藏集 - 掘金
  • exif信息对照
  • JS正则表达式精简教程(JavaScript RegExp 对象)
  • Nginx 通过 Lua + Redis 实现动态封禁 IP
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • spring cloud gateway 源码解析(4)跨域问题处理
  • SQLServer之创建显式事务
  • Swift 中的尾递归和蹦床
  • Terraform入门 - 3. 变更基础设施
  • TypeScript迭代器
  • V4L2视频输入框架概述
  • Vue.js源码(2):初探List Rendering
  • Webpack 4x 之路 ( 四 )
  • webpack项目中使用grunt监听文件变动自动打包编译
  • 精彩代码 vue.js
  • 离散点最小(凸)包围边界查找
  • 利用jquery编写加法运算验证码
  • 使用Swoole加速Laravel(正式环境中)
  • 吴恩达Deep Learning课程练习题参考答案——R语言版
  • 一加3T解锁OEM、刷入TWRP、第三方ROM以及ROOT
  • 掌握面试——弹出框的实现(一道题中包含布局/js设计模式)
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • 函数计算新功能-----支持C#函数
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • #include
  • (02)Cartographer源码无死角解析-(03) 新数据运行与地图保存、加载地图启动仅定位模式
  • (1)Nginx简介和安装教程
  • (Pytorch框架)神经网络输出维度调试,做出我们自己的网络来!!(详细教程~)
  • (二)斐波那契Fabonacci函数
  • (附源码)spring boot基于小程序酒店疫情系统 毕业设计 091931
  • (区间dp) (经典例题) 石子合并
  • (完整代码)R语言中利用SVM-RFE机器学习算法筛选关键因子
  • (原創) 未来三学期想要修的课 (日記)
  • (转)MVC3 类型“System.Web.Mvc.ModelClientValidationRule”同时存在
  • (转)大型网站的系统架构
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (转载)从 Java 代码到 Java 堆
  • (轉貼)《OOD启思录》:61条面向对象设计的经验原则 (OO)