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

Подготовка

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

<script src="/public/javascripts/libs/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="/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;
    right:0;
    z-index: 99;
}
#baseLayerContainer .schemasContainer{
    float: left;
    margin-right: 10px;
}
#baseLayerContainer .spacesContainer{
    float: left;
}

Работа с API

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

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

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

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

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

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

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

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

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

currentBaseLayer = GeoPortal.baseLayers.getMain();

$("body").find("#map").after('<div id="baseLayerContainer"/>');
var $container = $("#baseLayerContainer");
$container.append('<div class="schemasContainer"><select class="selectBaseLayer">'+
                                '<option value="" selected>выбрать...</option></select></div>');
$container.append('<div class="spacesContainer"><select class="selectBaseLayer">'+
                                '<option value="" selected>выбрать...</option></select></div>');

var $spaceSelect = $("#baseLayerContainer>.spacesContainer>select"),
$schemaSelect = $("#baseLayerContainer>.schemasContainer>select");
for(i=0; i<len; i++) {
    let baseLayer = baseLayers[i];
    baseLayerArray[baseLayer.id()] = baseLayer;
    let selected = baseLayer.id() == currentBaseLayer.id() ? "selected" : "";
    if(baseLayer.space()) {
        $spaceSelect.append('<option value="'+baseLayer.id()+'" '+selected+'>'+baseLayer.name()+'</option>');
    } else {
        $schemaSelect.append('<option value="'+baseLayer.id()+'" '+selected+'>'+baseLayer.name()+'</option>');
    }
}

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

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

        if(typeof baseLayer != 'undefined') {
            gpMap.setBaseLayer(baseLayer);
            currentBaseLayer = baseLayer;
        }
        if($(this).parent("div").hasClass("schemasContainer")){
            $spaceSelect.children("option:first").prop("selected",true);
        } else {
            $schemaSelect.children("option:first").prop("selected",true);
        }

    });