opengis-api

Введение

Данная документация предназачена для ознакомления с API OpenGIS, которая базируется на opensource библиотеках и фреймворках.

API

$3

Номер текущей версии и дата выпуска (генерации) приведены в тексте данной страницы.

$3

Для получения последней сборки API включите указанные файлы проекта в Ваш файл html.

Содержание

$3

Большая часть API представлена классами, совместное использование которых позволяет получать требуемую картографическую функциональность.
Для просмотра описания отдельных классов воспользуйтесь поиском или выбором в разделе Classes.

$3

Часть функциональность (вспомогательные функции, утилиты) доступны как глобальные объекты. Для их использования воспользуйтесь, пожалуйста, разделом Global

Примеры

$3

#### Создание простой карты
Простой пример создания карты и центрирования по координатам посмотреть.

Для создания объекта карты используйте класс opengis.api.core.map.
``
let map = new opengis.api.core.map({
longitude: 30.3,
latitude: 59.85,
zoom: 13
});
`

#### Обработка событий карты
Работа с событиями - идентификация и изменение экстента посмотреть.

Привязка событий карты осуществляется (в примере) с использованием алисаов - map.identify и map.extent.
`
map.identify({func: showIdentifiedObject});
map.extent({func: showExtent});

// выводит данные по значению текущего экстента - объект типа opengis.api.geometry.Extent
function showExtent(data) {
console.log(data);
}

// выводит данные идентификации по карте - массив объектов opengis.api.tasks.IdentifyResult
function showIdentifiedObject(data){
console.log(data);
}
`

#### Использование методов карты
Поиск объектов в карте посмотреть.

Поиск объектов в карте осуществляется по всем слоям с использованием метода map.search(params).
`
// запрашиваем данные
let searchResult = await search('Невский проспект, дом 12');

// выводим результат поиска (массив объектов типа SearchResult)
console.log(searchResult);

// получает данные с карты
async function search(text) {
let data = await map.search({query: text});
return data;
}
`

#### Центрирование карты
В примере производится генерация случайной точки и карты центрирование по ее координатам посмотреть.

`
let map = new opengis.api.core.map({
longitude: 30.3,
latitude: 59.85,
zoom: 13
});

setInterval(()=>{
let x = Math.random()*60;
let y = Math.random()*60;
map.center({coordinates: [x, y]});
}, 2000)
`

#### Эскпорт карты в png
В примере производится формирование файла с расширением png, содержащего текущее картографическое представление посмотреть.

`
let map = new opengis.api.core.map({
longitude: 30.3,
latitude: 59.85,
zoom: 13
});

//сохраняем в файл с именем export.png
map.saveAs({name: "export", fileExtention: "png"});
`

$3

#### Добавление векторных слоев на карту
Создание карты и добавление созданных векторных слоев посмотреть.

Для создания объекта векторного слоя используйте класс opengis.api.layers.vector.
`
let map = new opengis.api.core.map({
longitude: 30.3,
latitude: 59.85,
zoom: 13
});

let layers = sources.map(function (item) {
let subLayer = new opengis.api.layers.vector({
url: item.url,
className: item.id
});
return subLayer;
});

map.add(layers);
`

#### Работа со слоем графики
Создание слоя типа opengis.api.GraphicLayer и добавление графики на карту посмотреть.

Для добавления графики на карту используется слой типа opengis.api.layers.graphic.
`
let graphicLayer = new opengis.api.layers.graphic({id: "graphics-1", className: "", opacity: 0.6});
let coordinates = [];

for (let i = 0; i < 1000; i++) {
coordinates.push(
[
Math.random() * 9000000,
Math.random() * 9000000
]
)
}

