damir87

Может кому и понадобиться, серый набросок реализации, конечно нужно немного покрасивше код сделать кому пригодится

вызов кнопкой для построения карты

$("#gisSubmit").on("click", function () {
        $.ajax({
            cache: false,
            type: "GET",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            url: "/Flat/JsonMainFlat",
            data: {},
            success: function (data) {
                $.setMarks(data, true);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Ajax Failed!!!");
            }
        }); // end
    });

сама функция

$.setMarks = function setMark(json) {
    
    DG.then(function() {
        // загрузка кода модуля
        return DG.plugin('http://2gis.github.io/mapsapi/vendors/Leaflet.markerCluster/leaflet.markercluster-src.js');
    }).then(function() {
        var markers, map, marks = [], myObjects = [];
        var myIcon = DG.icon({
            iconUrl: 'Content/images/home.png',
            iconSize: [40, 42]
        });

        var myIcon2 = DG.icon({
            iconUrl: 'Content/images/gohome.png',
            iconSize: [30, 32]
        });
        map = DG.map('DGMap', {
            center: DG.latLng(parseFloat(json.Lattitude), parseFloat(json.Longitude)),
            zoom: 15,
            geoclicker: true,
            //minZoom: 10,
            //maxZoom: 17
        });

        markers = DG.markerClusterGroup({
            maxClusterRadius: 30,
            spiderfyDistanceMultiplier: 5
        });

        var coords = map.getBounds();
        marks.push(coords.getSouthWest().lat);
        marks.push(coords.getSouthWest().lng);
        marks.push(coords.getNorthEast().lat);
        marks.push(coords.getNorthEast().lng);

        searchByCoords(marks);
               
        map.on('moveend', function() {
            var isMoved = false;

            var retrievedObject = localStorage.getItem('testObject');
            var storage = JSON.parse(retrievedObject);

            if (storage != null && storage.length > 0 && !isMoved) {
                var theData = JSON.stringify(storage.length);
                flatsEquals(theData, storage);
            } else {
                searchByCoords(marks);
            }
        });

        function setPoints(points, isFlag) {
            var marker;
            if (!isFlag) myIcon = myIcon2;
            // обработка координат для установки маркеров
            for (var i = 0; i < points.length; i++) {
                myObjects.push(points[i]);
                var title = "<div class='item bft-object_md'>\
                                <div class='row'>\
                                    <div class='col-xs-12 col-sm-5'>\
                                        <div class='tail tail_height m-b-10 maw-250'>\
                                            <a href='#' target='_blank'>11\
                                            </a>\
                                        </div>\
                                    </div>\
                                    <div class='omega col-xs-12 col-sm-7'>\
                                        <div class='bft-object__caption bft-object__caption_static p-l-0 p-b-5 p-t-0'>\
                                            <b><a href='#' target='_blank'>" + points[i].Street + "</a></b>\
                                        </div>\
                                        <div class='p-b-5 p-t-0'> " + points[i].House + " </div>\
                                        <div title=\"{7}\">\
                                            <a class='price btn-success btn-sm btn p-r-15 maw-100p' href='#' target='_blank'>\
                                                <span class='item d-i-b'>" + i + "</span>\
                                                <span class='item d-i-b'>\
                                                    <span>{5}</span> <br>\
                                                    <span class='cashless'> " + points[i].Street + " </span>\
                                                </span>\
                                            </a>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>";

                marker = DG.marker([points[i].Lattitude, points[i].Longitude],
                {
                    icon: (i > 0) ? myIcon2 : myIcon,
                    title: title
                });
                marker.bindPopup(title).openPopup();
                markers.addLayer(marker);
            }
            return markers;
        }

        //поиск по координатам, получаем коорды видимой области и достаём все точки в заданной области
        function searchByCoords(marks) {
            var theData = JSON.stringify(marks);
            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Flat/JsonSearchByCoords",
                data: JSON.stringify({ points: theData }),
                success: function(data) {
                    var objects = setPoints(data, true);
                    LocalStorage(data);
                    map.addLayer(objects);
                },
                error: function() {
                    console.log("Ajax Failed!!!");
                }
            });
        }

        //получаем все точки и добавляем на карту
        function getAllFlats(onMapMarks) {
            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Flat/JsonAllFlats",
                data: {},
                success: function (data) {
                    var compare = diff(data, onMapMarks);
                    var objects = setPoints(compare, false);
                    map.addLayer(objects);
                },
                error: function() {
                    console.log("Ajax Failed!!!");
                }
            });
        }

        //проверяем количество точек(только число) на сервере и на клиенте в лок.хранилище
       // to_do желательно произвести оптимизацию
       function flatsEquals(theData, storage) {
            $.ajax({
                cache: false,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Flat/JsonEquals",
                data: JSON.stringify({ points: theData }),
                success: function(data) {
                    if (!data) {
                        getAllFlats(storage);
                    }
                },
                error: function() {
                    alert("Ajax Failed!!!");
                }
            }); // end
        }

        function convert(arr) {

            for (var k = 0, newArr = []; k < arr.length; k++) {
                newArr.push(arr[k].Lattitude + ';' + arr[k].Longitude);
            }
            return newArr;
        }
        //проверяем json_объекты и добавляем новые уникальные на карту и в сам json-обновляя в нём кол-во уникальных объектов
        function diff(arr1, arr2) {

            var tmpArr1 = convert(arr1),
                tmpArr2 = convert(arr2),
                result = [];

            for (var i = 0; i < arr1.length; i++) {
                if (tmpArr2.indexOf(tmpArr1[i]) == -1) {
                    result.push(arr1[i]);
                    myObjects.push(arr1[i]);
                }
            }
            //локальное хранилище
            LocalStorage(myObjects);

            return result;

        }

        //localStorage - локальное хранилище, хранение данных на клиенте, в случае если уже клиент посещал страницы
        //достаём точки из его хранилища, не обращаясь к бд
        function LocalStorage(json) {
            var testObject = json;

            //Помещаем объекты в хранилище
            localStorage.setItem('testObject', JSON.stringify(testObject));

            // получаем объект с хранилища, тестируем
            var retrievedObject = localStorage.getItem('testObject');

            console.log('retrievedObject: ', JSON.parse(retrievedObject));
        }

    });