基于PostgreSQL+Geoserver+OpenLayers的Webgis台风路径地图服务发布
基于PostgreSQL+Geoserver+OpenLayers的Webgis台风路径地图服务发布
- 一、实现效果
- 二、环境要求
- 1. PostgreSQL
- 2.GeoServer
- 3.OpenLayers
- 4.Qgis
- 三、数据准备
- 1.底图数据发布
- Geoserver图层发布
- Geoserver图层符号化
- Geoserver图层组发布
- 台风数据
- 2.前端渲染
- OpenLayers调用Geoserver WMS服务
- OpenLayers台风路径可视化
一、实现效果
路径对比图(来源:浙江水利厅http://typhoon.zjwater.gov.cn/default.aspx###):
二、环境要求
1. PostgreSQL
安装了PostgreSQL之后还需要安装对应版本的空间数据存储拓展(Postgis)才能支撑空间数据的管理,安装的流程不再赘述,网上教程大都可行。
2.GeoServer
GeoServer是OpenGIS Web服务器规范的J2EE实现的社区开源项目,利用GeoServer可以方便的发布地图数据,允许用户对特征数据进行更新、删除、插入操作。获得GeoServer服务的最直接的方法在其官网http://geoserver.org/下载zip压缩包,解压后双击bin目录下的startup.bat文件就可以启动(前提需要安装了JDK)。
看到如下图的命令行说明GeoServer启动成功
启动成功后在浏览器输入http://localhost:8080/geoserver/web/即可进入GeoServer地图服务管理界面,点击右上角的登录(默认用户名是admin,密码是geoserver)
3.OpenLayers
OpenLayers使用的是5版本,可以去官网https://openlayers.org/下载压缩包或者直接使用cdn都可以。
4.Qgis
Qgis是跨平台开源的桌面地理信息系统,可以说是目前比较优秀的开源GIS软件,功能强大,基本能够满足要求,使用Qgis的主要原因是利于对底图进行标注,这在第三部分会提到。
三、数据准备
数据准备可以分为两个部分,一个是底图数据,另一个是台风路径数据,底图数据主要包括世界地图、中国行政区划图、九段线、南海诸岛,台风数据主要包括各个时刻台风的经纬度、风力、风速等信息。
1.底图数据发布
底图数据使用的是全国大学生GIS技能大赛试题(台风路径分析)提供的数据,包含了世界地图、中国行政区划、九段线、南海诸岛,这些数据进行了一些处理,原始数据可以在网上下载,处理后的数据上传在csdn底图数据直接下载,可以直接下载。
Geoserver图层发布
数据处理完成后即可使用Gesosever进行地图服务的发布,Geoserver如何发布地图服务可以参考这两位兄弟的教程
geoserver地图发布服务教程(5)—发布postgis数据
搭建简易Web GIS网站:使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
将所有的底图图层都发布之后,可以在图层中看到添加的底图
点击【Layer Preview】可以对发布的图层进行多种预览(OpenLayers、GML、KML等)
Geoserver图层符号化
和实现效果相比较,明显不是我们需要的效果,这就是之前提到的使用Qgis进行地图标注的原因。
Geoserver图层风格支持ZIP和SLD两种格式,推荐使用SLD,更加方便快捷,SLD是风格化图层描述器(Styled Layer Descriptor)的简称,Geoserver支持手写SLD也支持使用工具生成(Qgis就可以做到)。
打开安装好的Qgis(安装教程可以参考这位老哥的Qgis安装教程)将文件加载到Qgis中,右键图层选择【属性】,对【符号化】和【标注】进行设置。
达到想要的效果后,在符号化的左下角点击【样式】下拉框,选择【保存样式】,将其保存为SLD格式
回到geoserver,点击【Styles】->【Add a new Styles】,设置Name、工作区、风格文件格式、图层的类型后选择对应的SLD文件选择上传,进行Validate后没问题选择保存。
注意要素在Qgis中和在PostgreSQL中的属性大小写是否匹配的问题,SLD中必须和PostgreSQL中匹配。
Style没问题后,点击【图层】,单击【Title】下的对应图层,切换到【发布】,将Styles与图层进行关联,选择自定义的符号化样式。
保存后再次预览,已经进行了符号化,其余图层同上。
Geoserver图层组发布
发布图层后只能预览单个图层,而底图是所有图层叠加显示,可以同时调用多个图层进行图层的叠加,更好的办法是使用geoserver的图层组,对多个图层进行叠加组合后以单个服务的形式发布。
单击【图层组】->【添加新的图层组】,对Name、工作区、坐标参考系(ESPG4326)进行设置
然后就可以进行图层的添加,单击【添加图层】,会列出【图层】中可以添加的图层,
分别进行添加,对图层的先后顺序进行设置后就可以保存
在Layer Preview中多了一个图层组,选择open layers预览,达到了我们的预期
台风数据
台风数据使用数据库管理软件直接导入数据库中
2.前端渲染
在html中引入OpenLayers依赖后就可以直接调用WMS服务加载底图并渲染台风路径
OpenLayers调用Geoserver WMS服务
var map = new ol.Map({layers: [new ol.layer.Tile({//调用geoserversource: new ol.source.TileWMS({url: 'http://localhost:8080/geoserver/typhoon/wms',params: { 'LAYERS': 'typhoon:base_map', 'TILED': true },serverType: 'geoserver',crossOrigin: 'anonymous',transition: 0,})})],target: 'map',view: new ol.View({projection: 'EPSG:4326',center: [120, 33],zoom: 4.5,}),controls: [new ol.control.MousePosition()]});
OpenLayers台风路径可视化
台风数据存储在PostgreSQL中,所以还需要从数据库中读取,所以需要一个简单的后端去请求数据库,使用了Ajax异步请求得到数据后再进行渲染。
// 添加一个绘制的线使用的layervar drawLayer = new ol.layer.Vector({//layer所对应的sourcesource: new ol.source.Vector(),})//把layer加入到地图中map.addLayer(drawLayer);$.ajax({type: "get",dataType: "json",url: "http://localhost:8081/api/typhoon/find_typhoon?name=莫兰蒂",contentType: "application/json; charset=utf-8",success: function (result) {for (var i = 0; i < result.data.length; i++) {addPoint(result.data[i].lng, result.data[i].lat);}},error: function () {console.log("请求失败")}})function addPoint(lng, lat) {//创建一个点var point = new ol.Feature({geometry: new ol.geom.Point([lng, lat]),})drawLayer.getSource().addFeatures([point])}
基于PostgreSQL+Geoserver+OpenLayers的Webgis台风路径地图服务发布相关推荐
- 【GeoServer + MapBox-GL 搭建离线矢量切片地图服务】多图详细流程 + 踩过的坑总结
文章目录 前言 Geoserver 安装 前期工作 JDK的安装 安装 GeoServer GeoServer 的使用 进入 GeoServer 界面 使用 GeoServer 发布矢量切片离线地图 ...
- (转)PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示...
http://blog.csdn.net/gisshixisheng/article/details/41575833 标题比较长,主要呢是实现以下几点: 1.将shp数据导入到PostGIS中: 2 ...
- 基于mapbox搭建可离线的矢量切片地图服务-1.开篇(附成果演示地址)
作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...
- 基于ol-plot的openlayers 5 的标绘地图
代码基于以下版本做修改获得,因为公司的原因,并不是用vue.js开发,用的是jquery,别问为什么,问就是公司技术不肯革新,公司小,没成本和人力做新技术的引进和研发. https://github. ...
- 基于mapbox搭建可离线的矢量切片地图服务-3.Mapbox个性化地图定制入门
作者:ATtuing 出处:http://www.cnblogs.com/ATtuing 最近在做关于mapbox的项目,看到这篇文章感觉特别好,特此转载记录一下. 先不说废话直接上地址:(所有东西都 ...
- 多种方式发布WebGIS地图服务以及显示
目录 一.WebGIS基础 1. 什么是WebGIS?(WebGIS的介绍.技术.架构.功能/应用.产品) 2. OGC规范 3. 主流WebGIS架构 4. 主流GIS服务器 4.1 ArcGIS ...
- ol+天地图+geoserver_教程:使用GeoServer发布离线地图服务(WMS)
太乐地图下载器 是一款集地图类数据下载(谷歌/百度/天地图/海图/专题图/E都市等).矢量类数据下载(高程/DEM/等高线/三维地形.兴趣点POI.建筑轮廓.路网/水系/绿地等),地图服务发布.离线地 ...
- geoserver发布地图服务
geoserver发布地图服务 发布wmts服务 发布样式 发布映像服务 发布要素服务 发布wmts服务 新建工作空间 保存后点击工作区 将shp文件上传到服务器 发布geoserver 服务 选择数 ...
- Geoserver+QGIS发布地图服务
发布地图服务(geoserver+QGIS) geoserver发布地图服务 新建工作区:工作区-添加新的工作区-输入工作区名称(例如:test) 数据存储-添加新的数据存储-新建数据源(数据源有很多 ...
- postgis+geoserver+openlayers最短路径分析-学习记录bug
学习postgis+geoserver+openlayers最短路径分析,记录遇到的奇奇怪怪的问题. 主要参考: https://www.cnblogs.com/giser-s/p/11599562. ...
最新文章
- ant java build_Ant--基于java的build工具
- ExpressionFuncT,TResult和FuncT,TResult
- GdiPlus[28]: IGPPen: 建立复合画笔
- 太可怕!儿童智能手表竟成偷窥器,315重锤个人隐私泄露
- 创建自己的github_创建自己的GitHub(kinda)
- Mycat实现Mysql的一主一从和双主双从读写分离
- iOS-----线程同步与线程通信
- 我国网络贸易组织新发展
- 微信小程序跳转至京东店铺首页
- android rxbus github,RxBus的实现及简单使用
- 明尼苏达计算机科学与工程,2019上海软科世界一流学科排名计算机科学与工程专业排名明尼苏达大学双城分校排名第101-150...
- Alex(ALEXANDER的简写,.亚历山大)
- fastboot 不能烧录问题
- C语言如何编程换算小时秒,小时分钟秒的换算(c语言把时间转换成秒)
- php curl添加授权Authorization 验证头
- 低电压的1.8V SDHC 接口静电保护
- hbuilderx运行支付宝小程序
- 详细理解 https 单向认证和双向认证原理
- python sort多条件排序
- 基于STM32的温度控制系统