npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

opengis-api

v1.11.19

Published

Cyclone 2D/3D Cartography API ver.1.11.19

Downloads

58

Readme

Введение

Данная документация предназачена для ознакомления с 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);

Контакты

Разработчики