之前的文章讲到了如何构建空间数据库，矢量数据如何入库，如何构建拓扑网络，如何自定义查询函数，如何构建wms服务，本文讲解如何基于openlayers晚上最短路径规划功能。
一、基于openlayers3
1.构建网页，这里只是一个简单的网页
<!DOCTYPE html> <html lang='en'> <head> <meta charset='utf-8'/> <title>indoornavigation</title> <script type='text/javascript' src='ol-debug.js'></script> <script type='text/javascript' src='closure/goog/base.js'></script> <script type = 'text/javascript' src='mapinit.js'></script> <script type='text/javascript' src='mapclick.js'></script> </head> <body onload='init();'> <div style="position: absolute; top: 50px; left: 80px; width: 300px; height: 100px;"> <button id="clear">路径清除</button> <div id='map_element' style='width:1800px;height:800px;'></div> </div> </body> </html>
2.初始化函数
var map;
var startPoint;
var destPoint;
var vectorLayer;
function init()
{
//定义地图边界
var extent= [12960129.562300, 4788641.902700, 12986389.084400, 4817845.581900];
var layers=[
new ol.layer.Tile({
source:new ol.source.TileWMS({
url:'http://10.16.35.14:8080/geoserver/tingchechang/wms',
params:{
'LAYERS':'tingchechang:minidata',
'TILED':true
},
serverType:'geoserver'
})
})
];
map=new ol.Map({
layers:layers,
target:'map_element',
view:new ol.View({
projection:new ol.proj.Projection({
code:'EPSG:900913',
units:ol.proj.Units.METERS
}),
center:[12971103,4809571],
extent:extent,
zoom:12
}) ,
controls: ol.control.defaults({
attributionOptions: {
collapsible: false
}
})
});
// The "start" and "destination" features.
startPoint = new ol.Feature();
destPoint = new ol.Feature();
// The vector layer used to display the "start" and "destination" features.
vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [startPoint, destPoint]
}),
style:new ol.style.Style({
image:new ol.style.Icon(({
size:[24,36],
anchor:[0.5,0.75],
anchorXUnits:'fraction',
anchorYUnits:'fraction',
src:'marker.png'
}))
})
});
map.addLayer(vectorLayer);
//添加比例尺，单位m
var scaleLineControl=new ol.control.ScaleLine();
scaleLineControl.setUnits(ol.control.ScaleLineUnits.METRIC);
map.addControl(scaleLineControl);
//缩放工具条
var zoomSilder=new ol.control.ZoomSlider();
map.addControl(zoomSilder);
map.on('click', clickMap);
//清空路径规划结果
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', function(event) {
// Reset the "start" and "destination" features.
startPoint.setGeometry(null);
destPoint.setGeometry(null);
// Remove the result layer.
map.removeLayer(result);
});
}
3.单击添加起点终点marker及路径规划函数
var params = {
LAYERS: 'tingchechang:tingchechang',
FORMAT: 'image/png'
};
var result;
function clickMap(event)
{
if (startPoint.getGeometry() == null) {
// First click.
startPoint.setGeometry(new ol.geom.Point(event.coordinate));console.info(event.coordinate);
} else if (destPoint.getGeometry() == null) {
// Second click.
destPoint.setGeometry(new ol.geom.Point(event.coordinate));
// Transform the coordinates from the map projection (EPSG:3857)
// to the server projection (EPSG:4326).
var startCoord = (startPoint.getGeometry().getCoordinates());
var destCoord = (destPoint.getGeometry().getCoordinates());
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
];
params.viewparams = viewparams.join(';');
result = new ol.layer.Image({
source: new ol.source.ImageWMS({
url:'http://10.16.35.14:8080/geoserver/tingchechang/wms',
params: params
})
});
console.info(result);
map.addLayer(result);
}
}
二、基于openlayers2
1.构建网页
<!DOCTYPE html> <html lang='en' > <head> <meta charset='utf-8'/> <title>Indoor Navigation</title> <script type='text/javascript' src='OpenLayers.js'></script> <script type = 'text/javascript' src='mapinit.js'></script> <script type = 'text/javascript' src='mapClick.js'></script> </head> <body onload='init();'> <div style="position: absolute; top: 50px; left: 80px; width: 300px; height: 100px;"> <button id="clear">路径清除</button> <div id='map_element' style='width:1800px;height:800px;'></div> </div> </body> </html>
2.初始化函数、
var map;
var points,routes;
var startPoint;
var destPoint ;
var map;
var markerLayer;
var icon;
function init() {
//定义地图边界
var bounds= new OpenLayers.Bounds(0.002256,-0.008496,0.008017,-0.000448);
var options = {
projection: "EPSG:4326",
center: new OpenLayers.LonLat(0.005,-0.0002),
};
map = new OpenLayers.Map('map_element',options);
var baseLayer = new OpenLayers.Layer.WMS("OpenLayers WMS",
//geoserver所在服务器地址
'http://10.16.35.14:8080/geoserver/navigation/wms',
{
layers: 'navigation:road'
},
{
minScale: 545000
}
);
map.addLayer(baseLayer);
//添加control空间
// map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.Scale);
map.zoomToExtent(bounds);
// The vector layer used to display the "start" and "destination" features.
markerLayer = new OpenLayers.Layer.Markers("markers");
map.addLayer(markerLayer);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
icon = new OpenLayers.Icon('marker.png',size,offset);
//清空路径规划结果
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', function(event) {
// Reset the "start" and "destination" features.
startPointSet = false;
endPointSet = false;
// Remove the result layer.
markerLayer.removeMarker(startPoint);
markerLayer.removeMarker(destPoint);
startPoint.destroy();
destPoint.destroy();
map.removeLayer(result);
});
map.events.register('click', map, onMapClick);
}
3.单击添加起点终点marker及路径规划函数
var startPointSet = false;
var endPointSet = false;
var startCoord;
var destCoord
var result;
function onMapClick(event)
{
// 显示地图屏幕坐标
if (!startPointSet) {
var lonlat = map.getLonLatFromPixel(event.xy);
startPoint = new OpenLayers.Marker(lonlat);
markerLayer.addMarker(startPoint);
startCoord = new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat);
startPointSet = true;
}
else if (!endPointSet) {
// Second click.
var lonlat = map.getLonLatFromPixel(event.xy);
destPoint = new OpenLayers.Marker(lonlat);
markerLayer.addMarker(destPoint);
destCoord = new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat);
endPointSet = true;
// Transform the coordinates from the map projection (EPSG:3857)
// to the server projection (EPSG:4326).
var viewparams = [
'x1:' + startCoord.x, 'y1:' + startCoord.y,
'x2:' + destCoord.x, 'y2:' + destCoord.y
// 'x1:' + 12952117.2529, 'y1:' + 4836395.5717,
// 'x2:' + 12945377.2585, 'y2:' + 4827305.7549
];
viewparams = viewparams.join(';');
result = new OpenLayers.Layer.WMS("resLayer",
'http://localhost:8080/geoserver/navigation/wms',
{ FORMAT: 'image/png8',
transparent: true,
LAYERS: 'navigation:resRoad',
viewparams:viewparams
},
{isBaseLayer:false,
opacity: 1,
}
);
map.addLayer(result);
}
}
