Смена базовых слоев, элемент управления картой

Подготовка

• Прежде всего необходимо подключить jquery-библиотеки и API геопортала.

<script src="/public/../../../../public/javascripts/libs/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/public/../../../../public/javascripts/libs/jquery/jquery-ui-1.9.2.custom_6016bgfx.min.js" type="text/javascript"></script>
<script src="/public/javascripts/geoportal/geoportal-api.min.js" type="text/javascript"></script>

• Добавьте на html страницу div c выбранным по вашему желанию id. Это контейнер для карты. Например создадим div c id="map".

<div id="map"></div>

• Добавьте стиль для контейнера карты. Обязательно необходимо прописать ширину и высоту.

#map {
    height: 100%;
    width: 960px;
}

• Добавьте стиль для элемента переключения базовых слоев

#baseLayerContainer{
    background: none repeat scroll 0 0 #C0CCD4;
    padding: 5px;
    position: absolute;
    top: 0;
    z-index: 99;
}
#baseLayerContainer .schemasContainer{
    float: left;
    margin-right: 10px;
}
#baseLayerContainer .spacesContainer{
    float: left;
}

Работа с API

• Когда бибилиотеки и api загружены, создается объект GeoPortal. Подключаемся к событию ready объекта GeoPortal. В момент сработки события, объект готов к использованию.

$(function(){
    var mapObject;
    GeoPortal.on("ready",function() {
        //code
    },this);
});

• После того, как сработало событие ready у объекта GeoPortal, создадим объект карты.

mapObject = new GeoPortal.Map('map');

• Установим карте, после того как она готова к использованию, центр и уровень масштаба.

mapObject.on("ready",function() {
    mapObject.setView(88.681640625,55.37911044801047,3);
},this);

• Добавим на карту графический элемент "Zoom"

zoomControl = new GeoPortal.Control.Zoom();
mapObject.addControl(zoomControl);

• Сформируем графический элемент для смены базовых слоев. В отдельный селектор вынесем базовые слои типа "карта", а в другой - базовые слои типа "космоснимок"

currentBaseLayer = mapObject.baseLayer();

$("body").find("#map").after('<div id="baseLayerContainer"/>');
$("#baseLayerContainer").append('<div class="schemasContainer"><select class="selectBaseLayer">'+
                                '<option value="" selected>выбрать...</option></select></div>');
$("#baseLayerContainer").append('<div class="spacesContainer"><select class="selectBaseLayer">'+
                                '<option value="" selected>выбрать...</option></select></div>');
if(schemasLen>0) {
    for(i=0;i<schemasLen;i++) {
        baseLayer = schemas[i];
        baseLayerArray[baseLayer.id()] = baseLayer;

        if(baseLayer.id() == currentBaseLayer.id())
            selected = "selected";
        else
            selected = "";

        $("#baseLayerContainer>.schemasContainer>select").append('<option value="'+baseLayer.id()+'" '+
                                                                        selected+'>'+baseLayer.name()+'</option>');
    }
}
if(spacesLen>0) {
    for(i=0;i<spacesLen;i++ ){
        baseLayer = spaces[i];
        baseLayerArray[baseLayer.id()] = baseLayer;

        if(baseLayer.id() == currentBaseLayer.id())
            selected = "selected";
        else
            selected = "";

        $("#baseLayerContainer>.spacesContainer>select").append('<option value="'+baseLayer.id()+'" '+
                                                                       selected+'>'+baseLayer.name()+'</option>');
    }
}

• Поключаемся к событию "change" у каждого селектора. Когда новый базовый слой выбран, устанавливаем карте.

$(".selectBaseLayer").change(function() {
    var id = $(this).val(),
    baseLayer = baseLayerArray[id];

    if(typeof baseLayer != 'indefined') {
        mapObject.setBaseLayer(baseLayer);
        currentBaseLayer = baseLayer;
    }
    if($(this).parent("div").hasClass("schemasContainer")) {
        $("#baseLayerContainer>.spacesContainer>select").children("option:first").attr("selected","selected");
    }
    else{
        $("#baseLayerContainer>.schemasContainer>select").children("option:first").attr("selected","selected");
    }

});