OpenLayers. Кнопка с рисованием и сохранением полигона.

[novice]

Выложите, пожалуйста, код с кнопкой, по нажатию на которую можно нарисовать полигон(только один, затем кнопка становится не активной), и сохранить его координаты в строку через запятую.

Стандартные примеры не подходят. Кнопки добавляются следующим образом(на примере измерения расстояния):

Код: Выделить всё

    var buttonRuler = new OpenLayers.Control.Button({
        title:'Измерение расстояний',
        displayClass: 'MeasureDistance', activate: OnMeasure, deactivate: OffMeasure, type: OpenLayers.Control.TYPE_TOOL
    });

стили кнопки(активна/неактивна) меняются в

Код: Выделить всё

function OnMeasure() {
    if(this.panel_div)
       this.panel_div.className = "MeasureDistanceItemActive"
    OnOffMeasure(true);
}
function OffMeasure() {
    if(this.panel_div)
        this.panel_div.className = "MeasureDistanceItemInactive"
    OnOffMeasure(false);
}

[Denis Rykov]

Как-то так:

Код: Выделить всё

var geojson_format = new OpenLayers.Format.GeoJSON();

var map = new OpenLayers.Map('map');



var config = {

    base_layer: new OpenLayers.Layer.OSM('osm'),

    overlay: new OpenLayers.Layer.Vector('vector'),

    tools_panel: new OpenLayers.Control.Panel({

        displayClass: 'toolsPanel'

    })

};



// Drawing

var draw_control = new OpenLayers.Control.DrawFeature(

    config.overlay,

    OpenLayers.Handler.Polygon,

    {

        displayClass: 'drawControl',

        type: OpenLayers.Control.TYPE_TOGGLE,

        featureAdded : function(f) {

            draw_control.deactivate();

            alert(geojson_format.write(f));

        }

    }

);



map.addLayer(config.base_layer);

map.addLayer(config.overlay);

map.addControl(config.tools_panel); 

map.zoomToMaxExtent();

config.tools_panel.addControls([draw_control]);

Набросал live demo. Думаю, что получить координаты в нужной вам форме не составит труда.

[novice]

спасибо большое! Подскажите, пожалуйста, еще как правильно деактивировать остальные кнопки из панели, а то у меня одновременно и линейка работает и выделение области) - когда после линейки я кликаю на кнопку рисования полигона. А когда кликаю на рисование полигона, активен еще один режим - перемещение по карте.

правильный ли подход: на activate повесить функцию, которая бы проходила по всем кнопкам на панели в цикле и снимала с них выделение. И еще принудительно их деактивировала?

[Denis Rykov]

Мои рецепты раз, два, думаю, помогут ответить на ваши вопросы, контролы панели должны иметь тип OpenLayers.Control.TYPE_TOOL.

[novice]

спасибо! а можете еще выложить код очистки всех слоев, кторые есть на карте. Т.е. функцию, в которую можно было бы передать карту, а в функции получить все слои которые есть на карте, и затем каждый слой очистить от всех объектов.

[Denis Rykov]

Код: Выделить всё

function clearMap(mapObj) {

    for (var i=0; i<mapObj.layers.length; i+=1) {

        var layer = mapObj.layers;

        if (layer.CLASS_NAME === 'OpenLayers.Layer.Vector') {

            layer.removeAllFeatures();

        }

    }

}

[novice]

Подскажите, пожалуйста, еще: можно ли повесить эту функцию на контрол OpenLayers.Control.DrawFeature . В доке http://dev.openlayers.org/docs/files/Op ... re-js.html описана только одна функция featureAdded/

Или надо заводить отдельную кнопку, писать много фунций типа OnMeasure, OffMeasure, OnOffMeasure и в OnMeasure очищать всю карту.

По функционалу: при клике на кнопку рисования полигона вся карта должна очиститься. затем полигон рисуется и остается на карте.

[Denis Rykov]

Повесить обработчик на событие 'activate', если я правильно понял вопрос, то есть либо отдельно зарегистрировать событие, либо добавить в код самого контрола:

Код: Выделить всё

eventListeners: {

    'activate': function(e) {

        clearMap(e.object.map);

    }

}

Обновил демо.

[novice]

спасибо! выложите, пожалуйста, код с кнопкой, по нажатию на которую происходит очистка карты. Если делать так, как остальные разработчики у нас, то код будет:

Код: Выделить всё

    var buttonDelete = new OpenLayers.Control.Button({
        title:'Удаление объектов',
        displayClass:'deleteControl', activate:delegateClear, deactivate: delegateClear, type: OpenLayers.Control.TYPE_TOOL
    });

Код: Выделить всё

function delegateClear() {
    if(map)
      clearMap(map);
}

Но map - локальный объект, он объявлен в функции init. И поэтому этот код не подходит.
Дополнение Разве это правильно - делать карту локальным объектом(т.е. создавать ее в функции init(mapid, ip))? а настройки интсрументов - глобальными(т.е. объявлять их до init)?

Код: Выделить всё

var map = new OpenLayers.Map(mapid, options);
var newL = new OpenLayers.Layer.OSM("OSM Russia", "http://" + ip + ...

[Denis Rykov]

А зачем вы разделяете код создания карты и контролов по разным функциям, описывайте их в одной, мне кажется в этом ничего криминального нет. Вообще, засорение глобальной области видимости - это зло. По существу вопроса - любой контрол содержит ссылку на объект map. Посмотрите демо, я обновил.

[novice]

Мне сказали так разделять. честно говоря, не знаю почему мне поручили сделать управление картой, т.к. у нас четверо разработчиков используют ОСМ и они - веб разрабочики, работают минимум месяц с этим. А я 5 месяцев назад неделю делал редактор объектов в базу(ну до этого недели две изучал js, css, JPA, ajax и прочее для веб разаработки).
Спасибо огромное за помощь, я бы неделю вспоминал как на js писать. Denis Rykov, выложите, пожалуйста, код с линейкой, где на карте есть промежуточные значения отмеренного расстояния и флажки на месте узлов.