Брал из примера просчет по полигону МКАДА https://yandex.ru/dev/maps/jsbox/2.1/route_inside_polygon, написал код для просчета стоимости доставки, но столкнулся с тем, что при удаление старого маршрута все подвисает, на слабых компьютерах умирает на минуту. Набросал примерный код чтобы не читать то что внизу вставил https://jsfiddle.net/rno7jvk3/ тут а удалю все и заново добавляю, пробовал делать ссылки на маршрут и коллекцию объектов и удалить только их, быстрее не стало. Итоговый код в раза 2-3 медленнее удаляет чем в примере выше, просто все подвисает из-за этого.
Вот такое написал в итоге, удаляет очень медленно прошлый маршрут
ymaps.ready(init);
function init() {
// Стоимость за километр.
var DELIVERY_TARIFF = 80,
// Минимальная стоимость.
MINIMUM_COST = 100,
myMap = new ymaps.Map('map', {
center: [55.755811, 37.617617],
zoom: 10,
controls: []
}),
myRoute,myRouteObj,
// Создадим панель маршрутизации.
// routePanelControl = new ymaps.control.RoutePanel({
// // options: {
// // // Добавим заголовок панели.
// // showHeader: true,
// // title: 'Расчёт доставки',
// // autofocus: false
// // }
// }),
zoomControl = new ymaps.control.ZoomControl({
options: {
size: 'small',
float: 'none',
position: {
bottom: 145,
right: 10
}
}
});
const dropdown = document.querySelector('.calcDeliveryElem .dropdown');
dropdown.addEventListener('click', (e) => {
let open = false;
if(e.target && !open) {
dropdown.querySelector('.dropdown-menu').style.display = 'block';
open = true;
} else {
dropdown.querySelector('.dropdown-menu').style.display = 'none';
}
if(e.target && e.target.classList.contains('dropdown-item')) {
dropdown.querySelector('.dropdown-menu').style.display = 'none';
dropdown.querySelector('.dropdown-toggle span').textContent = e.target.textContent;
routePanelControl.routePanel.state.set("from",e.target.textContent);
}
});
const address = document.querySelector('#address');
// address.addEventListener('change', () => {
// setTimeout(()=>{
// // routePanelControl.routePanel.state.set("to",address.value);
// console.log(address.value);
//
//
// }, 500);
// })
const btnResult = document.querySelector('#begin_raschet');
if(btnResult) {
btnResult.addEventListener('click', function () {
try {
if(myRouteObj && myRoute) {
// myRouteObj.removeFromMap(myMap);
// myRouteObj.removeFrom(myMap.geoObjects);
// myMap.geoObjects.remove(myRoute);
// myMap.geoObjects.remove(myRouteObj);
// console.log(myRouteObj);
myMap.geoObjects.removeAll();
jQuery.ajax({
url: 'https://pr-metall.ru/wp-content/themes/storefront-child/js/moscow.json',
dataType: 'json',
success: onPolygonLoad
});
}
checkadres(address.value);
} catch (e) {
console.log(e);
}
});
};
myMap.controls.add(zoomControl);
let suggestView1 = new ymaps.SuggestView('address');
function onPolygonLoad (json) {
moscowPolygon = new ymaps.Polygon(json.coordinates, {
hintContent: "Москва",
name:'z_mmk'
}, {
fillColor: '#5391AE',
interactivityModel: 'default#transparent',
strokeWidth: 8,
opacity: 0.3
});
// Если мы не хотим, чтобы контур был виден, зададим соответствующую опцию.
// moscowPolygon.options.set(options);
// Чтобы корректно осуществлялись геометрические операции
// над спроецированным многоугольником, его нужно добавить на карту.
myMap.geoObjects.add(moscowPolygon);
}
jQuery.ajax({
url: 'https://pr-metall.ru/wp-content/themes/storefront-child/js/moscow.json',
dataType: 'json',
success: onPolygonLoad
});
function checkadres(addr){
var myGeocoder;
try {
myGeocoder = ymaps.geocode(
addr, {
results: 1
}
);
} catch (e) {
console.log(e);
}
myGeocoder.then(
function (res) {
if (res.geoObjects.getLength()) {
var point = res.geoObjects.get(0);
// console.log(point.geometry);
var coords=point.geometry._coordinates;
// console.log(coords);
// myMap.geoObjects.remove(myRoute);
// myRouteObj.removeFromMap(myMap);
document.querySelector('#res_raschet').textContent = 0;
setTimeout(()=>{
try {
marsh([55.755811, 37.617617],coords);
} catch (e) {
console.log(e);
}
}, 1500);
} else {
alert("Адрес не удалось определить");
}
} ,
function (error) {
alert("Возникла ошибка: " + error.message);
}
);
}
function marsh(coord1, coord2) {
// console.log([coord1, coord2]);
// console.log(myMap.geoObjects.revoveAll());
try {
ymaps.route([coord1, coord2]).then( // ,{mapStateAutoApply: true, boundsAutoApply: true}
function (res) {
// myMap.geoObjects.each(function (item) {
// myMap.geoObjects.remove(item);
// })
// myMap.setZoom(myMap.getZoom()-1);
myMap.setCenter(res.getWayPoints().get(1).geometry.getCoordinates(), 10, {duration: 300});
var yandexWayPoint = res.getWayPoints().get(1);
myMap.geoObjects.add(myRoute = res);
// console.log(res);
// console.log(res.getPaths());
// Объединим в выборку все сегменты маршрута.
var pathsObjects = ymaps.geoQuery(res.getPaths()),
edges = [];
// console.log(ymaps.geoQuery(res.getPaths()));
// // Переберем все сегменты и разобьем их на отрезки.
pathsObjects.each(function (path) {
// console.log(path)
var coordinates = path.geometry.getCoordinates();
for (var i = 1, l = coordinates.length; i < l; i++) {
edges.push({
type: 'LineString',
coordinates: [coordinates[i], coordinates[i - 1]]
});
}
});
// console.log(edges);
// Создадим новую выборку, содержащую:
// - отрезки, описываюшие маршрут;
// - начальную и конечную точки;
// - промежуточные точки.
var routeObjects = ymaps.geoQuery(edges)
.add(res.getWayPoints())
.add(res.getViaPoints())
.setOptions('strokeWidth', 3)
.addToMap(myMap);
myRouteObj = routeObjects;
// Найдем все объекты, попадающие внутрь МКАД.
let objectsInMoscow = routeObjects.searchInside(moscowPolygon),
// Найдем объекты, пересекающие МКАД.
boundaryObjects = routeObjects.searchIntersect(moscowPolygon);
// Раскрасим в разные цвета объекты внутри, снаружи и пересекающие МКАД.
boundaryObjects.setOptions({
strokeColor: '#06ff00',
preset: 'islands#greenIcon'
});
objectsInMoscow.setOptions({
strokeColor: '#ff0005',
preset: 'islands#redCircleDotIcon'
});
// Объекты за пределами МКАД получим исключением полученных выборок из
// исходной.
let dist = 0, km;
routeObjects.remove(objectsInMoscow).remove(boundaryObjects).each(function(path) {
try {if(path.geometry && path.geometry.getDistance()) {
dist += path.geometry.getDistance();
}} catch (e) {}});
const priceMsc = document.querySelector('input[name="machine"]:checked').dataset.md;
const priceKm = document.querySelector('input[name="machine"]:checked').dataset.km;
// console.log(priceMsc, priceKm);
if(dist > 0) {
km = (Math.round(dist / 1000) + 2);
dist = (Math.round(dist / 1000) + 2) * +priceKm;
} else {
dist = 0;
km = 0;
}
let price = +dist + +priceMsc;
// console.log(dist, price);
document.querySelector('#res_raschet').textContent = price;
if(km > 0) {
yandexWayPoint.options.set({
preset: "islands#blueStretchyIcon",
iconContentLayout: ymaps.templateLayoutFactory.createClass(
`${km} км (${price} руб.)`
)
});
} else {
yandexWayPoint.options.set({
preset: "islands#blueStretchyIcon",
iconContentLayout: ymaps.templateLayoutFactory.createClass(
`${price} руб.`
)
});
}
}
);
} catch (e) {
console.log(e);
}
}
}