Openlayers + Cloudmade routing

Mapserver, GeoServer, MapGuide, Google и другое ПО для веб-картографии
Ответить
dimmer
Новоприбывший
Сообщения: 14
Зарегистрирован: 02 окт 2011, 20:22
Репутация: 0

Openlayers + Cloudmade routing

Сообщение dimmer »

На Cloudmade есть пример роутинга и OL http://developers.cloudmade.com/wiki/op ... de_Routing . Тут как это выглядит.

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>Using CloudMade Routing with OpenLayers</title>
	<link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css" />
</head>
<body>	
	<div id="map" style="width: 600px; height: 600px;"></div>
	
	<script type="text/javascript" src="openlayers/OpenLayers.js"></script>
	<script type="text/javascript" src="cloudmade.js"></script>
	
	<script type="text/javascript">
		var map = new OpenLayers.Map("map", {
	      controls: [
	         new OpenLayers.Control.Navigation(),
	         new OpenLayers.Control.PanZoomBar(),
	         new OpenLayers.Control.ScaleLine(),
			 new OpenLayers.Control.Attribution(),
			 new OpenLayers.Control.LayerSwitcher()
	      ]
	    });
		
		var cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {
			key: 'BC9A493B41014CAABB98F0471D759707'
		});
		map.addLayer(cloudmade);

		var epsg4326 = new OpenLayers.Projection("EPSG:4326");
		var center = new OpenLayers.LonLat(-0.1385, 51.518).transform(epsg4326, map.getProjectionObject());
		map.setCenter(center, 15);
		
		
		var from = new OpenLayers.LonLat(-0.14849, 51.52039);
		var to = new OpenLayers.LonLat(-0.131, 51.51083);
		
		
		var vectors = new OpenLayers.Layer.Vector("Vectors");
		map.addLayer(vectors);
		
		function addScript(url) {
			var script = document.createElement('script');
			script.type = 'text/javascript';
			script.src = url;
			document.getElementsByTagName('head')[0].appendChild(script);
		}
		
		function getRoute(response) {
			var points = [];
			for (var i = 0; i < response.route_geometry.length; i++) {
				var point = new OpenLayers.Geometry.Point(
						response.route_geometry[i][1], 
						response.route_geometry[i][0]);
				points.push(point.transform(epsg4326, map.getProjectionObject()));
			}
			var geometry = new OpenLayers.Geometry.LineString(points);
			var feature = new OpenLayers.Feature.Vector(geometry, null, {
				strokeColor: "#0033ff",
				strokeOpacity: 0.7,
				strokeWidth: 5
			});
			vectors.addFeatures(feature);
		}
		
		addScript('http://routes.cloudmade.com/BC9A493B41014CAABB98F0471D759707/api/0.3/' +
				from.lat + ',' + from.lon + ',' + to.lat + ',' + to.lon + 
				'/car.js?callback=getRoute');
				
				
		var markers = new OpenLayers.Layer.Markers("Markers");
		map.addLayer(markers);
		
		markers.addMarker(new OpenLayers.Marker(
				from.clone().transform(epsg4326, map.getProjectionObject())));
		markers.addMarker(new OpenLayers.Marker(
				to.clone().transform(epsg4326, map.getProjectionObject())));
	</script>
</body>
</html>
Подскажите как сделать, чтобы координаты в var from и var to подставлялись после клика по карте? Например, кликнул 1 раз - записались координат var from, кликнул 2-ой раз - заполнилось - var to, построился маршрут. Чую, что надо скрестить с этим примером, но не знаю как.
Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение Denis Rykov »

Здравствуйте. Набросал на скорую руку, думаю идея понятна:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Using CloudMade Routing with OpenLayers</title>
</head>
<body>
<div id="map" style="width: 600px; height: 600px;"></div>
<script type="text/javascript" src="http://sandbox.wrkng.net/cloudmade/open ... "></script>
<!--<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>-->
<script type="text/javascript" src="http://sandbox.wrkng.net/cloudmade/clou ... "></script>
<script>
var map = new OpenLayers.Map("map"),
i = 1,
from,
to,
frommarker,
tomarker,
vectors,
markers,
cloudmade,
epsg4326,
center;

function addScript (url) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}

function getRoute (response) {
var point,
geometry,
feature,
points = [];
for (var i = 0; i < response.route_geometry.length; i++) {
point = new OpenLayers.Geometry.Point(response.route_geometry[1], response.route_geometry[0]);
points.push(point.transform(epsg4326, map.getProjectionObject()));
}
geometry = new OpenLayers.Geometry.LineString(points);
feature = new OpenLayers.Feature.Vector(geometry, null, {
strokeColor: "#0033ff",
strokeOpacity: 0.7,
strokeWidth: 5
});
vectors.addFeatures(feature);
}

cloudmade = new OpenLayers.Layer.CloudMade("CloudMade", {key: 'BC9A493B41014CAABB98F0471D759707'});
vectors = new OpenLayers.Layer.Vector("Vectors");
markers = new OpenLayers.Layer.Markers("Markers");

map.addLayers([cloudmade, vectors, markers]);

