Примеры использования

Включение слоя и получение объектов по клику

Включается первый или первые два слоя. Необходимо кликнуть на карту, чтобы получить список объектов в выбранной точке.

1

Подключаются слои

2

В точке клика устанавливается маркер

3

Создается popUp c заголовком первого найденного объекта

Первоначально осуществляется запрос списка групп со слоями. Для отображения выбираются первые два слоя из первой группы

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

1

Список слоев, которые можно включать и выключать

2

Включенные слои отображаются на карте

3

Графические элементы "Distance" и "RectangleDraw"

4

Включен графический элемент "RectangleDraw". Выделяется область

5

В центре области ставится маркер с popUp, в котором текст, сколько объектов было найдено

6

Включен графический элемент "Distance". Осуществляется рассчет дистанции

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

Выбирайте разные базовые подложки, чтобы увидеть как они меняются. Используйте элемент "Zoom", что изменить масштаб карты, сдвинуть карту.

1

При формировании карты включается первый базовый слой

2

Элемент выбора базового слоя (первый список - карты, второй список - космоснимки)

3

Выберите базовый слой и он отобразиться на карте

4

Графический элемент "Zoom"

Динамические объекты

Примеры динамических объектов, которые можно добавлять на карту

1

GeoJSON слой

2

Стандартный маркер

3

Графический объект PolyLine

4

PopUp маркера с текстом

5

Маркер с пользовательской иконкой

6

Графический объект Polygon

Подключение API

Для начала работы с API Вам необходимо в своем проекте сделать несколько подключений:

<script src="https://zao.esmc.msk.ru/public/javascripts/libs/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="https://zao.esmc.msk.ru/public/javascripts/libs/jquery/jquery-ui-1.9.2.custom_6016bgfx.min.js" type="text/javascript"></script>

Кроме подключения jquery и jquery-ui, необходимо подключить сам API.

<script src="https://zao.esmc.msk.ru/public/javascripts/geoportal/geoportal-api.min.js" type="text/javascript"></script>

Создание простой карты

Для добавления карты у Вас должен быть DOM элемент, предположим, что он имеет id=”map”, тогда создание карты будет выглядеть следующим образом:

var map = new GeoPortal.Map(“map”);

Добавление и управления слоями

Далее на эту карту наверняка понадобится добавить несколько слоев. Предположим, что мы знаем id слоя, который нам нужно добавить на карту (пусть id буде равен 204), найдем этот слой и добавим на карту.

function exampleForLayer(layer){
    map.addLayer(layer);	//обавляем слой на карту
    layer.setOpasity(0.6);	//добавляем слою прозрачность
}

GeoPortal.Layer.findLayerById(
    204,
    exampleForLayer,
    function(status, error){
        console.log(error);
    }
);

Динамические элементы

Динамические объекты нужны для выделения областей, добавления на карту маркеров и т.д. Примеры использования:

    var popup = new GeoPortal.Popup({closeButton: true, minWidth: 100});
    popup.setLatLng(new GeoPortal.LatLng(55,49));
    map.addLayer(popup)

    var marker = new GeoPortal.Marker(new GeoPortal.LatLng(55,49))
    map.addLayer(marker);

    var polyline = new GeoPortal.Vector.PolyLine([new GeoPortal.LatLng(55,49), new GeoPortal.LatLng(55.1, 49.1)]);
    map.addLayer(polyline);

GeoPortal

GeoPortal является основным объектом API для взаимодействия с системой.

Пример работы с GeoPortal:

GeoPortal.requestGroups (
    true,
    function(groups){
        if(groups && groups.length){
            var group = groups [0];
            var layers = group.groupLayers;
            if(layers && layers.length)
                map.addLayer(layers[0]);
        }
    },
    function(status,error){
       console.log(error);
    });

События

GeoPortal.on(“ready”,
                        function(){

                        },this);

                                

Свойства

Запрос слоев

Методы

var map = new GeoPortal.Map();
GeoPortal.requestLayers (
        function(layers){
        var layer = layers[0];
            map.addLayer(layer);
        },
        function(status,error){
            console.log(error);
        });

                                

Поиск слоя

Методы

var map = new GeoPortal.Map();
GeoPortal.findLayerById (
        204,
        function(layer){
            map.addLayer(layer);
        },
        function(status,error){
            console.log(error);
        });

                                

GeoPortal. findLayerByName (
        “layer_name”,
        function(layers){
        var layer = layers[0];
            console.log(layer.name());
        },
        function(status,error){
            console.log(error);
        });

                                

Запрос групп

