之前的文章讲到了如何构建空间数据库，矢量数据如何入库，如何构建拓扑网络，如何自定义查询函数，如何构建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 > <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 > <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,// '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); } } 总结 以上是内存溢出为你收集整理的基于openlayers的最短路径规划全部内容，希望文章能够帮你解决基于openlayers的最短路径规划所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）