详解LeafLet中如何展示GeoServer发布的图层组

目录

前言

一、关于图层组

1、使用图层图组的好处

2、创建图层组

二、在Leaflet中展示图层组

1、新建Html模板框架

2、绑定地图map和底图设置

3、绑定图层组

总结


前言

        在之前的博文中,曾经重点介绍如何使用LeafLet叠加Geoserver wms图层到已有底图的方法 ,这里采用的办法是将单个wms图层直接叠加到Leaflet中。如果场景中需要展示的图层数量不多,我们可以使用这种方式,在Leaflet前端组件中绑定多个即可。如果需要展示的图层较多,那么对于前端组件来说无疑是一种灾难。

        那如何解决这种需求呢?本文提供一种思路,就是基于Geoserver,在GeoServer中,将需要统一展示的图层放在一个图层组中,每个图层由自己独立的样式来进行控制。通过图层组的统一设置,合并两个图层,对于Leaflet前端来说,依然是加载一个图层,从而减少前端的代码量。本文将详细介绍GeoServer中的图层组,以及如何在GeoServer中管理图层组,最后介绍如何使用Leaflet进行图层组数据的加载。

一、关于图层组

        Geoserver图层组可以将多个图层组织在一起,方便地管理和展示这些图层,从而提高地图服务的效率和可用性。以下是Geoserver图层组的优缺点介绍:

1、使用图层图组的好处

  1. 管理方便:图层组可以将多个图层组织在一起,方便地管理和展示这些图层。

  2. 便于使用:图层组可以让用户轻松地选择需要的图层,提高地图服务的可用性。

  3. 提高效率:图层组可以减少地图服务的请求次数,提高地图服务的效率。

  4. 界面友好:图层组的展示界面通常比单个图层更美观、更易于使用。

2、创建图层组

        登录GeoServer的Web端管理界面,在输入登录密码后可以看到以下的管理界面:

         在左侧的菜单中,点击图层组操作按钮,进入图层组的管理操作页面。

         在这里可以完成对图层组的新增、删除、查看已有图层图的信息。在管理列表页面可以看到图层组的名字,所属的工作区,以及是否可用。其中工作区是用于区分不同的工作空间的,即相同名字的图层组不能在一个工作区中。

        点击添加新图层组,进入图层的创建操作。

 注意,这里需要将要展示的图层添加到图层组中,同时设置合适的坐标参考系,还有图层的展示样式。关于图层的SLD样式,可以看之前的博客,有相关的介绍,在此不再赘述。

         注意,在这里由于图层图已经设置了工作区,因此只能将一个工作区的图层合成一个图层图,不支持多工作区发布。

         设置完成后,即完成图层组的编辑。在Geoserver中,采用默认的OpenLayers组件进行图层图组的预览,效果如下:

二、在Leaflet中展示图层组

1、新建Html模板框架

<!DOCTYPE html>
<html>
<head><title>geoserver 图层group展示</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script></body>
</html>

2、绑定地图map和底图设置

var mymap = L.map('mapid').setView([29.052934, 104.0625], 5);L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {maxZoom: 16,attribution: '夜郎king多图层展示 GeoServer多图层展示',id: 'mapbox/streets-v11',crs:L.CRS.EPSG3857,tileSize: 512,zoomOffset: -1}).addTo(mymap);

        在这里,先将地图和底图进行绑定。

3、绑定图层组

        图层组的绑定和单wms的绑定方式差不多的,都是通过Leaflet的api进行图层绑定。关键代码代码如下:

//加载wms服务的图层var dtLineLayer = L.tileLayer.wms('http://localhost:8083/geoserver/gisdev/wms', {layers: 'gisdev:group_bqx',format: 'image/png',transparent: true});dtLineLayer.addTo(mymap);

        经过以上的步骤,基本完成图层组的加载,我们通过nginx将静态网页发布后,在浏览器中输入访问地址后可以看到如下的界面。

         完整的网页代码如下所示:

