Векторні тайли


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>