基于openlayers的最短路径规划

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

转载自:https://blog.csdn.net/longshengguoji/article/details/46350675

You may also like...