Методы

var map = new GeoPortal.Map();
GeoPortal.requestGroups (
        true,
        function(groups){
            var group = groups [0];
            var layers = group.groupLayers;
            if(layers && layers.length)
                map.addLayer(layers[0]);
        },
        function(status,error){
            console.log(error);
        });

                               

Поиск группы

Методы

GeoPortal. findGroupById (
        32,
        function(group){
            console.log(group.id());
        },
        function(status,error){
            console.log(error);
        },
        true);

                               

GeoPortal.findGroupByName (
        “group_name”,
        function(group){
            console.log(group.name());
        },
        function(status,error){
            alert(error);
        },
        true);

                                

Авторизация

Методы

GeoPortal.authenticate("demo","demo",
    function(data){
        GeoPortal.requestGroups(true,
            function(groups){
                console.log(groups);
            },
            function(status,error){
                console.log("Error to request groups list. Status = " +
                            status + ". Error text: " + error);
            }
        );
    },
    function(status,error){
        console.log("Error to request authentication. Status = " +
                    status + ". Error text: " + error);
    }
);

GeoPortal.currentUser(
    function(user){
        if (user != null){
            console.log(user.name);
        }
    },
    function(status,error){
        console.log("Error to request authentication. Status = " +
                    status + ". Error text: " + error);
    }
);

GeoPortal.on("logout",function(){
    console.log("User is logout");
},this);
GeoPortal.logout();

События

Вспомогательные функции

Пространство имен для служебных функций

var icon = new GeoPortal.Icon();
var marker = new GeoPortal.Marker(latLng, {icon: icon});
/*создаем маркер*/

/*описываем реакцию на клик по маркеру*/
marker.on(
   "click",
   GeoPortal.Util.bind(function() {
      console.log(this.options.icon.iconUrl);
      /*вывести в консоль url иконки*/
   },
   marker)
   /*функция выполнится в контексте маркера, то есть выведется путь до его иконки*/
);

Методы

Карта

Карта – один из основных объектов. Одновременно с этим в проекте может быть несколько карт. Карту можно вписывать в DOM element, на нее можно добавлять слои, устанавливать маркеры и т.д.

Пример использования

var map =  new GeoPortal.Map();
var zoom = map.zoom();
map.setZoom(zoom + 2);

                               

Конструктор

options: {
    zoom: 3,
    center: {
        lng: 88.681640625,
        lat: 55.37911044801047
    },
    baseLayer: undefined, //GepPortal.BaseLayerV1
    layers: [ ]  //GepPortal.Layers,   
},

                                

//пример создания
var map = GeoPortal.Map(container, options);

                    

Опции

Управление картой

Методы

var map =  new GeoPortal.Map();
var zoom = map.zoom();
map.setZoom(setZoom +  2);

                               

var map = new GeoPortal.Map();
map.setZoom(5);

                                

var map = new GeoPortal.Map();
map.zoomIn();

                                

var map = new GeoPortal.Map();
map.zoomOut();

                                

var map = new GeoPortal.Map();
var point = new M.Point(555,555);
map.panBy(p);

                                

var map = new GeoPortal.Map();
var center = map.center ();
console.log(center);

                               

var map = new GeoPortal.Map();
map.setCenter(55,55);

                                

var map = new GeoPortal.Map();
map.setView(55,55,3);

                                

    -

                                

var map = new GeoPortal.Map();
map.fitBounds (48.988037109375, 55.706224094880426,
                           49.2626953125, 55.889945875033845);

var map = new GeoPortal.Map();
var latLngBounds = new GeoPortal.LatLngBounds (48.988037109375,
          55.706224094880426, 49.2626953125, 55.889945875033845);
map.fitBounds (latLngBounds);

                                

Управление слоями

Методы

    -

                                

var map = new GeoPortal.Map();

if(GeoPortal.baseLayers &&
   GeoPortal.baseLayers.schemas &&
   GeoPortal.baseLayers.length > 0) {
        var baseLayer = new  GeoPortal.baseLayers.schemas[0];
        map.setBaseLayer(baseLayer) ;
   }

                                

    -

                                

    -

                                

    -

                                

Управление графическими элементами

Методы

var map = new GeoPortal.Map();
zoom = new GeoPortal.Control.Zoom();

zoom.on("handClick", function(){
    console.log("handClick");
},this);

map.addControl(zoom);

var map = new GeoPortal.Map();
zoom = new GeoPortal.Control.Zoom();

zoom.on("handClick", function(){
    console.log("handClick");
},this);

