Работа с маршрутами
This commit is contained in:
parent
f07e03a4a7
commit
908c8dd460
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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()">×</span> ' + points[id].options.title + '</div>');
|
||||
myMap._popup._close();
|
||||
$('#wayPoints').append('<div pointid="' + id + '" class="wayPoint"><span onclick="$(this).parent().remove();buildRoute();">×</span> ' + points[id].options.title + '</div>');
|
||||
closePopup();
|
||||
openBox('Route', true);
|
||||
|
||||
buildRoute();
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue