Приступим к самому простому, а именно как отобразить объекты слоя. Присутствует два варианта отображения на карте: отображение векторных объектов и тайлов. Отобразить карту на весь экран можно в Веб-проводнике с помощью ссылки с набором параметров. Для отображения карты в Веб-странице или приложении можно использовать теги Iframe, JavaScript или API функции.
Векторные объекты можно отобразить на базовом слое OpenStreetMap, Google Map, кадастровой карте и прочих. К векторным объектам относятся точки, линии и полигоны. Векторным объектам можно задать цвет, заливку, атрибуты объектов. Атрибуты объектов используются для аналитики, поиска и отображения информации об объекте на карте. Тайловый слой - это и есть подложка, представляющая собой набор изображений. К подобному слою относятся базовые слои OpenStreetMap, Google Map, растровые слои, векторные слои и карты, которые могут динамически преобразоваться в тайлы на сервисе.
Отображение метки на карте
http://gisfile.com/api/html?icon=icon-olive&name=Paris&lat=49.03787&lon=2.28516&z=5
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| icon | отображает метку на карте и позволяет указать наименование иконки по заданным координатам lat и lon | GET параметры (если параметр не задан, метка не отображается) | icon=icon-green |
| name | наименование объекта | GET параметры (отображается при нажатии на метку) | name=Hello world |
| xname | наименование объекта в Hex формате | GET параметры (применяется вместо name, если кодировка не UTF-8) | xname=d09fd180d0b8d0b2d0b5d18220d09cd0b8d1802021 |
| note | описание объекта | GET параметры (отображается при нажатии на метку) | note=Welcome! GISFile |
| xnote | описание объекта в Hex формате | GET параметры (применяется вместо name, если используются специальные символы) | xnote=d09fd180d0b8d0b2d0b5d182d181d182d0b2d183d0b5d0bc2021 |
| lon | долгота | GET параметры | lon=49.03787 |
| lat | широта | GET параметры | lat=2.28516 |
| z | масштаб карты | GET параметры (по умолчанию 6) | z=5 |
| s | отображение панели поиска объектов | GET параметры (по умолчанию 1) | s=0 |
Отображение объектов на карте
http://gisfile.com/layer/spcities/html?marker&lat=31.95216&lon=5.62500&z=2
http://gisfile.com/map/usa/html
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| marker | группировка отображения объектов | GET параметры | http://gisfile.com/layer/spcities/html?marker |
| icon | позволяет указать для точки наименование иконки | GET параметры | http://gisfile.com/layer/spwifi/html?icon=icon-green |
| lon | долгота | GET параметры | lon=49.03787 |
| lat | широта | GET параметры | lat=2.28516 |
| z | масштаб карты | GET параметры (по умолчанию 6) | z=5 |
| s | отображение панели поиска объектов | GET параметры (по умолчанию 1) | s=0 |
Отображение тайлов на карте
http://gisfile.com/layer/tilekr100/tile&lat=48.51115&lon=32.22427&z=10
http://gisfile.com/map/ukraine/tile
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| lon | долгота | GET параметры | lon=49.03787 |
| lat | широта | GET параметры | lat=2.28516 |
| z | масштаб карты | GET параметры (по умолчанию 6) | z=5 |
| s | отображение панели поиска объектов | GET параметры (по умолчанию 1) | s=0 |
Редактор объектов
http://gisfile.com/layer/SpatialTest/editor
Отображение карты с указанным набором слоёв и стилей на Вашей Html странице
http://gisfile.com/api/html?data=[{"style":{"lat":48.5,"lng":30.4,"zoom":6}},{"layer":"SpatialReg","show":true,"type":"Overlay","style":{"color":"fff","weight":1,"fillOpacity":0.7}},{"layer":"SpatialArea","show":true,"type":"Overlay","style":{"color":"800026","weight":2,"fillColor":"none"}}]
Отображение карты с помощью JavaScript API
Описание отображения карты на Веб-странице или приложении с помощью JavaScript смотрите на странице JavaScript API
Получение Html и JavaScript кода
Получить Html и JavaScript код для отображения карты на Веб-странице или приложении можно на странице Конструктор карты
У Вас присутствует возможность вставить ссылку с набором параметров в JSON формате. Параметры описывают отображаемые слои, цвета, толщину линий, заливку, отображение информационного окна и прочие параметры.
Параметры карты (style)
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| style | параметры карты | json параметры | {"style":{"lat":46.5,"lng":30.4,"zoom":10}} |
| style.lat | широта (WGS 84) | дробное число | "style":{"lat":46.5} |
| style.lng | долгота (WGS 84) | дробное число | "style":{"lng":30.4} |
| style.zoom | масштаб | целое число (от 1 до 19) | "style":{"zoom":10} |
Параметры слоя (layer)
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| layer | слой | текст | "layer":"SpatialReg" |
| show | видимость слоя (загрузка при открытии) | логический (по умолчанию false) | "show":true |
| type | вид отображения слоя | вид (Overlay - объекты слоя, TileLayer - тайлы векторного слоя, TileImage - тайлы растрового слоя) |
"type":"Overlay" |
| name | наименование слоя | текст | "name":"Области" |
| style | параметры отображения для всех объектов | json параметры | "style":{} |
| style.color | цвет линий | HEX строка | "style":{"color":"800026"} |
| style.weight | толщина линий | целое число | "style":{"weight":2} |
| style.popup | отображение информации об объекте | логическое значение (по умолчанию включено) | "style":{"popup":false} - отключить отображение |
| style.fillColor | цвет заливки полигонов | HEX строка | "style":{"fillColor":"BD0026"} - залить цветом "style":{"fillColor":"none"} - без заливки |
| style.fillOpacity | прозрачность заливки полигонов | дробное число (от 0 до 1) | "style":{"fillOpacity":0.7} |
| styles | параметры отображения в зависимости от значения указанного поля | json массив | "styles":{"field":"ID_SpatialReg","styles":[]} |
Параметры стилей слоя (layer.styles)
| Параметр | Описание | Формат | Пример |
|---|---|---|---|
| styles | параметры отображения | json параметры | "styles":{"field":"id","styles":[]} |
| styles.id | наименование поля | строка | "styles":{"field":"id"} |
| styles.styles | массив параметров | json массив | "styles":{"styles":[]} |
| styles.styles[].value | значение поля | любой формат | {"value":5,"color":"FC4E2A"} |
| styles.styles[].color | цвет заливки | HEX строка | {"value":8,"color":"BD0026"} |
http://gisfile.com/api/html?data=[{"style":{"lat":48.5,"lng":30.4,"zoom":6}},{"layer":"SpatialReg","show":true,"type":"Overlay","style":{"color":"fff","weight":1,"fillOpacity":0.7},"styles":{"field":"ID_SpatialReg","styles":[{"value":1,"color":"fcfc7b"},{"value":99,"color":"f8f179"},{"value":148,"color":"FFEDA0"},{"value":198,"color":"FED976"},{"value":247,"color":"FEB24C"},{"value":296,"color":"FD8D3C"},{"value":346,"color":"FC4E2A"},{"value":395,"color":"E31A1C"},{"value":445,"color":"BD0026"},{"value":495,"color":"800026"}]}},{"layer":"SpatialArea","show":true,"type":"Overlay","style":{"color":"800026","weight":2,"fillColor":"none"}}]
Отображение подготовленного проекта с заданными слоями и стилями отображения
http://gisfile.com/map/ukraine/html
В отличии от варианта, когда Вам предоставляется в ссылке указать параметры отображения слоёв, Веб-сервер предоставляет возможность администратору задать эти параметры по умолчанию. Пользователю достаточно только указать ссылку с наименованием проекта.
Необходимо создать "Слой gisfile.com", в параметрах слоя с одноимённым наименованием слоя необходимо ввести ссылку указанную ниже, выбрать из списка наименование слоя, а также в закладке "Проекция" выбрать в какой системе координат необходимо отображать объекты слоя
http://gisfile.com/api
После подключения слоя, с ним можно работать как и с остальными слоями, а именно: создавать, копировать, вставлять, редактировать, удалять и т.п. Обратите внимание, чтобы сохранить изменения необходимо нажать кнопку "Сохранить слой" в верхней панели кнопок.
Получение объектов слоя в формате GeoJSON
http://gisfile.com/layer/SpatialReg/json
| Ссылка | Описание |
|---|---|
| http://gisfile.com/layer/{layer}/json |
Объекты слоя в JSON форматегде {layer} - наименование слоя |
| http://gisfile.com/layer/{layer}/{z}/{x}/{y}.png |
Маска для отображения тайлов слоягде {layer} - наименование слоя, {z} - масштаб, {x}, {y} - позиция тайла |
var geojsonLayer = new L.geoJson();
var map = L.map( 'map').setView([48.60, 31.40], 6);
jQuery.ajax({
url: 'http://gisfile.com/layer/SpatialReg/json',
dataType: 'json',
success: function(response) {
geojsonLayer = L.geoJson( response).addTo(map);
}
});
var geojsonLayer = new L.geoJson();
var map = L.map( 'map').setView([48.60, 31.40], 6);
var osm = new L.TileLayer('http://gisfile.com/layer/areas/{z}/{x}/{y}.png');
map.addLayer(osm);
var geojsonLayer = new L.geoJson();
var map = L.map( 'map').setView([48.60, 31.40], 6);
var osm = new L.TileLayer('http://gisfile.com/layer/tilekr100/{z}/{x}/{y}.png');
map.addLayer(osm);
var geojsonLayer = new L.geoJson();
var map = L.map( 'map').setView([48.60, 31.40], 6);
var osm = new L.TileLayer('http://gisfile.com/map/ukraine/{z}/{x}/{y}.png');
map.addLayer(osm);
jQuery.ajax({
url: 'http://gisfile.com/layers.json',
type: 'POST',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(response) {
alert( response);
}
});