map.addControl(zoom);
map.removeControl (zoom);

Запросы

Методы

События

var map = new GeoPortal.Map();

map.on(“zoomend”,function(){
    console.log(map.zoom());
},this);

    

Интерфейсы

Layer

GeoPortal.Layer.findLayerById(
    204,
    function(layer){
        layer.setOpacity(0.4);
        console.log(layer.legend());
    },
    function(status, error){
        console.log(error);
});

Методы

bbox{
    "minx":"48.882",
    "maxx":"49.274",
    "miny":"55.694",
    "maxy":"55.881",
    "crs":"EPSG:4326"
}

Group

GeoPortal.findGroupByName(
    “group_name”,
    function(groups){
        if(groups.length){
            group = groups[0];
            console.log(group.name());
            console.log(group.order());
            var layers = group.layers();
        }
    },
    function(status,error){
        alert(error);
    },
    true);

Методы

MapExtent

var mapExtent = GeoPortal.mapExtent;
console.log(mapExtent.extent());

Методы

extent{
    minLat,
    minLon,
    maxLat,
    maxLon
}

BaseLayerV1

var baseLayer = GeoPortal.baseLayers.schemas[0];
console.log(baseLayer.name())

Методы

Feature

featuresWithin(
    latLngBounds,
    function(feautureArray){
        console.log(feautureArray[0].title());
    },
    function(status, error){
        console.log(error);
});

Методы

Базовые типы

LatLng

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

var latLng1 = new GeoPortal.LatLng(100, -200);
/*получим место с координатами (90, -180)*/
var latLng2 = new GeoPortal.LatLng(55.824872, 49.086084);
/*местоположение, соответствующее Казани на карте maps.google.com*/

Конструктор

new GeoPortal.LatLng(<Number> rawLat, <Number> rawLng, <Boolean> noWrap)

Параметры:

• <Number> rawLat - широта
• <Number> rawLng - долгота
• <Boolean> noWrap - флаг, указывающий, необходимо ли ограничивать значения rawLat и rawLng максимально и минимально доступными - [-90..90] и [-180..180], соответственно. Например, при new GeoPortal.LatLng(100, -200, true) будет создан объект с широтой 100 и долготой -200, а при GeoPortal.LatLng(100, -200, false) - с широтой 90 и долготой -180. Значение по умолчанию - false.

Константы

Свойства

Исключения

Invalid LatLng object: (<rawLat>, <rawLng>) - возникает при создании объекта в случае, если хотя бы один из параметров rawLat или rawLng отсутствует или не является числом, например new GeoPortal.LatLng(10) или new GeoPortal.LatLng("dummy")

Методы

LatLngBounds

Представляет область, определяемую заданными географическими границами

    var latLng1 = new GeoPortal.LatLng(100, -200);
    /*получим место с координатами (90, -180)*/
    var latLng2 = new GeoPortal.LatLng(55.824872, 49.086084);
    /*местоположение, соответствующее Казани на карте maps.google.com*/

    var bounds = new GeoPortal.LatLngBounds(latLng1, latLng2);
    /*границы, определяемые этими точками*/

    map.fitBounds(bounds)
    /*покажет область карты, заданную этими границами*/

Конструктор

new GeoPortal.LatLngBounds(<GeoPortal.LatLng> southWest, <GeoPortal.LatLng> northEast)

Параметры:

• <GeoPortal.LatLng> southWest - точка, описывающая южную и западную границы
• <GeoPortal.LatLng> northEast - точка, описывающая северную и восточную границы

