1

На карте земельного участка, созданной при помощи api-maps.yandex, по центру карты создаются полигоны определенного размера. При создании полигонов включается функция их перемещения, редактирования и поворота. Полигонов можно создать неограниченное количество и разместить на карте в нужных местах. Редактирование полигонов завершается по клику на соответствующую кнопку. После этого каждому полигону можно при помощи контекстного меню добавить дополнительную информацию, которая будет отражена в балуне. Как получить координаты всех созданных полигонов и информации указанной в балуне (желательно в формате GEOJSON) и отправить созданный файл по электронной почте на определенный адрес. Пример собран здесь.

ymaps.ready(init);

function init () {
    var map = new ymaps.Map('map', {
            center: [135.170574,48.376288],
            zoom: 17,
            controls: ['typeSelector', 'geolocationControl']
        });
        myObjectManager = new ymaps.ObjectManager();

    // Закрытие балуна по клику по карте.   
    map.events.add('click', function (e) {
        {map.balloon.close();}
    });
 
 

            // Редактирование://
// Создаем функции эмулирования клика на кнопке создания и отмены редактирования.
    function editnewClick() {
        editControl.events.fire('click');
    };
    editnew.onclick = editnewClick; 
    
    function editcloseClick() {
        editcloseControl.events.fire('click');
    };
    editclose.onclick = editcloseClick; 
    

        
    var myCollection = new ymaps.GeoObjectCollection();


    
// Создаем функцию зумирования до максимального масштаба.   
    zoommax.onclick = function () {
    map.setZoom(20, {duration: 200});
    zoom = map.getZoom();   
    };

// Создаем кнопку завершения редактирования.   
        var editcloseControl = new ymaps.control.Button({
            data: { content: 'Закрепить' },
            options: { maxWidth: 120,  float: 'none', position: {right: '25%', bottom: '50px'},  selectOnClick: false }
        });

    
// Создаем кнопку добавления нового участка.   
        var editControl = new ymaps.control.Button({
            data: { content: 'Добавить' },
            options: { maxWidth: 100,  float: 'none', position: { left: '25%', bottom: '50px'},  selectOnClick: false }
        });


// Привязываем к кнопке добавления нового участка функцию.
    editControl.events.add('click', function () { 
        // Высчитываем координаты прямоугольника.       
        var center = map.getCenter();
            x = center[0];
            y = center[1];
            e=74133.25272;
            n=111288.3112;
            x1=x+5/e;
            x2=x-5/e;
            y1=y;
            y2=y-20/n;
        // Создаем многоугольник в виде прямоугольника.
        var polygon = new ymaps.Polygon([
            [
                [x1,y1],
                [x1,y2],
                [x2,y2],
                [x2,y1],
                [x1,y1]
            ]
        ], {}, {balloonCloseButton: false});
        // Добавляем многоугольник на карту.
    map.geoObjects.add(polygon);

        // Включаем режим редактирования.
    polygon.editor.startFraming();
    map.setZoom(20, {duration: 200});


    // Привязываем к кнопке функцию отмены режима редактирования. 
    editcloseControl.events.add('click', function () { 
        // Отключаем режим редактирования.
    polygon.editor.stopFraming();
  });
 
    // Контекстное меню, позволяющее изменить параметры метки.
    // Вызывается при нажатии правой кнопкой мыши на метке.
    polygon.events.add('contextmenu', function (e) {
        // Если меню метки уже отображено, то убираем его.
        if ($('#menu').css('display') == 'block') {
            $('#menu').remove();
        } else {
            // HTML-содержимое контекстного меню.
            var menuContent =
                '<div id="menu">\
                    <ul id="menu_list">\
                        <li>Данные участка: <br /> <input type="text" id="input_menu" name="name1" placeholder="Город"/></li>\
                        <li><input type="text" id="input_menu" name="name2" placeholder="Улица"/></li>\
                        <li><input type="text" id="input_menu" name="name3" placeholder="дом"/></li>\
                        <li>Дата регистрации: <br /> <input type="text" id="day" maxlength="2" name="day1" placeholder="__"/> . <input type="text" id="day" maxlength="2" name="mount1" placeholder="__"/> . <input type="text" id="god" maxlength="4" name="year1" placeholder="____"/></li>\
                        <li>Дата учета: <br /> <input type="text" id="day" maxlength="2" name="day2" placeholder="__"/> . <input type="text" id="day" maxlength="2" name="mount2" placeholder="__"/> . <input type="text" id="god" maxlength="4" name="year2" placeholder="____"/></li>\
                        <li><textarea id="textarea_menu" name="others" placeholder="Прочие данные"/></textarea></li>\
                    </ul>\
                <div align="center"><input type="image" src="https://storage.yandexcloud.net/necropolis/images/save.png" id="button" name="save"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="https://storage.yandexcloud.net/necropolis/images/edit.png" id="button" name="editor"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="image" src="https://storage.yandexcloud.net/necropolis/images/delete.png" id="button" name="delete"/></div>\
                </div>';
            
            // Размещаем контекстное меню на странице
            $('body').append(menuContent);

            // Заполняем поля контекстного меню текущими значениями свойств метки.
            $('#menu input[name="name1"]').val(polygon.properties.get('name1'));
            $('#menu input[name="name2"]').val(polygon.properties.get('name2'));
            $('#menu input[name="name3"]').val(polygon.properties.get('name3'));
            $('#menu input[name="day1"]').val(polygon.properties.get('day1'));
            $('#menu input[name="mount1"]').val(polygon.properties.get('mount1'));
            $('#menu input[name="year1"]').val(polygon.properties.get('year1'));
            $('#menu input[name="day2"]').val(polygon.properties.get('day2'));
            $('#menu input[name="mount2"]').val(polygon.properties.get('mount2'));
            $('#menu input[name="year2"]').val(polygon.properties.get('year2'));
            $('#menu textarea[name="others"]').val(polygon.properties.get('others'));
            
            // При нажатии на кнопку "Сохранить" изменяем свойства метки
            // значениями, введенными в форме контекстного меню.
            $('#menu input[name="save"]').click(function () {

                polygon.properties.set({
                    name1: $('input[name="name1"]').val(),
                    name2: $('input[name="name2"]').val(),
                    name3: $('input[name="name3"]').val(),
                    day1: $('input[name="day1"]').val(),
                    mount1: $('input[name="mount1"]').val(),
                    year1: $('input[name="year1"]').val(),
                    day2: $('input[name="day2"]').val(),
                    mount2: $('input[name="mount2"]').val(),
                    year2: $('input[name="year2"]').val(),
                    others: $('textarea[name="others"]').val(),

                    hintContent: $('input[name="name1"]').val() + '<br/>' + $('input[name="name2"]').val() + ' ' + $('input[name="name3"]').val(),
                    balloonContent: '<center><strong>' +  $('input[name="name1"]').val() + '<br/>' + $('input[name="name2"]').val() + '<br/>' + $('input[name="name3"]').val() + '</strong><br/><hr>' + $('input[name="day1"]').val() + '.' + $('input[name="mount1"]').val() + '.' + $('input[name="year1"]').val() + '<br/>' + $('input[name="day2"]').val() + '.' + $('input[name="mount2"]').val() + '.' + $('input[name="year2"]').val() + '</center>'
                });
                
                // Удаляем контекстное меню.
                $('#menu').remove();
            });
            // При нажатии на кнопку "Редактировать" 
            $('#menu input[name="editor"]').click(function () {
                polygon.editor.startFraming();
                 // Удаляем контекстное меню.
                $('#menu').remove();
            });
            // При нажатии на кнопку "Удалить" 
            $('#menu input[name="delete"]').click(function () {
                map.geoObjects.remove(polygon);
                 // Удаляем контекстное меню.
                $('#menu').remove();
            });
            }
        });
    }); 
    
}
2
  • 1
    Дополнил карту кнопкой Экспорта при нажатии на которую считываются по очереди координаты всех созданных полигонов и другой информации, введенной через контекстное меню. Однако получить информацию одной строкой для дальнейшей отправки по почте не получается. Образуется количество почтовых отправлений по числу полигонов. Хотя в лог всё заносится как нужно. Куда копать дальше? jsfiddle.net/Eagleoleg/7re2xcLw/15
    – Олег
    11 окт 2021 в 10:53
  • Здравствуйте! А как именно вы отправляете e-mail? Вижу, что у вас в примере собираются все нужные properties, то есть задача вроде как уже решена...
    – Evgeny
    27 ноя 2021 в 0:22

0

Ваш ответ

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

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