map.events.register("click", map , function(e){
switch (i) {
case 1: from = map.getLonLatFromViewPortPx(e.xy).transform(map.getProjectionObject(), epsg4326);
frommarker ? markers.removeMarker(frommarker) : null;
tomarker ? markers.removeMarker(tomarker) : null;
frommarker = new OpenLayers.Marker(from.clone().transform(epsg4326, map.getProjectionObject()));
markers.addMarker(frommarker);
break;
case 2: to = map.getLonLatFromViewPortPx(e.xy).transform(map.getProjectionObject(), epsg4326);
tomarker = new OpenLayers.Marker(to.clone().transform(epsg4326, map.getProjectionObject()));
markers.addMarker(tomarker);
break;
}
i +=1;
if (i == 3) {
vectors.features.length ? vectors.removeFeatures(vectors.features) : null;
addScript('http://routes.cloudmade.com/BC9A493B410 ... 7/api/0.3/' + from.lat + ',' + from.lon + ',' + to.lat + ',' + to.lon + '/car.js?callback=getRoute');
i = 1;
}
});

epsg4326 = new OpenLayers.Projection("EPSG:4326");
var center = new OpenLayers.LonLat(-0.1385, 51.518).transform(epsg4326, map.getProjectionObject());
map.setCenter(center, 15);
</script>
</body>
</html>

Демо здесь.
Spatial is now, more than ever, just another column- The Geometry Column.
dimmer
Новоприбывший
Сообщения: 14
Зарегистрирован: 02 окт 2011, 20:22
Репутация: 0

Re: Openlayers + Cloudmade routing

Сообщение dimmer »

Спасибо, работает. Но почему-то при клике маркеры появляются не под курсором, а в 2-3см от него и линия маршрута не совпадает с дорогами, а проходит параллельно со смещением.
Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение Denis Rykov »

Исправлено.
Spatial is now, more than ever, just another column- The Geometry Column.
dimmer
Новоприбывший
Сообщения: 14
Зарегистрирован: 02 окт 2011, 20:22
Репутация: 0

Re: Openlayers + Cloudmade routing

Сообщение dimmer »

Спасибо, то что надо.
Аватара пользователя
dobeer
Активный участник
Сообщения: 199
Зарегистрирован: 25 дек 2009, 21:54
Репутация: 1
Откуда: Чита
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение dobeer »

Я чуть не прослизился когда по моей карте проложил маршрут :mrgreen: Скажите, cloudmade использует граф ОСМ или чейто другой? Возможно ли ему подсунуть свой?
Аватара пользователя
Максим Дубинин
MindingMyOwnBusiness
Сообщения: 9129
Зарегистрирован: 06 окт 2003, 20:20
Репутация: 748
Ваше звание: NextGIS
Откуда: Москва
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение Максим Дубинин »

а кто еще вот так вот свой граф отдаст, кроме ОСМ?
пристегивайтесь, турбулентность прямо по курсу
dimmer
Новоприбывший
Сообщения: 14
Зарегистрирован: 02 окт 2011, 20:22
Репутация: 0

Re: Openlayers + Cloudmade routing

Сообщение dimmer »

Пытаюсь соединить этот пример с другими и заметил, что в примере прописано http://sandbox.wrkng.net/cloudmade/open ... nLayers.js, а если заменить на http://openlayers.org/dev/OpenLayers.js, то маршрут не совпадает с дорогой. Но если я оставляю первый вариант, у меня не работает все остальное. Пытался сравнить 2 файла, но там почти 400kb разницы. Подскажите, что нужно подправить в текущей версии OpenLayers.js, чтобы все заработало?
Аватара пользователя
dobeer
Активный участник
Сообщения: 199
Зарегистрирован: 25 дек 2009, 21:54
Репутация: 1
Откуда: Чита
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение dobeer »

А с какой дорогой у вас не совпадает маршрут, с дорогой из ОСМ?
dimmer
Новоприбывший
Сообщения: 14
Зарегистрирован: 02 окт 2011, 20:22
Репутация: 0

Re: Openlayers + Cloudmade routing

Сообщение dimmer »

Изображение
Прокладывает по синей линии, а правильно по красной. Если прописать http://sandbox.wrkng.net/cloudmade/open ... nLayers.js, то все OK.
Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение Denis Rykov »

Что-то не так с кастомным слоем OpenLayers.Layer.CloudMade, почему-то при работе с новой версией OL наблюдается смещение тайлов, поэтому такое расхождение. Отключил этот слой, вместо него воспользовался стандартным OpenLayers.Layer.OSM, никаких проблем не возникает. Пример обновил.
UPD. Нашёл соответствующий тикет в трекере Cloudmade: #985
Spatial is now, more than ever, just another column- The Geometry Column.
Аватара пользователя
Denis Rykov
Гуру
Сообщения: 3376
Зарегистрирован: 11 апр 2008, 21:09
Репутация: 529
Ваше звание: Author
Контактная информация:

Re: Openlayers + Cloudmade routing

Сообщение Denis Rykov »

Сегодня всплыл подобный вопрос на stackoverflow.com. Решил еще раз глянуть в чем же там проблема и спешу сообщить - решение найдено: в определении класса OpenLayers.Layer.CloudMade нужно заменить OpenLayers.Layer.TMS на OpenLayers.Layer.XYZ.
Spatial is now, more than ever, just another column- The Geometry Column.
Ответить

Вернуться в «Веб-картография»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость