接上篇，前面在ArcMap中和Postgis中将数据都已经进行了预处理。

接下来回到Geoserver中，进行数据发布。

1、新建工作区

2、填写完工作区信息

3、打开数据存储，添加新的数据存储

4、新建数据源，选择PostGIS

5、依次填写完如下信息，保存即可

6、添加新图层

7、新建图层，将前面处理好的图层发布，作为底图（这里发布两个图层，一个底图，一个sql图层）

8、底图发布完成后，再新建一个图层，这次选择“配置新的SQL视图”

9、填写完红框信息，保存

sql 视图：
SELECT * FROM pgr_shortestpath(‘zy’, %x1%, %y1%, %x2%, %y2%)
验证的正则表达式：^-?[\d.]+$
类型：LingString
SRID：3857

10、验证，Openlayers调用

改一下调用地址和点击坐标即可

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>网络分析</title>

    <link href="../lib/css/ol.css" rel="stylesheet" type="text/css">

    <style>

        #id {

            width: 1000px;

            height: 1000px;

        }

    </style>

    <script type="text/javascript" src="../lib/ol/ol-debug.js"></script>

</head>

<body>

    <div id="map"></div>

    <script>

        var roadLayer = new ol.layer.Tile({

            source: new ol.source.TileWMS({

                url: 'http://10.19.151.238:8080/geoserver/NA/wms',

                params: { 'LAYERS': 'NA:zy', 'TILED': true },

                serverType: 'geoserver'

            })

        })

        var map = new ol.Map({

            target: document.getElementById("map"),

            layers: [

                roadLayer

            ],

            view: new ol.View({

                center: [12985322, 4799338],

                projection: 'EPSG:3857',

                zoom: 12

            })

        });

        var startCoord = [12991487.849, 4800716.518];

        var destCoord = [12993333.603, 4799171.652];

        var params = {

            LAYERS: 'NA:func_shortestpath',

            FORMAT: 'image/png',

        };

        var viewparams = [

            'x1:' + startCoord[0], 'y1:' + startCoord[],

            'x2:' + destCoord[], 'y2:' + destCoord[]

            //'x1:' + 12952117.2529, 'y1:' + 4836395.5717,

            //'x2:' + 12945377.2585, 'y2:' + 4827305.7549

        ];

        console.log(viewparams);

        params.viewparams = viewparams.join(';');

        result = new ol.layer.Image({

            source: new ol.source.ImageWMS(

                {

                    url: 'http://10.19.151.238:8080/geoserver/NA/wms',

                    params: params

                })

        });

        console.info(result);

        map.addLayer(result);

    </script>

</body>

</html>

11、原理

PostGIS做的网络分析，主要原理在于将数据建立拓扑后，导入到PostGIS数据库

先用pgRouting插件里带有的dijkstra算法接口，找出两点间的最短路径经过的线段，通过截取、拼接的方式美化开始段、结束段，最后用函数的形式封装完，利用Geoserver发布成服务

前端页面用Openlayers调用服务，实现功能展示

12、正式版效果