new GeoPortal.LatLngBounds(<Array GeoPortal.LatLng> latLngs

Параметры:

• <Array GeoPortal.LatLng> latLngs - массив точек, формирующих границы

Константы

Методы

Point

Представляет расположение в двумерной системе координат, где x соответствует горизонтальной оси, а y — вертикальной.

var point1 = new GeoPortal.Point(55.824872, 49.086084);
/*получим точку с координатами (55.824872, 49.086084)*/

var point2 = new GeoPortal.Point(55.824872, 49.086084, true);
/*получим точку с координатами (55, 49)*/

Конструктор

new GeoPortal.Point(<Number> x, <Number> y, <Boolean> round)

Параметры:

• <Number> x - горизонтальная координата точки.
• <Number> y - вертикальная координата точки.
• <Boolean> round - флаг, указывающий, необходимо ли округлять значения x и y до целых чисел. Значение по умолчанию - false.

Свойства

Методы

Icon

Иконка точечных географических объектов

var icon = new GeoPortal.Icon();
var marker = new GeoPortal.Marker(latLng, {icon: icon});
map.addLayer(pointMarker);

Конструктор

new GeoPortal.Icon(<String> iconUrl)

Параметры:

• iconUrl - url основной картинки

Свойства

Методы

FilterCQL

Фильтр отображения объектов слоя. Фильтрация производится по полям, доступным в атрибутике слоя. При создании фильтра необходимо указать список условий фильтрации. Условие фильтрации включает в себя название и тип поля (можно получить из атрибутики слоя) и значение для сравнения. Для числовых полей также необходимо указать условие сравнения

var filterCQL = new GeoPortal.Filter.CQL([
    {
        field: "nomerdoma",
        compare: ">",
        type: "integer",
        value: "90"
    },
    {
        field: "organization",
        type: "string",
        value: "ООО Дома"
    }
]);
workingLayer.setFilter(filterCQL);

Конструктор

new GeoPortal.Filter.CQL (<Array> filters)

Параметры:

<Array> filters - массив объектов с полями:

• <String> field - название поля, по которому происходит фильтрация
• <String> compare - условие прохождения фильтрации (">", "<", "="). Необходимо только для численных полей
• <String> type - тип поля.
• <String> value - значение, по которому происходит фильтрация

Если фильтр по геометрии - достаточно указать тип geometry и в значении координаты нижнего левого и верхнего правого углов области, по которой осуществляется фильтрация

var filterCQL = new GeoPortal.Filter.CQL([
    {
        type: "geometry",
        value:[{
            lng: 37.6226806640625,
            lat: 55.696163893908825
        },{
            lng: 37.80738830566406,
            lat: 55.777345379415216
        }]
    }
]);
workingLayer.setFilter(filterCQL);

Исключения

Input parameters are not correct! - возникает при создании объекта без указания параметров, либо если параметр не является массивом, например new GeoPortal.Filter.CQL(null) или new GeoPortal.Filter.CQL(123)

Методы

Графические элементы

Zoom

Элемент управления картой: сдвиг карты вправо, влево, вверх, вниз; масштабирование карты.

var map = new GeoPortal.Map('map'),
    zoom = new GeoPortal.Control.Zoom();

zoom.on("handClick", function(){
console.log("icon hand click");
},this);
map.addControl(zoom);

Конструктор

new GeoPortal.Control.Zoom()

События

Distance

Элемент измерения дистанции.

var map = new GeoPortal.Map('map'),
    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);
map.addControl(distance);

Конструктор

new GeoPortal.Control.Distance()

Методы

События

Search

Элемент поиска объектов на карте по входящей строке

var map = new GeoPortal.Map('map'),
    search = new GeoPortal.Control.Search();

search.on("search:finish",function(data){
    if(typeof data.features != undefined){
        console.log(data.features);
    }
    else{
    throw new Error("Error status=" + data.status + ", errorText: " + data.error);
    }
},this);
map.addControl(search);

Конструктор

new GeoPortal.Control.Search()

События

RectangleDraw

Элемент для выделения области на карте

var map = new GeoPortal.Map('map'),
    restangle = new GeoPortal.Control.RectangleDraw();

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

restangle.on("control:RectangleDraw:created", function(data){
    var latLngBounds = new GeoPortal.LatLngBounds(data.latLngs[0],data.latLngs[2]);
    map.fitBounds(latLngBounds);
},this);
map.addControl(restangle);

Конструктор

new GeoPortal.Control.RectangleDraw();

Методы

События

Геозапросы

Поиск объектов

Класс GeoPortal.GeoCoding. Осуществляет поиск объектов на карте по названию.

var geoCoding = new  GeoPortal.GeoCoding(map);

