基于PostGIS+PgRouting的最短路径查询的实现(三):Openlayers篇

上一篇 完成了最短路径服务发布,接下来记录下Openlayers中如何使用该服务。
其实这个服务同其他的Geoserver图层类似,只不过多带了两个参数。在请求地图服务时,只要把这两个参数传入即可。可以使用WMS服务直接加载图片来展示结果,也可以使用WFS服务,把数据取出来再进行渲染。
以下介绍在Openlayers中如何进行传参调用,示例使用Openlayers4版本。

WMS方式加载

var tileLayer,tileSource;
function getRoutingByWMS(fromID,toID){
    tileSource = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/shandong/wms",
        params:{
            'LAYERS': "shandong:road",
            'TILED': true,
            'viewparams':'from:' + fromID + ';to:' + toID
        },
        transition: 0 
    });
    tileLayer = new ol.layer.Tile({
        source: tileSource
    })
    map.addLayer(tileLayer);
}

WMS方式只适合将结果展示到地图上。通常路径查询,想要的不仅仅是展示一根线,而是希望能有更多的数据操作。因此,推荐使用WFS方式取到数据,使操作更加灵活。

WFS方式加载

var routeSource = new ol.source.Vector();
var routeLayer = new ol.layer.Vector({
    source: routeSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ff00ff',
            width: 2
        })
    }),
    name: 'route'
});
function getRoutingByWFS(fromID,toID){
    var request = new ol.format.WFS().writeGetFeature({
        srcName: 'EPSG:4326',//坐标系
        featureNS: 'http://localhost:8080/geoserver/shandong/wfs',        //服务地址
        featureTypes: ['shandong:road'],//图层
        outputFormat: 'application/json',//返回数据格式
        params: {
            viewparams: 'from:' + fromID + ';to:' + toID//视图参数
        }
    });

    fetch('http://localhost:8080/geoserver/shandong/wfs', {
        method: 'POST',
        body: new XMLSerializer().serializeToString(request)
    }).then(function(response) {
        return response.json();
    }).then(function(json) {
        var features = new ol.format.GeoJSON().readFeatures(json);
        routeSource.addFeatures(features);
    });
}

在有的项目中,为了兼容古董浏览器,不支持fetch,因此,上面的方法需要调整。可以改用Ajax来进行

function getRoutingByAjax(fromID,toID) {
    var data = {
        'service': 'wfs',
        'version': '1.0.0',
        'request': 'GetFeature',
        'typeName': 'shandong:road',
        'outputFormat': 'application/json',
        'viewparams': 'from:' + fromID+ ';to:' + toID
    };

    $.ajax({
        type: "POST",
        url: "http://localhost:8080/geoserver/shandong/wfs",
        data: data
    }).then(function(response){
        var features = new ol.format.GeoJSON().readFeatures(response);
        routeSource.addFeatures(features);
    })
}

完整代码:
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/ol4/v4.6.5-dist/ol.css" rel="stylesheet">
    <script src="/jquery-2.0.0/jquery.min.js"></script>
    <script src="/ol4/v4.6.5-dist/ol.js"></script>
    <style>
        html,body,#map{
            width: 100%;
            height: 600px;
            border: 0ch;
            background-color:#151515
        }
    </style>
</head>
<body>
    <div>
        <input type="number" id = "fromInput">
        <input type="number" id = "toInput">
        <button type="button" id="add">路径查询</button>
    </div>
    <div id = 'map'></div>
    <script src="/js/ol4/get-routing.js"></script>
    <script>
        $(document).ready(function(){
            initMap();           
        });
        $('#add').click(function(){
            var from = $("#fromInput").val();
            var to = $("#toInput").val();
            getRoutingByWMS(from,to);
        });       
    </script>
</body>
</html>


get-routing.js


var map;
/**
 * 地图初始化
 */
function initMap() {
    baseLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: "http://localhost:8080/geoserver/shandong/wms",
            params:{
                'LAYERS': "shandong:basemap",
                'TILED': true
            },
            transition: 0 
        })
    });

    var view = new ol.View({
        center: [116.7,34.8],
        zoom: 8,
        minZoom:7,
        maxZoom:15,
        projection: "EPSG:4326"
    });

    map = new ol.Map({
        target: 'map',
        view: view,
        layers: [baseLayer]
    });  
}

var tileLayer,tileSource;
/**
 * 使用WMS方式进行路径查询
 * @param {*} fromID 起点id
 * @param {*} toID 终点id
 */
function getRoutingByWMS(fromID,toID){
    tileSource = new ol.source.TileWMS({
        url: "http://localhost:8080/geoserver/shandong/wms",
        params:{
            'LAYERS': "shandong:road",
            'TILED': true,
            'viewparams':'from:' + fromID + ';to:' + toID
        },
        transition: 0 
    });
    tileLayer = new ol.layer.Tile({
        source: tileSource
    })
    map.addLayer(tileLayer);
}

var routeSource = new ol.source.Vector();
var routeLayer = new ol.layer.Vector({
    source: routeSource,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ff00ff',
            width: 2
        })
    }),
    name: 'route'
});

/**
 * 使用WFS方式进行路径查询
 * @param {int} fromID 起点id
 * @param {int} toID 终点id
 */
function getRoutingByWFS(fromID,toID){
    clearLayer();
    var request = new ol.format.WFS().writeGetFeature({
        srcName: 'EPSG:4326',
        featureNS: 'http://localhost:8080/geoserver/shandong/wfs',
        featureTypes: ['shandong:road'],
        outputFormat: 'application/json',
        params: {
            viewparams: 'from:' + fromID + ';to:' + toID
        }
    });

    fetch('http://localhost:8080/geoserver/shandong/wfs', {
        method: 'POST',
        body: new XMLSerializer().serializeToString(request)
    }).then(function(response) {
        return response.json();
    }).then(function(json) {
        var features = new ol.format.GeoJSON().readFeatures(json);
        routeSource.addFeatures(features);
    });
}

/**
 * 使用ajax方式进行路径查询
 * @param {*} fromID 起点id
 * @param {*} toID 终点id
 */
function getRoutingByAjax(fromID,toID) {
    clearLayer();
    var data = {
        'service': 'wfs',
        'version': '1.0.0',
        'request': 'GetFeature',
        'typeName': 'shandong:road',
        'outputFormat': 'application/json',
        'viewparams': 'from:' + fromID+ ';to:' + toID
    };

    $.ajax({
        type: "POST",
        url: "http://localhost:8080/geoserver/shandong/wfs",
        data: data
    }).then(function(response){
        var features = new ol.format.GeoJSON().readFeatures(response);
        routeSource.addFeatures(features);
    })
}

function clearLayer(){
    map.removeLayer(routeLayer); 
    map.addLayer(routeLayer);
    routeSource.clear();
}

结果截图

openlayers 路径查询

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

此爱如少年

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值