JavaScript API 1.0

Векторные тайлы

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>