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

书接上回,我使用GeoServer发布了服务【开源WebGIS】02-矢量数据传入PostGIS+发布GeoServer服务+QGIS符号化,并进行了配色。接下来在前端对服务进行了调用显示,效果如下:
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第1张图片

今天实现的是属性的标注,效果如下:【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第2张图片
实现步骤如下:
原本以为是可以通过调用WMS的属性或者什么方法可以在前端获取shp要素的属性表信息,请教了大佬之后发现不是这样的。实现标注的方法是在符号化时就加上标注,然后将符号化保存为sld文件,拿到sld文件之后需要对其进行简单的处理,然后上传到geoserver的stlyle里面即可。

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

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

1、 符号化
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第3张图片
2、 导出符号化的sld文件
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第4张图片

2 编辑sld文件

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

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

【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第5张图片
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第6张图片
geom是数据的空间字段
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第7张图片

若不这样改,就会出现同一个要素,出现很多标注的问题,效果如图:
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第8张图片
这一步的操作是参考大佬的文章:Geoserver中Polygon图层Label标注重复的问题小结

3 更新GeoServer的style

将上一步编辑的sld文件上传至GeoServer即可
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第9张图片
效果如下:
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第10张图片

鸣谢大佬

Southejor
giser
谢谢谢谢谢峰
Clumsy 

【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第11张图片
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第12张图片
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第13张图片
【开源WebGIS】05-Openlayers访问GeoServer发布的WMS数据并添加标注_第14张图片

后语

欢迎点个关注、收藏吧,这对我很重要!

你可能感兴趣的:(开源WebGIS,开源,前端)