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>