geoCoding.searchByText("Казань", function(features){
    console.log(features);
},
function(status,error){
    throw new Error("Error status="+status+", error text: "+error);
}

Конструктор

new GeoPortal.GeoCoding();

Методы

Динамические объекты

Popup

Используется для создания отображения окна с содержимым при нажатие на карту или объект

var popup = new GeoPortal.Popup(
{
    closeButton: true,
    minWidth: 100
}
);
popup.setLatLng(new GeoPortal.LatLng(55,49));
map.addLayer(popup);

maker.bindPoup("Это Popup на карте", {closeButton: true});

Конструктор

new GeoPortal.Popup(<Popup options> options,<object> source)
Создает новый объект Popup для добавления его на карту или привязке к векторному объекту

Свойства

Методы

Marker

Используется для отображения точечного объекта на карте

var marker = new GeoPortal.Marker(new GeoPortal.LatLng(55,49))
map.addLayer(marker);

Конструктор

new GeoPortal.Marker(<GeoPortal.LatLng> latlng, <Marker options> options)
Создает новый точечный объект

Свойства

Методы

События

IconMarker

Создает маркер на карте с использованием изображения. Наследуется от GeoPortal.Marker

var marker = new GeoPortal.IconMarker(
    new GeoPortal.LatLng(55,49),
    'http://host/path/image.png'
)
map.addLayer(marker);

Конструктор

new GeoPortal.IconMarker(<GeoPortal.LatLng> latlng, <String> iconUrl, <Marker options> options)
Создает новый точечный объект

Векторные объекты

PolyLine

Используется для создания линейного объекта на карте

var polyline = new GeoPortal.Vector.PolyLine([new GeoPortal.LatLng(55,49), new GeoPortal.LatLng(55.1, 49.1)]);
map.addLayer(polyline);

Конструктор

new GeoPortal.Vector.PolyLine(<Array GeoPortal.LatLng> latlngs, <PolyLine options> options)

Свойства

Методы

События

Polygon

Используется для создания полигонального объекта на карте. Наследуется от GeoPortal.Vector.PolyLine

var polygon = new GeoPortal.Vector.Polygon(
    [
        new GeoPortal.LatLng(55,49),
        new GeoPortal.LatLng(55.1, 49.1),
        new GeoPortal.LatLng(55.2, 49.2),
        new GeoPortal.LatLng(55,49)
    ]);
map.addLayer(polygon);

Конструктор

new GeoPortal.Vector.Polygon(<Array GeoPortal.LatLng> latlngs, <PolyLine options> options)

Rectangle

Используется для создания прямоугольного объекта на карте. Наследуется от GeoPortal.Vector.Polygon

var rect = new GeoPortal.Vector.Rectangle(
    new GeoPortal.LatLngBounds (
        new GeoPortal.LatLng(55,49),
        new GeoPortal.LatLng(55.2, 49.2)
    ));
map.addLayer(rect);

Конструктор

new GeoPortal.Vector.Rectangle(<GeoPortal.LatLngBounds> latlngBounds, <PolyLine options> options)

Методы

Слои

FeatureGroup

Используется для группировки векторных слоев в один слой. Наследуется от GeoPortal.Layer.LayerGroup

var features = new GeoPortal.Layer.FeaturGroup();
for (var i=0;i<10;i++) {
    features.addLayer(new GeoPortal.Vector.PolyLine([new GeoPortal.LatLng(55,49), new GeoPortal.LatLng(55.1, 49.1)]))
}

features.on("click", function(e) {
    console.log(e);
})

map.addLayer(features);

Конструктор

new GeoPortal.Layer.FeaturGroup(?<Array Layer> layers)

Методы

События

LayerGroup

Используется для группировки слоев в один слой

var layer = new GeoPortal.Layer.LayerGroup();
for (var i=0;i<10;i++) {
    layer.addLayer(new GeoPortal.Marker(new GeoPortal.LatLng(55+i,49))
}
map.addLayer(layer);

Конструктор

new GeoPortal.Layer.LayerGroup(?<Array Layer> layers)

Методы

WMS

Используется для подключения wms слоев на карту

var layer = new GeoPortal.Layer.WMS("http://host/path", {
        layers: 'testlayername',
        styles: 'testlayerstyle',
        format: 'image/png',
        transparent: true
    });

map.addLayer(layer);

Конструктор

new GeoPortal.Layer.WMS(<String> url, <WMS options> options)

Свойства

Методы

События

WFS

Используется для подключения слоя по протоколу WFS

GeoJSON

Используется для создания векторного слоя из объектов типа GeoJSON. Наследуется от GeoPortal.Layer.FeatureGroup

var layer = new GeoPortal.Layer.GeoJSON(
    {
        type: 'Point',
        coordinates: [55,49]
    }

);

map.addLayer(layer);

Конструктор

new GeoPortal.Layer.GeoJSON(<Object GeoJSON> geojson)

Методы

События

JsonLatLng

Используется для подключения слоя, состоящего из объектов, подгружаемых через Ajax запрос. С возможностью применения кластеризации

var layer = new GeoPortal.Layer.JsonLatLng("http://host/path", {
    icon: new GeoPortal.Icon();
    fieldLng: "lon",
    fieldLat: "lat",
    object: "points"
});

map.addLayer(layer);

Конструктор

new GeoPortal.Layer.JsonLatLng(<String> url, <JsonLatLng options> options);

Свойства

Методы

События