coordinates.forEach(function (item) {
graphicLayer.addPoint({geometry: item});
});
`

$3

#### Стилизация слоев
Стилизация векторных слоев посмотреть.

Для задания стиля используйте объект стиля (в примере приведена функция стиля opengis.api.styles.unique, которая назначает символы в зависимости от значения поля field объекта) и метод слоя layerObject.setStyle(style).
`
let lineStyle = new opengis.api.styles.unique({
field: "nominalVoltage",
default: {
stroke: {
width: 1,
color: "#08F"
}
},
values: {
110: {
stroke: {
width: 3,
color: "#F00"
}
},
35: {
stroke: {
width: 2,
color: "#F0F"
}
},
10: {
stroke: {
width: 2,
color: "#000"
}
}
}
});
layer.setStyle(lineStyle);
`

#### Получение информации о символике слоев
В примере создается три слоя, назначается символика и вызывается метод legend() возвращающий массив описаний символов слоя посмотреть.

`
let legend = layers[i].legend();
`

#### Стилизация c использованием диапазонных значений
Стилизация векторных слоев посмотреть.

Для задания стиля используйте объект стиля (в примере приведена функция стиля opengis.api.styles.interval, которая назначает символы в зависимости от значения поля field объекта) и метод слоя layerObject.setStyle(style).
Важно использовать корректные выражения задания диапазонов, ( и ) - открытый диапазон, [ и ] - закрытый диапазон, разделитель границ диапазона - ~.
`
let lineStyle = new opengis.api.styles.unique({
field: "nominalVoltage",
default: {
stroke: {
width: 1,
color: "#000000"
}
},
values: {
"[35~1150]": {
stroke: {
width: 3,
color: "#F00"
}
},
"10~35)": {
stroke: {
width: 2,
color: "#F0F"
}
},
"[0~10)": {
stroke: {
width: 2,
color: "#9d56ff"
}
}
});
layer.setStyle(lineStyle);
`

#### Стилизация c использованием диаграмм
Стилизация векторных слоев [посмотреть.

Для задания стиля используйте объект стиля (в примере приведена функция стиля opengis.api.styles.diagram, которая назначает символы в зависимости от значения полей (задаются как ключи в values).
`
let style =
new opengis.api.styles.diagram({
type: "bar",
radius: 20,
default: {
fill: {
color: "#8ee246"
},
stroke: {
width: 1,
color: "#EEE"
}
},
values: {
"field1": {
fill: {
color: "#0AF"
}
},
"field2": {
fill: {
color: "#0A0"
}
},
"field3": {
fill: {
color: "#F32"
}
}
}
});
layer.setStyle(style);
`

$3

#### Источник типа FileEsriJsonVectorSource - файловый источник данных
Кастомные источники данных на примере загрузки данных из файла ESRI JSON посмотреть.

Для создания слоя с кастомным источником данных используйте фабрику типов opengis.dataSources.dataSource с требуемым типом.
`
// данные в формате ESRI JSON
let data = {
"layerAlias": "Земельные участки",
"displayFieldName": "Label",
"fieldAliases": {
"OBJECTID": "OBJECTID",
"SystemName": "SystemName",
"SystemCode": "SystemCode",
"Label": "Кадастровый номер",
"InventoryNumber": "Инвентарный номер",
"Area": "Площадь, кв.м."
},
"geometryType": "esriGeometryPolygon",
"spatialReference": {
"wkid": 0,
"latestWkid": 0
},
"fields": [
{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"dictionary": "undefined",
"alias": "OBJECTID"
},
{
"name": "SystemName",
"type": "esriFieldTypeString",
"dictionary": "undefined",
"alias": "SystemName"
},
{
"name": "SystemCode",
"type": "esriFieldTypeString",
"dictionary": "undefined",
"alias": "SystemCode"
},
{
"name": "Label",
"type": "esriFieldTypeString",
"dictionary": "undefined",
"alias": "Кадастровый номер"
},
{
"name": "InventoryNumber",
"type": "esriFieldTypeString",
"dictionary": "undefined",
"alias": "Инвентарный номер"
},
{
"name": "Area",
"type": "esriFieldTypeDouble",
"dictionary": "undefined",
"alias": "Площадь, кв.м."
}
],
"features": [
{
"attributes": {
"OBJECTID": 1,
"SystemName": "LandParcel",
"SystemCode": "61:28:0600022:55",
"Label": "61:28:0600022:55",
"InventoryNumber": "Нет данных",
"Area": 254.4
},
"geometry": {
"rings": [
[
[
2241707.46,
440885.33
],
[
2241635.86,
441224.59
],
[
2241986.041,
441274.096
],
[
2242732.48,
441115
],
[
2241707.46,
440885.33
]
]
]
}
},
{
"attributes": {
"OBJECTID": 2,
"SystemName": "LandParcel",
"SystemCode": "61:28:0600022:258",
"Label": "61:28:0600022:258",
"InventoryNumber": "Нет данных",
"Area": 156.12
},
"geometry": {
"rings": [
[
[
2242325.63,
440818
],
[
2241707.459,
440885.34
],
[
2242732.48,
441115
],
[
2242325.63,
440818
]
]
]
}
}
]
};

let layer = new opengis.api.layers.vector({
data: data,
dataSourceType: "fileEsriJsonVectorSource", // указатель на кастомный тип источника
minResolution: -0,
maxResolution: 10000,
projection: 'EPSG:4932'
});
`

#### Работа с сервисами ESRI REST API
Создание свойств слоя производится на основании загруженных свойств слоя посмотреть.

Измерения выполняются с помощью вызова метода map.measure(params)

`
map.measure({type: "line"})
.then(labelMeasure);

function labelMeasure(geometry){
map.addTemporaryLabel(geometry.getLength({units: "km", srsname: "102100"});
}

`

$3

#### Измерения
Пример измерения длины посмотреть.

Измерения выполняются с помощью вызова метода map.measure(params)

`
map.measure({type: "line"})
.then(labelMeasure);

function labelMeasure(geometry){
map.addTemporaryLabel(geometry.getLength({units: "km", srsname: "102100"});
}

`

#### Создание, изменение и выбор объектов слоя
Создание объектов слоя (draw), изменение их геометрии (modify), выбор объектов слоя (select) посмотреть.

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

`
//выбор функции добавления объекта
bindClick("add", () => {
layer.draw({type: "LineString", func: console.log, snap: snapStatus});
});

//выбор функции изменения объекта
bindClick("modify", () => {
layer.modify({type: "LineString", func: console.log, snap: snapStatus});
});

//выбор функции выбора объекта
bindClick("select", () => {
layer.select({type: "LineString", func: console.log, snap: snapStatus, multi: true});
});
`

$3

#### Генерация буфера
Построение буфера для объектов линейного слоя с использованием значения величины буфера на основе свойств объектов слоя
посмотреть.

Примечание: для построения буфера перемещайте карту (генерация буфера привязана на событие завершения движения карты; при большом количестве буферных геометрий возможно подтормаживание на слабых компьютерах.

`
//создание графического слоя (в нем будут размещаться рассчитанные буфферные геометрии)
let graphicLayer = new opengis.api.layers.graphic({id: "graphics-1", className: "", opacity: 0.5});

map.add([graphicLayer]);

// завершение движения карты
map.on("moveend", () => {
// получение объектов из слоя
let features = layers[0].layer.getSource().getFeatures();

// построение буферов
let buffers = features.map(function (item) {
return new opengis.api.geometry.operations.buffer().execute(item, item.get("nominalVoltage")*2);
});

// очистка слоя перед добавлением
graphicLayer.clear();

//добавление графики на слой
buffers.forEach(function (item) {
graphicLayer.add(item);
});
});
`

$3

#### Режим "Тепловые карты" для векторных слоев
Генерация тепловых карт для точечных источников данных посмотреть.

`
layers = sources.map(function (item) {
let subLayer = new opengis.api.layers.layer({
url: item.url,
typeLayer: "heat",
dataSourceType: "esriJsonVectorSource",
rotateWithView: false,
className: item.id,
title: item.id + 123123,
tiles: 2,
minResolution: item.minResolution,
maxResolution: item.maxResolution,
// цветовой градиен
gradient: ['#00F', '#0AF', '#0FF'],
// радиус размытия
radius: 20,
id: item.id,
opacity: 0.5
});
return subLayer;
});

map.add(layers);
`

#### Динамическая смена режима отображения векторных слоев
Изменение представления данных векторных слоев "на лету" посмотреть.

`
function change() {
flag = !flag;
if (flag) {
layers.forEach((item) => {
item.setMode({mode: "heatMode"})
})
}

if (!flag) {
layers.forEach((item) => {
item.setMode({mode: "vectorMode"})
})
}
}
`

$3

#### Решение задачи транспортного роутинга (построение маршрута)
Вычисление маршрутов в прямом и обратном направлении точек, сброс маршрутов посмотреть.

`
let map = new opengis.api.core.map(config.map);

let routing = new opengis.api.routing.routing({
url: "http://geostore.pro:5000"
});

routing.on("route-calculated", updateInformation);

function updateInformation(data) {
if (data) {
let instructions = data.route.result.route.instructions;
let html = instructions.map((item, index) => {
return "

" +
"

" + (index + 1) + "

" +
"

" + item.join(", ") + "

" +
"

";
}).join(" ");
let element = document.getElementById("container");
element.innerHTML = html;
}
}

bindClick("start", () => {
routing.setOptions({map: map});
routing.start();
});

bindClick("stop", () => {
routing.stop();
});

bindClick("addLocations", function () {

let locations = [
new opengis.api.routing.types.location({
id: 1,
coordinate: [3384232.380880975, 8392008.960839514]
}),
new opengis.api.routing.types.location({
id: 2,
coordinate: [4364362.390238303, 6739762.816559235]
})
];

routing.setOptions({map: map});
routing.start();
routing.addLocation(locations[0]);
routing.addLocation(locations[1]);
});

bindClick("clear", function () {
routing.clear();
});
`

$3

#### Работа со стеком транзакций
API предполагает два режима работы с транзакциями - direct (изменения производятся немедленно) и stack (передаются в стек) посмотреть.

`
// задаем режим транзакций

layer.setTransactionMode({transactionMode: "stack"});

...

// выполняем применение транзакций и получаем результат выполнения транзакций

let commitResults = await opengis.api.editing.transactionStack.commitAll();

`

$3

#### Простой оверлей
API позволяет добавлять произвольные DOM элементы на карту с использованием класса Overlay посмотреть.
`
//создаем оверлей
let overlay = new opengis.api.overlays.overlay({
position: [30.5, 59.96],
element: "popup",
transform: {
source: "EPSG:4326",
destination: "EPSG:3857"
}
});

// формируем html строку
// можно использовать и содержимое DOM элемента, если он уже есть в document.body
let htmlString = '

' +
' 7C'
' t ' +
'

';

//вставляем в оверлей htmlString
overlay.setHtml(htmlString);

// добавляем на карту
map.addOverlay(overlay);
``

Контакты

$3

* Удальцов Андрей udaltsovandrew@gmail.com