PostGIS 結合Openlayers以及Geoserver實現最短路徑分析(三)


接上篇,前面在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[1],
            'x2:' + destCoord[0], 'y2:' + destCoord[1]
            //'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、正式版效果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM