Выбор выбранной точки в качестве конечной точки маршрута в OSM
Я действительно новичок в OSM. Я хотел бы задать вопрос, учитывая мой код там. В настоящее время мой код делает работу между двумя точками. И начальная точка выбирается геолокацией, а конечную точку я записал вручную как lonFinal, latFinal. То, что я хотел бы сделать, это сделать маршрут между точкой, выбранной geolaciton(уже сделано), и выбранной точкой на карте. На самом деле вопрос в том, как я выбрал точку щелчка в качестве конечной точки. Заранее спасибо.
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html>
<head>
<meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
<meta lang="de">
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script >
var map;
function init() {
var proj = new OpenLayers.Projection("EPSG:4326");
var mapproj = new OpenLayers.Projection("EPSG:3857");
var bounds = new OpenLayers.Bounds(
16.1536311, 48.106509,16.6148645, 48.3433243
).transform(proj, mapproj);
var options = {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Scale(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.MousePosition(),
],
maxExtent: bounds,
projection: new OpenLayers.Projection("EPSG:3857")
};
map = new OpenLayers.Map("map", options);
var osmBaseLayer = new OpenLayers.Layer.OSM();
map.addLayer(osmBaseLayer);
var lonStart = 16.36864;
var latStart = 48.19779;
var lonFinal = 16.36893;
var latFinal = 48.19638;
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}else{
alert("Geolocation is not supported by this browser.");
}
var lonStart = 16.36864;
var latStart = 48.19779;
var lonFinal = 16.36893;
var latFinal = 48.19638;
var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
proj, map.getProjectionObject());
map.setCenter(startCoord, 14);
};
function showPosition(position)
{
var lonFinal = 16.36759;
var latFinal = 48.19629;
lonStart=position.coords.longitude;
latStart=position.coords.latitude;
var Style = {strokeColor: "red", strokeWidth:4}
var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
{projection: new OpenLayers.Projection("EPSG:4326"),
style: Style,
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.HTTP({
url:"http://localhost/geoinfo/pgrouting.php",
params: {'lonStart': lonStart,
'latStart': latStart,
'lonEnd': lonFinal,
'latEnd': latFinal},
format: new OpenLayers.Format.GeoJSON()
})
});
map.addLayer(vector_layer);
var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
{projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.HTTP({
url:"http://localhost/geoinfo/kaiser.php",
format: new OpenLayers.Format.GeoJSON()
}),
fillColor: 'green',
strokeColor: 'green',
strokeWidth: 10});
map.addLayer(vector_layer);
}
</script>
</head>
<body onload="init();">
<div id="map" class='divMap'></div>
</body>
</html>
1 ответ
Я заставил это работать! Вот это код.
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -->
<html>
<head>
<meta http-equiv="content-type" content="TEXT/HTML; CHARSET=UTF-8">
<meta lang="de">
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script >
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{ defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false },
initialize: function(options)
{ this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions );
OpenLayers.Control.prototype.initialize.apply( this, arguments );
this.handler = new OpenLayers.Handler.Click( this, { 'click': this.trigger },
this.handlerOptions ); }, trigger: function(e) {
var lonlat = map.getLonLatFromPixel(e.xy);
alert("The progress will take some seconds" );
var endpoint = new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(map.getProjectionObject(),proj);
calculateRoute(endpoint);
}
});
var map;
var lonStart = 16.36864;
var latStart = 48.19779;
var lonFinal = 16.36893;
var latFinal = 48.19638;
var proj = new OpenLayers.Projection("EPSG:4326");
var mapproj = new OpenLayers.Projection("EPSG:3857");
function init() {
var bounds = new OpenLayers.Bounds(
16.1536311, 48.106509,16.6148645, 48.3433243
).transform(proj, mapproj);
var options = {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.KeyboardDefaults(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Scale(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Click(),
],
maxExtent: bounds,
projection: new OpenLayers.Projection("EPSG:3857")
};
map = new OpenLayers.Map("map", options);
var osmBaseLayer = new OpenLayers.Layer.OSM();
map.addLayer(osmBaseLayer);
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
lonStart = 16.36864;
latStart = 48.19779;
lonFinal = 16.36893;
latFinal = 48.19638;
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(setmylocation);
}else{
alert("Geolocation is not supported by this browser.");
}
lonStart = 16.36864;
latStart = 48.19779;
lonFinal = 16.36893;
latFinal = 48.19638;
var startCoord = new OpenLayers.LonLat(lonStart,latStart).transform(
proj, map.getProjectionObject());
map.setCenter(startCoord, 14);
var vector_layer= new OpenLayers.Layer.Vector("Kaiserstrasse",
{projection: new OpenLayers.Projection("EPSG:4326"),
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.HTTP({
url:"http://localhost/geoinfo/kaiser.php",
format: new OpenLayers.Format.GeoJSON()
}),
fillColor: 'green',
strokeColor: 'green',
strokeWidth: 10});
map.addLayer(vector_layer);
};
function setmylocation(position)
{
lonStart=position.coords.longitude;
latStart=position.coords.latitude;
}
function calculateRoute(endposition)
{
lonFinal=endposition.lon;
latFinal=endposition.lat;
var Style = {strokeColor: "red", strokeWidth:4}
var vector_layer= new OpenLayers.Layer.Vector("pgrouting",
{projection: new OpenLayers.Projection("EPSG:4326"),
style: Style,
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.HTTP({
url:"http://localhost/geoinfo/pgrouting.php",
params: {'lonStart': lonStart,
'latStart': latStart,
'lonEnd': lonFinal,
'latEnd': latFinal},
format: new OpenLayers.Format.GeoJSON()
})
});
map.addLayer(vector_layer);
}
</script>
</head>
<body onload="init();">
<div id="map" class='divMap'></div>
</body>
</html>