0

Начал осваивать API. Передо мной стоит задача: вывести ряд объектов(опор), соединить их и проставить между ними расстояние. Причем опоры я могу двигать.

Я реализовал отрисовку опор на placemark и даже рисую ломанную линию и перерисовываю ее при сдвиге опоры(placemark).

Каким образом я могу вывести расстояние между опорами? тут не подходит ломанная линия

$(document).ready(function() { var myMap;

$('#form-1').submit(function(e) {
    e.preventDefault();

    var fd = new FormData;

    var fileInput = $(this).find('[name=userfile]').prop('files')[0];
    fd.append('file', fileInput);
    plotting();

    function plotting(){

        $.ajax({
            url: 'functions/parseCoords.php',
            type: 'POST',
            processData: false,
            contentType: false,
            data: fd,
            async: true,
            success: function(data) {
                //console.log({ data });
                //return;
                var towers = JSON.parse(data);
                console.log({ towers });

                init(towers);
                var lines = getBrokenLines(towers);
                lines.forEach(addLines);
                //console.log('lines', lines);
                building_connections();

            },
            error: function(error) {
                console.log('error', error);
            },  
        });
    }


    function building_connections() {


        $.ajax({
            url: 'functions/parseConn.php',
            type: 'POST',
            processData: false,
            contentType: false,
            data: fd,
            async: true,
            success: function(data) {
                //console.log({ data });
                //return;

                var conns = JSON.parse(data);
                console.log({ conns });
                //console.log({ conns });
                //addLines(conns);
                //init();
                //var lines = getBrokenLines(towers);
                conns.forEach(addLines);

                // console.log('lines', lines);
                // renderCoords(coords);

            },
            error: function(error) {
                console.log('error', error);
            },  
        });
    }



});

// ymaps.ready(init);

$('#getCoords').submit(function(e) {
    e.preventDefault();
    console.log('заходит?');

});



function init(towers) {  
    //console.log('init >>');
    myMap = new ymaps.Map("map", {
        center: [56.309319, 43.962170],
        zoom: 14,
    }),

    towers.forEach(function(tower) {
        var myPlacemark = new ymaps.Placemark([tower.lat, tower.lon], {
            //balloonContent: tower.id,
            //iconCaption: tower.id,
            iconContent: tower.nameSupport,

        }, {
            preset: 'islands#blueCircleIcon',
            draggable: true

        })

        myMap.geoObjects.add(myPlacemark);

        myPlacemark.events.add('dragend', function (e) {
            //var idDragendPl = e.get('target').properties.get('balloonContent');
            var newCoords = e.get('target').geometry.getCoordinates();
            //console.log(tower.id);
            // console.log('Старые коорд: ' + tower.lat + ' ' + tower.lon);
            console.log(`Старые коорд: ${tower.lat} ${tower.lon}!`);
            tower.lat = newCoords[0].toPrecision(6);
            tower.lon = newCoords[1].toPrecision(6);
            console.log(`Новые коорд: ${tower.lat} ${tower.lon}!`);

            var lines = getBrokenLines(towers);
            lines.forEach(addLines);

        });

    });

}

function getBrokenLines(allTowers) {

    var groupTowers = _.groupBy(allTowers, 'idSector');
    var lines = Object.keys(groupTowers).map(function (idSector){
        var towersByIdSector = groupTowers[idSector];
        var sortedTowers = _.sortBy(towersByIdSector, ['nameSupport']);
        var line = sortedTowers.map(function(tower) {
            return [tower.lat, tower.lon];
        });
        return line;
    });
    //console.log(lines);
    return lines;

}

function addLines(lines) {

    var myPolyline = new ymaps.Polyline(lines, {

    }, {
        // Задаем опции геообъекта.
        // Цвет с прозрачностью.
        strokeColor: "#00000088",
        preset: 'islands#blueCircleIcon',
        // Ширину линии.
        strokeWidth: 4,

        // Максимально допустимое количество вершин в ломаной.
        editorMaxPoints: 0,
        // Добавляем в контекстное меню новый пункт, позволяющий удалить ломаную.
        editorMenuManager: function (items) {
            items.push({
                title: "Удалить линию",
                onClick: function () {
                    myMap.geoObjects.remove(myPolyline);
                }
            });
            return items;
        }
    });

    //console.log({ myMap });

    // Добавляем линию на карту.
    myMap.geoObjects.add(myPolyline);
    return myPolyline;
    //myPolyline.editor.startEditing();

}
5
  • 1
    в API есть метод для получения расстояния между точками по прямой: tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/…
    – Reni
    16 янв 2019 в 12:49
  • я знаю про этот метод, меня интересует, как вывести наглядно циферку с расстоянием рядом с отрезком на карте 20 янв 2019 в 13:32
  • 1
    а в чем проблема? можете придумать свой дизайн и привязать HTMLку с циферкой к линии, хоть бы и балун на ней открывать.
    – Reni
    21 янв 2019 в 13:14
  • Хм, это как? придумать свой дизайн линии? 28 янв 2019 в 19:41
  • 1
    Вам же нужно просто где-то подписать расстояние между точками. В чём проблема? Вы его считаете методом выше и пишете число на карте, можно в балуне линии, можно рядом с линией, да хоть ряжом с картой - на ваш вкус.
    – Reni
    30 янв 2019 в 12:43

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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