Opengis-api NPM

Введение

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

API

Версия

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

Получение кода API

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

Содержание

Классы

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

Глобальные объекты

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

Примеры

Работа с объектом Map (карта)

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

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

Для создания объекта карты используйте класс 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"});

Работа со слоями

Добавление векторных слоев на карту

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

Для создания объекта векторного слоя используйте класс 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});
});

Стилизция пространственных объектов

Стилизация слоев

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

Для задания стиля используйте объект стиля (в примере приведена функция стиля 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);

Работа с источниками данных

Источник типа 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"});
}

Взаимодействия с картой и слоями

Измерения

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

Измерения выполняются с помощью вызова метода 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});
    });

Геометрические операции

Генерация буфера

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

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

//создание графического слоя (в нем будут размещаться рассчитанные буфферные геометрии)
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);
    });
});

Режимы отображения слоев

Режим "Тепловые карты" для векторных слоев

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

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"})
            })
        }
    }

Задачи сетевого анализа

Решение задачи транспортного роутинга (построение маршрута)

Вычисление маршрутов в прямом и обратном направлении точек, сброс маршрутов посмотреть.

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 "<div class='row'>" +
                "<div class='col-lg-1'>" + (index + 1) + "</div>" +
                "<div class='col-lg-8'>" + item.join(", ") + "</div>" +
                "</div>";
        }).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();
});

Редактирование данных векторных слоев

Работа со стеком транзакций

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

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

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

...

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

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

Оверлейные элементы

Простой оверлей

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 = '<div style="color: red;" data-toggle="tooltip" data-placement="top" title="Температура воздуха +7с, скорость ветра - 5м/с">' +
    '<span class="glyphicon glyphicon-map-marker btn-lg"> 7C</span>'
' t ' +
'</div>';

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

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