首页 > 专利学习

基于openlayers的最短路径规划

之前的⽂章讲到了如何构建空间数据库，⽮量数据如何⼊库，如何构建拓扑⽹络，如何⾃定义查询函数，如何构建wms服务，本⽂讲解如何基于openlayers晚上最短路径规划功能。

⼀、基于openlayers3

1.构建⽹页，这⾥只是⼀个简单的⽹页

<!DOCTYPE html>

<head>

<title>indoornavigation</title>

</head>

<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:'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=l.ScaleLine();

scaleLineControl.l.ScaleLineUnits.METRIC); map.addControl(scaleLineControl);

//缩放⼯具条

var zoomSilder=l.ZoomSlider();

map.addControl(zoomSilder);

<('click', clickMap);

//清空路径规划结果

var clearButton = ElementById('clear');

clearButton.addEventListener('click', function(event) {

// Reset the "start" and "destination" features.

startPoint.setGeometry(null);

destPoint.setGeometry(null);

// Remove the result layer.

});

}

3.单击添加起点终点marker及路径规划函数

var params = {

LAYERS: 'tingchechang:tingchechang',

FORMAT: 'image/png'

};

var result;

function clickMap(event)

{

if (Geometry() == null) {

// First click.

startPoint.setGeometry(dinate));console.dinate); } else if (Geometry() == null) {

// Second click.

destPoint.setGeometry(dinate));

// Transform the coordinates from the map projection (EPSG:3857)

// to the server projection (EPSG:4326).

var startCoord = (Geometry().getCoordinates());

var destCoord = (Geometry().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:'10.16.35.14:8080/geoserver/tingchechang/wms',

params: params

})

});

console.info(result);

map.addLayer(result);

}

⼆、基于openlayers2

1.构建⽹页

<!DOCTYPE html>

<head>

<title>Indoor Navigation</title>

</head>

<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所在服务器地址

'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);

// 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 = ElementById('clear');砂浆机

clearButton.addEventListener('click', function(event) {

// Reset the "start" and "destination" features.

startPointSet = false;

endPointSet = false;

// Remove the result layer.

startPoint.destroy();

destPoint.destroy();

});

ister('click', map, onMapClick);

}

3.单击添加起点终点marker及路径规划函数

本文发布于:2024-09-24 20:19:35，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/1/311770.html

上一篇：基于Q-Learning算法的机器人路径规划

下一篇：物流管理中的路径规划与优化技术研究

标签：路径构建规划

留言与评论（共有 0 条评论）