Перейти к основному содержимому

Источники карт

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

GeoJSON​

GeoJSON - это универсальный формат для обмена гео-информацией. Он простой и удобный

Импортируйте файл https://gurumaps.app/example/feature_collection.geojson чтобы увидеть на карте, леса, деревья и реки рядом с Барановичами. Вы можете импорировать любой свой файл GeoJSON.

GeoJSON + MapCSS​

Вместе с файлом feature_collection.geojson из предыдущего шага импортируйте файл https://gurumaps.app/example/feature_collection.mapcss. Вот его содержимое:

node[natural=tree] {
    icon-image: "poi_circle.svg";
    icon-tint: red;
    image-allow-overlap: true;
}
node[natural=tree][leaf_cycle=evergreen] {
    icon-tint: green;
}

После импорта на карте останутся видны только деревья. Вечнозеленые будут отмечены зелеными кружками, а всех остальные деревья - красными.

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

Map Source (.ms) for vector data​

Импортируйте файл http://gurumaps.app/example/vector_source1.ms. Вот его содержимое:

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource overlay="true">
    <name>GeoJSON from url</name>
    <geojson url="https://gurumaps.app/example/feature_collection.geojson"/>
</customMapSource>

Он автоматически скачает данные по адресу https://gurumaps.app/example/feature_collection.geojson после импорта.

Рассмотрим файл http://gurumaps.app/example/vector_source2.ms

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource overlay="true">
    <name>GeoJSON with autoupdate</name>
    <geojson url="https://gurumaps.app/example/feature_collection.geojson" updateInterval="5"/>
    <style url="https://gurumaps.app/example/feature_collection.mapcss"/>
</customMapSource>

Теги geojson и style могут содержать в себе аттрибуты url c адресом к данными и updateInterval с интервалом проверки обновлений в минутах, а так же данные или блок <![CDATA[ ]]> с данными внутри. Например в http://gurumaps.app/example/vector_source3.ms.

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource overlay="true">
    <name>GeoJSON and Style embed in MS</name>
    <minZoom>3</minZoom>
    <maxZoom>9</maxZoom>
    <geojson>
{
    "type": "Feature",
    "properties": {},
    "geometry": {
        "type":"MultiPolygon",
        "coordinates": [[[ [0.0, 0.0], [10.0, 0.0], [10.0, 10.0], [0.0, 10.0] ],
                        [ [2.0, 2.0], [ 8.0, 2.0], [ 8.0,  8.0], [2.0,  8.0] ]],
                        [[ [30.0,0.0], [40.0, 0.0], [40.0, 10.0], [30.0,10.0] ],
                        [ [32.0,2.0], [38.0, 2.0], [38.0,  8.0], [32.0, 8.0] ]]]}
}
    </geojson>
    <style>
        area|z3-{fill-color: green; width:1pt; color:red;}
        line{width:1pt; color:yellow;}
    </style>
</customMapSource>

Данные GeoJSON и стиль содержатся внутри файла .ms и не зависит от внешних источников.

Raster map (.sqlitedb or .mbtiles) + Map Source​

Для растровых карт вы можете определить дополнительные параметры в .ms файле. Так например растровую карту map.sqlitedb можно сделать оверлеем, добавив в map.ms следующее содержимое:

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource overlay="true">
</customMapSource>

Кроме того можно указать имя карты, минимальный и максимальный масштаб, когда из этой карты надо загружать данные, и следует ли показывать увеличенные тайлы, если пользователь приблизится сильнее.

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource overlay="true" overzoom="true">
    <name>Raster map with extra params</name>
    <minZoom>8</minZoom>
    <maxZoom>12</maxZoom>
</customMapSource>

Чтобы map.ms файл был использован для карты map.sqlitedb, у них должно быть одинаковое имя. В нашем случае - это map но может быть любое другое.

Онлайн источники карт​

<?xml version="1.0" encoding="UTF-8"?>
<customMapSource>
    <name>Google Maps Satellite EN HD</name>
    <minZoom>0</minZoom>
    <maxZoom>20</maxZoom>
    <url>http://{$serverpart}.google.com/vt/[email protected]&amp;x={$x}&amp;y={$y}&amp;z={$z}&amp;s=Galileo&amp;hl=en&amp;scale=2</url>
    <serverParts>mt0 mt1 mt2 mt3</serverParts>
</customMapSource>

Если задан url - источник будет скачивать онлайн растровые тайлы. В шаблон из <url> будут вставлены следующие части:

  • {$serverpart} - случайное имя сервера из <serverParts>
  • {$x}, {$y}, {$z} - адрес тайла
  • {$quad} - Quad tile address
  • {$bbox} - Tile bbox in SRID 3857. Typically used for WMS servers.
  • {$invX}, {$invY} - инвертированные координаты. N-x и N-y, где N число тайлов на текущем масштабе.

Стиль карты​

Оверлеи​

Оверлеи - это слои с дополнительной информацией, которые показаны поверх карты. Овелеем может быть GeoJSON файл, или растровый источник. Рассмотрим все по порядку.

Векторные данные из GeoJSON​

  • Самый простой способ показать GeoJSON на карте - импортировать его в приложение.

[картинка с GeoJSON данными на карте]

  • Вместе с GeoJSON можно импортировать и MapCSS файл, чтобы настроить правила отображения для GeoJSON.

Данные в GeoJSON​

Данные в GeoJSON содержат два основных поля, это properties и geometry. properties содержит теги и значения описывающие объект. Например, имя, тип, описание, число полос для дорог. По параметрам из properties стиль может выбрать каким цветом и на каком уровне приближения рисовать эти данные.

{
    "type": "Feature",
    "properties": {
        "@id": "node/524678909",
        "leaf_cycle": "evergreen",
        "leaf_type": "needleleaved",
        "natural": "tree",
        "species": "Pícea",
        "species:ru": "Ель"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            26.0211965,
            53.1146981
        ]
    },
    "id": "node/524678909"
}