JavaScript API 1.0

Динамический слой

Для отображения векторного слоя на карте можно использовать рассмотренные выше методы, но они отображают объекты после загрузки всего слоя. Чтобы выполнить загрузку и отображение объектов в динамике или только для отображаемой области, можно использовать метод порционной загрузки объектов в фоне.

Подключение Leaflet динамического слоя

<html>
    <head>
        <link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
        <script src="http://gisfile.com/js/jquery.min.js"></script>
        <script src="http://gisfile.com/js/leaflet.js"></script>
        <script src="http://gisfile.com/js/leaflet.gisfile.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 500px"></div>

        <script type="text/javascript">
            var map = new L.map("map", {
                    center: [48.546, 31.201], 
                    zoom: 5
                });

            if (map) {
                var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
                map.addLayer( osm);

                if (L.GISFileAPI) {
                    new L.GISFileAPI({layer:'areas',popup:false}).addTo(map);
                }
            }
        </script>
    </body>
</html>
 

Параметры загрузки API

Параметры загрузки позволяют максимально упростить отображение карты на Веб-страницах и в приложениях. Используя всего одну строчку кода для загрузки JavaScript с параметрами, можно решить множество стандартных задач. Строку кода можно получить в дизайнере карт всего в несколько кликов мышки. Рассмотрим подробнее параметры загрузки JavaScript API.

ПараметрОписаниеФорматПример
layer отображает указанный слой на карте layer:'<идентификатор слоя>' layer:'SPworld'
field имя поля в слое field:"Имя поля" field:"uid"
ids массив идентификаторов ids:[{"Имя поля":"Код объекта"}] ids:[{ "Id": 125}, { "Id": 20}, { "Id": 435}]
name имя поля в массиве идентификаторов name:"Имя поля" name:"id"
filter фильтр объектов filter":{"Имя поля":"Значение"} filter:"{uid:[728,20]}"
count Размер пакета объектов count:количество count:100 (по умолчанию 100)
caching Кэширование запросов на сервере caching: (true, false) по умолчанию true
inbox Загружать объекты для видимой области inbox: (true, false) по умолчанию false
popup Всплывающее окно popup: (true, false) по умолчанию true
minZoom минимальный масштаб minZoom:значение (значение от 1 до 19) minZoom:10
maxZoom максимальный масштаб maxZoom:значение (значение от 1 до 19) maxZoom:19
style функция стилей для объектов    
onEachFeature функция для обработки объектов    
attribution информация о слое attribution:"html текст" attribution:'GISFile.com'

Отображение слоя с собственными параметрами отображения и всплывающим окном

<html>
    <head>
        <link rel="stylesheet" href="http://gisfile.com/css/leaflet.css" />
        <script src="http://gisfile.com/js/jquery.min.js"></script>
        <script src="http://gisfile.com/js/leaflet.js"></script>
        <script src="http://gisfile.com/js/leaflet.gisfile.js"></script>
    </head>
    <body>
        <div id="map" style="width: 100%; height: 500px"></div>

        <script type="text/javascript">
            var map = new L.map("map", {
                    center: [48.546, 31.201], 
                    zoom: 5
                });

            if (map) {
                var osm = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
                map.addLayer( osm);

                if (L.GISFileAPI) 
                {
                    var gisfile = new L.GISFileAPI({
                        layer : 'USAStates',
                        style: function(feature) {
var color = "#f1e9a0";
                            var styles = [{"value":["California"],"color":"#f2c8e7"},{"value":["Delaware"],"color":"#ebbbde"},{"value":["Washington"],"color":"#850d6d"}];
                            var val = feature.properties[ "state_name"];
                            
                            if (val) {
                                for (var s in styles) {
                                    var st = styles[ s];
                                    
                                    if (st.value == val)
                                        color = st.color;
                                }
                            }

                            return {"fillColor": color,"fillOpacity":0.3,"color":"#e2b823","opacity":0.5,"weight":1};
                        }, 
                        onEachFeature: function(feature, layer) 
                        {
                            var items = feature.properties; 
                            var popupContent = items.state_name;
                            layer.bindPopup(popupContent);
                        }
                    });        
                    gisfile.addTo(map);
                }
            }
        </script>
    </body>
</html>