之前的文章讲到了如何构建空间数据库，矢量数据如何入库，如何构建拓扑网络，如何自定义查询函数，如何构建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,// '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);
}
}
