Карта KendoUI - как переинициализировать слои

У меня проблема с повторной инициализацией слоев после рендеринга KendoMap. У меня есть информация, что маркеры виджета "Карта" не могут быть изменены динамически, и для визуализации изменений в источнике данных требуется повторная инициализация всего виджета. Аналогичный сценарий демонстрируется в следующей статье HowTo, где выражение фильтра применяется к маркерам DataSource, что аналогично изменению данных https://docs.telerik.com/kendo-ui/knowledge-base/map-filter-markers

Но я не знаю, как я могу повторно инициализировать слои на карте (подобный сценарий через фильтр aplly не работает).

    <!-- HTML divs -->
<div id="listViewEvents"></div>
<div id="listViewVehicles"></div>
<div id="mapEventsAndVehicles"></div>

<script>

// --------------------------------------------------------------------
//      THIS WORKS
// --------------------------------------------------------------------

// declare variables for store markers data
var arrMapMarkesVehicles = [];
var arrMapMarkesEvents = [];

// after all datasources are read
dsVehicles.read().then(function () {

    // events
    var Items = dsEvents.data();
    for (var i = 0; i < Items.length; i++) {
        var Item = {};
        Item.location = [Items[i].lat, Items[i].lon];
        Item.title = "event_" + Items[i].title;
        Item.id = Items[i].id;
        Item.shape = Items[i].shape;
        arrMapMarkesEvents[i] = Item;
    }

    // vehicles
    var Items = dsVehicles.data();
    for (var i = 0; i < Items.length; i++) {
        var Item = {};
        Item.location = [Items[i].lat, Items[i].lon];
        Item.title = "vehicle_" + Items[i].title;
        Item.id = Items[i].id;
        Item.shape = "vehicle";
        arrMapMarkesVehicles[i] = Item;
    }

    // create map with events
    $("#mapEventsAndVehicles").kendoMap({
        center: [60.7, 18.74569],
        zoom: 10,
        markerClick: EventMarkerClick,
        layers: [
            {
                type: "tile",
                urlTemplate: "http://#= subdomain #.tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
                "Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>"
            }, {
                type: "marker",
                dataSource: arrMapMarkesEvents,
                locationField: "location",
                titleField: "title",
                id: "id",
                shape: "shape"
            }, {
                type: "marker",
                dataSource: arrMapMarkesVehicles,
                locationField: "location",
                titleField: "title",
                id: "id",
                shape: "shape"
            }
        ],
    });
});


// --------------------------------------------------------------------
//      HERE IS PROBLEM HOW RE-INITIALIZATION THE MAP
// --------------------------------------------------------------------

// update data
var intUpdateIntervalMs = 3000;
setInterval(function () {
    console.log(kendo.toString(new Date(), 'dd.MM.yyyy HH:MM:ss.fff') + " - Begin update data by interval " + intUpdateIntervalMs + "ms");

    var map = $("#mapEventsAndVehicles").data("kendoMap");
    var options = map.options;
    // 1 points to the markers layer that we want to filter
    options.layers[0].dataSource = $('#listViewEvents').data('kendoListView').dataSource.read();
    options.layers[1].dataSource = $('#listViewVehicles').data('kendoListView').dataSource.read();
    map.destroy();
    map.setOptions(options);
    $("#mapEventsAndVehicles").kendoMap(options);

    console.log(kendo.toString(new Date(), 'dd.MM.yyyy HH:MM:ss.fff') + " - End update data");
}, intUpdateIntervalMs);

</script>

Спасибо и всего наилучшего, Петр

0 ответов

Другие вопросы по тегам