<!DOCTYPE html>
<html>
<head><title>geoserver 图层group展示</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 600px;"></div>
<script>var mymap = L.map('mapid').setView([29.052934, 104.0625], 5);L.tileLayer('http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png', {maxZoom: 16,attribution: '夜郎king多图层展示 GeoServer多图层展示',id: 'mapbox/streets-v11',crs:L.CRS.EPSG3857,tileSize: 512,zoomOffset: -1}).addTo(mymap);//加载wms服务的图层var dtLineLayer = L.tileLayer.wms('http://localhost:8083/geoserver/gisdev/wms', {layers: 'gisdev:group_bqx',format: 'image/png',transparent: true});dtLineLayer.addTo(mymap);</script></body>
</html>

        温馨提示,以上代码比如投。影坐标系采用默认WGS84,如果您的底图不是这个格式,请进行修改。

总结

        以上就是本文的主要内容,本文将详细介绍GeoServer中的图层组,以及如何在GeoServer中管理图层组,最后介绍如何使用Leaflet进行图层组数据的加载。在最后,关于使用图层组的一些场景,需要进行抉择。因为图层组有以下的一些缺点,如有遗漏,敬请补充:

缺点:

  1. 维护成本高:图层组可能需要更多的维护和管理,包括图层更新、权限设置、数据源管理。

  2. 可能存在性能问题:当图层组中包含大量图层时,可能会影响地图服务的性能。

  3. 可能存在安全问题:不正确的权限设置可能导致图层组中某些图层被未经授权用户访问。

  4. 可能存在兼容性问题:某些地图客户端可能不支持图层组,无法正常使用相关地图服务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/792.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python应用:什么是爬虫?

文章目录 什么是爬虫虫之初&#xff0c;性本善&#xff1f;出行社交电商搜索引擎政府部门总结 面向监狱编程爬虫的君子协议什么是君子协议君子协议是怎么产生的&#xff1f;君子协议是什么内容&#xff1f;如何查看一个网站的robots协议违反君子协议的案例 参考文献 2022年初的…

x86架构ubuntu22下运行SFC模拟器zsnet

0. 环境 ubuntu22 1. apt安装 sudo apt install zsnes 2. 运行 zsnet 参考&#xff1a;在Ubuntu上用zsnes玩SFC游戏&#xff0c;https://blog.csdn.net/gqwang2005/article/details/3877121

Linux学习之系统默认打开的文件描述符、重定向

系统默认打开的文件描述符 一个进程默认会打开标准输入、标准输出、错误输出三个文件描述符。可以在/proc/PID/fd里边可以看到打开文件的描述符&#xff0c;PID需要改成具体的pid&#xff0c;比如可以使用A终端输入vim proctest之后按下回车键。 打开一个vim编辑窗口。 再打…

Unity游戏源码分享-卡通填色游戏Drawing Coloring Extra Edition 1.09

Unity游戏源码分享-卡通填色游戏Drawing Coloring Extra Edition 1.09 非常适合小朋友玩的小游戏 功能很齐全完善 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88050261

使用MFC CAD 的一些使用方式记录【追加ing】

1. 项目调试&#xff1a;由于项目很大&#xff0c;因此&#xff0c;我们调试的时候&#xff0c;不应该编译整个软件而是应该只编译对应的 类去做处理 2. debug 设置断点方面&#xff1a; 以往我们的操作都是在.exe直接执行文件上进行操作&#xff0c;但是&#xff0c;现在&am…

人工智能-神经网络

目录 1 神经元 2 MP模型 3 激活函数 3.1 激活函数 3.2 激活函数作用 3.3 激活函数有多种 4、神经网络模型 5、神经网络应用 6、存在的问题及解决方案 6.1 存在问题 6.2 解决方案-反向传播 1 神经元 神经元是主要由树突、轴突、突出组成&#xff0c;树突是从上面接收很多…

flutter开发实战-实现webview与Javascript通信JSBridge

flutter开发实战-实现webview与H5中Javascript通信JSBridge 在开发中&#xff0c;使用到webview&#xff0c;flutter实现webview是使用原生的插件实现&#xff0c;常用的有webview_flutter与flutter_inappwebview 这里使用的是webview_flutter&#xff0c;在iOS上&#xff0c;…

如何定制自己的应用层协议?|面向字节流|字节流如何解决黏包问题?如何将字节流分成数据报?

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量干货博客汇总https://blog.csdn.net/yu_cblog/c…

Excel中的Ctrl+Shift:功能及其使用方法

通过本教程,你将了解的功能以及如何在Excel中以最佳方式使用Ctrl+Shift。 我们可以在 Excel 中使用许多快捷方式来简化工作。其中一些有趣的使用了键盘上的 Ctrl 和 Shift 按钮。如果我们能够掌握这些快捷方式,我们应该能够在 Excel 中更有效地完成工作。 想知道我们可以在…

