版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_24591547/article/details/72833808
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
}
});
});
});