PostGIS 结合Openlayers以及Geoserver实现最短路径分析（三）的更多相关文章

  1. PostGIS 结合Openlayers以及Geoserver实现最短路径分析（二）

    前文讲述了怎么用ArcMap制作了测试数据,并导入了PostGIS,接下来我们需要结合PgRouting插件,对入库的数据再进行一下处理. 1.在pgAdmin中,执行下面的sql语句 --添加起点字 ...

  2. PostGIS 结合Openlayers以及Geoserver实现最短路径分析（一）

    环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) ##附上本文配套素材下载地址:ht ...

  3. postgresql+postgis+pgrouting实现最短路径查询（2）－－－openlayers＋geoserver实现最短路径

    自己的最短路径实现基本上是按照参考博文的1.2和3进行的,实现的时候也是问题不断,只能是一个一个解决. 问题1:自己发布的geoserver服务无法和OSM底图叠加到一起. 解决:参考博文2提到发布服 ...

  4. Arcgis Engine最短路径分析

    ArcEngine 最短路径分析(源码)   using System; using ESRI.ArcGIS.Carto; using ESRI.ArcGIS.Geometry; using ESRI ...

  5. ArcGIS API for JavaScript 4.2学习笔记[27] 网络分析之最短路径分析【RouteTask类】

    要说网页端最经典的GIS应用,非网络分析莫属了. 什么?你没用过?百度高德谷歌地图的路线分析就是活生生的例子啊!只不过它们是根据大实际背景优化了结果显示而已. 这个例子使用RouteTask进行网络分 ...

  6. arcgis api 3.x for js 入门开发系列十三地图最短路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  7. 以Network Dataset（网络数据集）方式实现的最短路径分析

    转自原文 以Network Dataset(网络数据集)方式实现的最短路径分析 构建网络有两种方式,分别是网络数据集NetworkDataset和几何网络Geometric Network,这个网络结 ...

  8. ArcGIS网络分析之Silverlight客户端路径分析(三)

    原文:ArcGIS网络分析之Silverlight客户端路径分析(三) 首先贴上最终的效果图: a.路径查询 2.最近设施点查询 3.服务区分析 说明: 1.以上的示例使用的数据是随意在ArcMap中 ...

  9. OpenLayers 3+Geoserver+PostGIS实现点击查询

    WebGIS开发中,点击查询是最经常使用的一种查询方式,在ArcGIS api 中.这样的查询叫IdentifyTask,主要作用是前台提交參数.交ArcServer查询分析返回. 本文从开源框架的角 ...

随机推荐

  1. electron开发环境搭建

    开发环境 Node.js Vscode vscode安装Debugger for Chrome 创建开发目录(也是解决方案) 执行初始化命令,创建electronpicture工程,并添加main.j ...

  2. SpringBoot学习（一）基础篇

    目录 关于Springboot Springboot优势 快速入门 关于SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭 ...

  3. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

  4. 关于kaggle注册无法显示人机验证码问题

    最近准备做项目,需要在kaggle上下载数据集,但注册时遇到了无法显示验证图片信息的问题,我也是通过百度最终找到解决方法,所以就准备记录下来啦:下面是解决步骤: step1:下载Google访问助手 ...

  5. 设计模式C++描述----13.代理(Proxy)模式

    一. 举例说明 我们有时打开一个网站时会发现有这样的现象,网站上的文字都显示出来了,但是上面的图片还没显示,要等一会才能显示. 这些未打开的图片的位置上,还是会有图片框和一些等待的信息的,这就是代理模 ...

  6. [UWP]使用PointLight并实现动画效果

    1. Composition Lighting UWP中的Composition Light是一组可以创建3D光照的API,它明明十分好玩而且强大, 但博客园几乎没有相关文章(用UWP或pointli ...

  7. JavaScript数据在内存中储存方式

    详情来源于个本人博客: https://shengchangwei.github.io/al-data/ > Js的数据类型包括两种: 基本数据类型:String.Boolean.Number. ...

  8. 【ARC064-F】【XSY2575】Rotated Palindromes（DP）（字符串）

    Description 然而,由于小C沉迷于制作游戏,他完全忘记了自己作为国家集训队的一员,还有156道作业题等他完成.还有一天作业就要截止了,而他一题还没有做.于是他赶紧挑了一道看起来最简单的题: ...

  9. 学习笔记55_Nhibernate

    另一种ORM框架 1.添加各种dll 2.添加配置信息,根据文档直接复制粘贴.config //一般下载Nhibernate-3.0.0.Alpha2-bin包,会有Configuration_Tem ...

  10. 【长期维护】C++休闲（修仙）躲方块小游戏

    左右键控制小球左右移动,上键加速,Esc退出. 一个‘@’20分 #include <windows.h> #include <bits/stdc++.h> #include ...