Карта 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>
Спасибо и всего наилучшего, Петр