使用openlayer4 測試（6）
阿新 • • 發佈：2018-12-06
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 } }); }); });
