GISFile надає можливість використання векторних тайлів, що працюють за принципом завантаження частин карти (плитки). Використання цього методу виправдане при відображенні карт з великою кількістю об'єктів, а також для відображення скопійованого кешу векторних тайлів в форматах (json, zip, kml, kmz). Нами розроблено декілька бібліотек JavaScript API, які підключені у вікнах відображення шарів і карт, а також можуть бути використані для Ваших розробок.
| Файл | Бібліотека | Формат | Опис |
|---|---|---|---|
| gisfile.box.js | L.GisFileBox | zip (json) | відображення проекту карти |
| gisfile.json.js | L.GisFileJson | json, zip (json) | відображення шару |
| gisfile.kml.js | L.GisFileKml | kml, kmz | відображення шару |
Примітка. Для максимального прискорення тайли для проектів карт і шарів кешуються динамічно і система автоматично не перевіряє наявність змін. Після коректування набору шарів або об'єктів, необхідно натиснути у вікні з параметрами карти або шару кнопку "Оновлення тайлів". Після цього система буде перевіряти дату оновлення тайлів і при необхідності буде виконувати їх оновлення.
<html>
<head>
<script src="http://gisfile.com/js/jquery/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
<script src="http://gisfile.com/js/leaflet.js"></script>
<script src="http://gisfile.com/js/gisfile.box.js"></script>
<script src="http://gisfile.com/js/jszip.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript">
var map = new L.map("map", {
center: [50.4487, 30.5873],
zoom: 10
});
$(function() {
new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var gisfile = new L.GisFileBox({map : 'SpatialTown'}).addTo(map);
gisfile._update();
})
</script>
</body>
</html>
Примітка. З метою зменшення розміру пакетів, що передаються сервером і збільшення швидкості відображення, передаються тільки об'єкти, розмір яких у запитуваному масштабі перевищує 10 пікселів. За замовчуванням, бібліотеки JavaScript також не відображають на карті об'єкти менші, ніж 10 пікселів, навіть якщо вони були завантажені з сервера. Змінити мінімальний розмір можна за допомогою параметру minSize.
<html>
<head>
<script src="http://gisfile.com/js/jquery/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
<script src="http://gisfile.com/js/leaflet.js"></script>
<script src="http://gisfile.com/js/gisfile.json.js"></script>
<script src="http://gisfile.com/js/jszip.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript">
var map = new L.map("map", {
center: [50.43146, 30.99928],
zoom: 16
});
if (map) {
var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer( osm);
new L.GisFileJson({ layer : 'kipai'
, url: 'http://gisfile.com/layer/{l}/{z}/{x}/{y}.zip'
, minSize: 5
, onActiveFeature: function (feature, layer) {
if (feature.properties && feature.properties.name && feature.properties.name.length > 0)
layer.bindPopup( feature.properties.name);
}
, style: function(feature) {
return {weight: 1, fillOpacity: 0.1, color: '#FA0000', fillColor: '#FA0000'};
}
}).addTo(map);
}
</script>
</body>
</html>