Работа с маршрутами

This commit is contained in:
Krivchikov Dmitry 2014-07-02 13:34:31 +04:00
parent f07e03a4a7
commit 908c8dd460
4 changed files with 51 additions and 43 deletions

View File

@ -21,12 +21,14 @@ class IndexController extends Controller
self::addScript('/js/app.js?ver='.App::getConfig('version'));
self::addScript('/js/map.js?ver='.App::getConfig('version'));
self::addScript('/js/leaflet-routing-machine.js');
self::addScript('/js/route.js?ver='.App::getConfig('version'));
self::addStyle('/css/style.css?ver='.App::getConfig('version'));
self::addStyle('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css');
self::addStyle('/css/bootstrap.min.css');
self::addStyle('/css/bootstrap-theme.min.css');
self::addStyle('/css/leaflet-routing-machine.css');
if (!App::$user )
self::addScript('//ulogin.ru/js/ulogin.js');

View File

@ -47,13 +47,14 @@
</span>
</span>
</div>
<div id="boxRoute">
<div id="boxRoute" style="height: 100%; overflow-y: auto;">
<h3>Маршрут</h3>
<div id="wayPoints"></div>
<?php if ($user): ?>
<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload"></span> Сохранить</button>
<?php endif; ?>
<div id="routeDistance"></div>
<button class="btn btn-info" onclick="buildRoute()"><span class="glyphicon glyphicon-send"></span> Проложить</button>
<?php if ($user): ?>
<button class="btn btn-default" onclick="saveRoute()"><span class="glyphicon glyphicon-cloud-upload" title="Сохранить"></span></button>
<?php endif; ?>
</div>
<div id="boxUser">
<a class="btn btn-default" type="button" href="/index/logout"><span class="glyphicon glyphicon-ban-circle"></span> Выйти</a>

View File

@ -55,28 +55,10 @@ function init() {
}
}
else {
myMap._popup._close();
closePopup();
}
});
// points.im = new ymaps.Placemark(
// [ymaps.geolocation.latitude, ymaps.geolocation.longitude],
// {
// balloonContentHeader: 'Вы здесь',
// hintContent: 'Ваше местоположение',
// balloonContent:
// '<button type="button" class="btn btn-default btn-xs" onclick="addToRoute(\'im\')">' +
// '<span class="glyphicon glyphicon-plus"></span> Добавить в маршрут' +
// '</button>'
// },
// {
// iconImageHref: '/ico/man.png',
// iconImageSize: [32, 37],
// iconImageOffset: [-16, -33],
// }
// );
// myMap.geoObjects.add(points.im);
$("#wayPoints").sortable();
$("#wayPoints").disableSelection();
@ -90,6 +72,14 @@ function init() {
return true;
}
ymaps.ready(function(){
points.im = L.marker(
[ymaps.geolocation.latitude, ymaps.geolocation.longitude], {icon: categories.im, title: 'Вы здесь'}
);
points.im.addTo(myMap);
points.im.bindPopup('<b>Ваше местоположение</b><br/><img src="/ico/man.png" /> <button type="button" class="btn btn-default btn-xs" onclick="addToRoute(\'im\')"><span class="glyphicon glyphicon-plus"></span> Добавить в маршрут</button>')
});
/**
* Создаёт точку для карту - Placemark.
* @param {Array} data
@ -212,6 +202,14 @@ function initCategories()
popupAnchor: [0, 1]
});
}
categories.im = L.icon({
iconUrl: '/ico/man.png',
iconSize: [32, 37],
iconAnchor: [16, 37],
popupAnchor: [0, 1]
});
initPoints();
}
});
@ -397,7 +395,7 @@ function editPoint(id)
$('#addPointLat').val(pointsSources[id].lat);
$('#addPointLng').val(pointsSources[id].lng);
myMap._popup._close();
closePopup();
$('#addPointModal').modal('show');
setStatus(statusEdit);
}
@ -419,3 +417,9 @@ function setLayer(name)
$('.layers').removeClass('selected');
$('.'+layer+'Layer').addClass('selected');
}
function closePopup()
{
if (myMap._popup)
myMap._popup._close();
}

View File

@ -1,5 +1,5 @@
/*
* Набор функций для работы с маршрктами.
* Набор функций для работы с маршрутами.
*/
/**
@ -10,29 +10,29 @@ function buildRoute()
{
wayPoints = Array();
if (route)
myMap.geoObjects.remove(route);
myMap.removeLayer(route);
$('#wayPoints div').each(function(i, el)
{
wayPoints.push(points[$(el).attr('pointId')].geometry.getCoordinates());
wayPoints.push({latLng: points[$(el).attr('pointId')]._latlng});
});
ymaps.route(wayPoints, {
mapStateAutoApply: true
}).then(function(newRoute) {
route = newRoute;
route.options.set({
// в балуне выводим только информацию о времени движения с учетом пробок
balloonContenBodyLayout: ymaps.templateLayoutFactory.createClass('$[properties.humanJamsTime]'),
strokeColor: '9000ffff',
opacity: 0.9
if (wayPoints.length > 1)
{
L.Routing.osrm().route(wayPoints, function(err, routes) {
if (err) {
console.error(err);
alert('Произошла ошибка. Вероятно построить маршрут по выбранным точкам невозможно.');
} else {
route = L.Routing.line(routes[0]);
distance = Math.round(routes[0].summary.totalDistance / 1000);
$('#routeDistance').html('Протяженность <b>' + distance + '</b> км.');
route.addTo(myMap);
}
});
myMap.geoObjects.add(route);
distance = Math.round(route.getLength() / 1000);
$('#routeDistance').text(distance + ' км.');
routeToURL();
});
}
}
/**
@ -126,10 +126,11 @@ function deleteRoute(id)
*/
function addToRoute(id)
{
console.log(points[id]);
$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove()">&times;</span> ' + points[id].options.title + '</div>');
myMap._popup._close();
$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove();buildRoute();">&times;</span> ' + points[id].options.title + '</div>');
closePopup();
openBox('Route', true);
buildRoute();
return true;
}