0

Брал из примера просчет по полигону МКАДА 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);
        }

    }

}

1 ответ 1

0

При наличии такой сложной полилинии из более чем 4к элементов гораздо быстрее удалять карту полностью и создавать её снова, чем удалять все объекты с карты. Для этого можно заменить в вашем коде строку

myMap.geoObjects.removeAll();

на блок

  var x1 = myMap.geoObjects.getLength()
  if (x1 > 1) {
    myMap.destroy();
        myMap = new ymaps.Map("map", {center: [55.73, 37.75], zoom: 8}, {
        searchControlProvider: 'yandex#search'
    })
  }

Так первичная отрисовка будет выполняться сразу, а повторная сначала будет пересоздавать карту, затем заниматься маршрутом.

Проверял на смартфоне. Ваш код в на jsфиддле рисует 10-15 секунд, стирает 25-30. Код по описанной схеме сокращает удаление объектов/карты до 6-7 секунд.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.