Включение слоев в списке, элемент дистанция и поиск по области

Подготовка

• Прежде всего необходимо подключить 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;
}

• Добавьте на html страницу div c id="groups", это контейнер для групп слоев. И еще один div внутрь, в котором будет содержать заголовок.

<div id="groups">
    <div class="title"><h3>Доступне слои:</h3></div>
</div>

• Добавьте стиль для контейнера групп

#groups{
    width: 300px;
    height: 20px;
    padding: 15px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 99999;
    position: absolute;
    background-color: white;
    right: 10px;
    top: 10px;
    border: 2px solid #2E5988;
    border-radius: 5px;
    opacity: 0.9;
}
#groups .layers{margin:3px;}
#groups .layers .layer{padding: 5px;}
#groups .layers .layer:nth-child(2n){background:#EAEFF1;}
#groups .layers .layer .checkbox-layer{ margin: 3px; }

Работа с API

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

$(function() {
    var distance,
        restangle,
        gpMap,
        layersStore = new Array(),
        marker;
    GeoPortal.on("ready",function() {
        //code
    },this);
});

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

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

gpMap.on("popupclose",removeMarker,this);

GeoPortal.requestGroups(true,
    function(groups) {
        //code
    },
    function(status,error) {
        console.log(status);
        console.log(error);
    }
);

function removeMarker() {
    if (typeof marker != 'undefined') {
        gpMap.removeLayer(marker);
        marker = undefined;
    }
}

• Если группы получены (сработает функция getGroups(groups)), добавим слои первых двух групп на боковую панель. Обработает клик по элементу input у каждого слоя, чтобы при включении галочки, включался и слой на карте, и наоборот.

drawGroup(groups[0]);
    if(groups.length > 1)
        drawGroup(groups[1]);

    $("#groups").find(".layer").find("input").on("click",function() {
        var id = $(this).val(),
        layer = layersStore[id];

        if(typeof layer != 'undefined') {
            layer.turn(gpMap);
        }
    });

//code

function drawGroup(group){
    //code
}

• Создадим и добавим на карту графический элемент "Distance". Подключимся к событиям "control:distance:enable" и "control:distance:disable"

distance = new GeoPortal.Control.Distance();

    distance.on("control:distance:enable", function(data) {
        console.log("control:distance:enable");
    },this);

    distance.on("control:distance:disable", function(data) {
        console.log("control:distance:disable");
    },this);

    gpMap.addControl(distance);

• Создадим и добавим на карту графический элемент "RectangleDraw". Подключимся к событиям "control:RectangleDraw:enable" и "control:RectangleDraw:disable","control:RectangleDraw:created"

restangle = new GeoPortal.Control.RectangleDraw();

    restangle.on("control:RectangleDraw:enable", function(data) {
        console.log("control:RectangleDraw:enable");
    },this);

    restangle.on("control:RectangleDraw:disable", function(data) {
        console.log("control:RectangleDraw:disable");
    },this);

    restangle.on("control:RectangleDraw:created", function(data) {
        //code
    },this);

    gpMap.addControl(restangle);

• После того, как сработает событие "control:RectangleDraw:created", отправим запрос на получение объектов включенных слоев, которые попадают в выбранную область. Если объекты получены, убираем предыдущий маркер, если он был, и устанавливаем в центре области новый маркер. В popUp маркера выводим количество найденных объектов.

restangle.on("control:RectangleDraw:created", function(data) {

    var latLngsBounds = L.latLngBounds(data.latLngs);

    if (typeof marker != 'undefined'){
        gpMap.off("popupclose",removeMarker,this);
        removeMarker();
        gpMap.on("popupclose",removeMarker,this);
    }

    gpMap.featuresWithin(latLngsBounds,
        function(data) {
            marker = new GeoPortal.Marker(latLngsBounds.getCenter());
            gpMap.addLayer(marker);
            marker.setPopup("Найдено "+ data.length +" объекта(ов)");
        },
        function(status, error) {
            console.log(error);
        }
    );
},this);