怎么把pytorch从CPU版本替换成GPU版本

使用pip命令pip uninstall torch就可以卸载当前的torch版本。&#xff08;不是cpu版本一般也没有必要重装吧&#xff1f;&#xff09; 接着找到官网https://pytorch.org/get-started/locally/ 在里面选择 根据你自己的需要选择最新的&#xff08;我现在是11.8&#xff09;或者没…

机器学习之随机森林(Random forest)

1 什么是随机森林 随机森林是一种监督式算法&#xff0c;使用由众多决策树组成的一种集成学习方法&#xff0c;输出是对问题最佳答案的共识。随机森林可用于分类或回归&#xff0c;是一种主流的集成学习算法。 1.1 随机森林算法原理 随机森林中有许多的分类树。我们要将一个输…

深入理解Spring AOP注解:@DataScope与@DataSource

在Spring AOP中&#xff0c;注解的使用扮演着重要角色&#xff0c;它们可以帮助我们明确定义切面、切点和增强处理。在本文中&#xff0c;我们将深入探讨RuoYi框架两个自定义注解&#xff1a;DataScope和DataSource。 1. DataScope 定义注解 首先&#xff0c;我们定义一个名为…

怎么使用Netty解码自定义通信协议

网络协议的基本要素 一个完备的网络协议需要具备哪些基本要素 魔数&#xff1a;魔数是通信双方协商的一个暗号&#xff0c;通常采用固定的几个字节表示。魔数的作用是防止任何人随便向服务器的端口上发送数据。协议版本号&#xff1a;随着业务需求的变化&#xff0c;协议可能…

在opencv中,RGB转gray,gray再转RGB,为何色彩不同?

#include <opencv2/opencv.hpp>int main() {// 读取RGB图像cv::Mat rgbImage cv::imread("image.jpg");// 将RGB图像转换为灰度图像cv::Mat grayImage;cv::cvtColor(rgbImage, grayImage, cv::COLOR_RGB2GRAY);// 将灰度图像转换回RGB图像cv::Mat rgbImage2;c…

OpenCV(图像处理)-图片搜索

图片搜索 1.知识介绍2.实现流程2.1 计算特征点与描述子2.2 描述子的匹配2.3 求出单应性矩阵并画出轮廓2.4 将特征点标出 此篇博客作者仍在探索阶段&#xff0c;还有一些模糊的概念没有弄懂&#xff0c;请读者自行分辨。 1.知识介绍 Opencv进行图片搜索需要的知识有&#xff1…

Leetcode-每日一题【147.对链表进行插入排序】

题目 给定单个链表的头 head &#xff0c;使用 插入排序 对链表进行排序&#xff0c;并返回 排序后链表的头 。 插入排序 算法的步骤: 插入排序是迭代的&#xff0c;每次只移动一个元素&#xff0c;直到所有元素可以形成一个有序的输出列表。 每次迭代中&#xff0c;插入排序…

青岛大学_王卓老师【数据结构与算法】Week05_09_顺序栈的操作3_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…

ELK搭建

ELK介绍&#xff1a; ELK是一组开源工具的缩写&#xff0c;它由Elasticsearch、Logstash和Kibana三个组件组成&#xff0c;用于处理、分析和可视化大量日志数据。 入门级ELK搭建&#xff08;无Docker环境&#xff09; 安装前准备 1.获取安装包 https://artifacts.elastic…

Objective-C 父元素和子元素的点击事件

场景&#xff1a; &#xff08;需求1&#xff09;pageA一开始是【默认模式】&#xff0c;点击父元素view&#xff08;包括【搜索】文字&#xff09;&#xff0c;进入【搜索模式】&#xff1b; &#xff08;需求2&#xff09;在pageA中&#xff0c;点击【取消】文字时&#xff…

MySQL入门

MySQL基础 1. 下载MySQL1.1 下载补丁1.2 下载MySQL1.3 确定下载路径1.4 创建配置文件1.5 初始化MySQL 2. 启动MySQL2.1临时启动2.2 制作成Windows服务2.3 连接测试2.4 配置环境变量 3. MySQL指令3.1 连接3.2 设置密码3.3 查看已有的的文件夹&#xff08;数据库&#xff09;3.4 …