使用openlayer4 测试（6）

来源：互联网发布：pyqt4安装 linux 编辑：程序博客网时间：2024/06/05 19:41

route.js文件的链接如下 http://download.csdn.net/detail/qq_24591547/9857863

赚个积分

也可以留邮箱发给你

整体实现是左边是固定的起点，然后右边点击某一个建筑物，就是距离其最近的终点，然后连接最短路线（做的时候是在PC端），

最终的导航需要修改

注意：下面sql中的4326是导入到数据库中的srid，如果没有指定，srid为-1；

4326后面的15为误差，根据实际情况调整，

common.js代码如下

window.JSONP = function (url, callback) {    $.ajax({        url: url,        async: false,        dataType: 'jsonp',        jsonpCallback: 'parseResponse',        success: function (result) {            if(!result){                return;            }            var features = result['features'];            if(!features || features.length == 0){                return;            }            features = features[0];            var geometry = features['geometry'];            if(!geometry){                return;            }            var geometryType = geometry['type'];            if(geometryType != "LineString"){                return;            }            var coordinates = geometry['coordinates'];             typeof callback === 'function' && callback(coordinates);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {        }    });    function parseResponse(data){    }};

html代码<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="../style/ol-4.0.1.css">    <script type="text/javascript" src="../js/ol-4.0.1.js"></script>    <script type="text/javascript" src="../js/jquery.js"></script></head><body><div id="map"></div><script type="text/javascript" src="./common.js"></script><script type="text/javascript" src="./route.js"></script><script type="text/javascript" src="./b.js"></script></body></html>b.js代码var format = 'image/png';var bounds = [302.4584581497801, -6756.14603524229,    9873.140925110132, -433.3457709251104];var tiled = new ol.layer.Tile({    source: new ol.source.TileWMS({        url: 'http://localhost:8080/geoserver/mapDemo/wms',        params: {'FORMAT': format,            'VERSION': '1.1.1',            tiled: true,            STYLES: '',            LAYERS: 'mapDemo:map',            tilesOrigin:  302.4584581497801 + "," + -6756.14603524229        }    })});var projection = new ol.proj.Projection({    code: 'EPSG:2023',    units: 'm',    axisOrientation: 'neu',    global: false});var map = new ol.Map({    target: 'map',    layers: [        tiled    ],    view: new ol.View({        projection: projection    })});map.getView().fit(bounds, map.getSize());var route;map.on('singleclick', function(evt) {    var end = evt.coordinate;    console.log(end)    var url = "http://localhost:8080/geoserver/routeDemo/wfs"        +"?service=WFS&VERSION=1.0.0&REQUEST=GetFeature&outputFormat=text/javascript"+        "&typeName=routeDemo:routeDemo";    url += "&viewparams=x1:515.64075658192;y1:-4010.8619138437;x2:"+end[0]+";y2:"+end[1];// url += "&viewparams=x1:121.599366712968;y1:31.2058811358918;x2:121.599363956229;y2:31.2059407120746";    JSONP(url, function (coordinates) {        if(route && route._pathLayer){            map.removeLayer(route._pathLayer);            route.options.path.point=[];        }        route = new Route({            target: map,            path: {                point: coordinates,                pathFeature: {                    type: 'path'                },                pathStyle: {                    stroke: {                        width: 3,                        color: "#fca2ca"                    }                }            },            navData: {                maxDeviate: 0.5,                endMaxDeviate: 0.3            }        });    });});

阅读全文

0 0