基于openlayers的最短路径规划

来源：互联网发布：98印尼排华知乎编辑：程序博客网时间：2024/05/17 04:21

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

3 0