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>