Estoy consultando datos json de la base de datos y luego realizando algunos procedimientos de filtrado y más. Después de eso, quiero mostrar esos datos en el mapa, así que los paso a través de JSInterop a JavaScript. Todo parece estar funcionando, excepto que en cada ejecución del método obtengo un nuevo mapa en mi página web. Entonces, después de ejecutar el método 4 veces, tengo 4 mapas en la página web.

Por favor comente, si es necesario un código adicional...

Índice.razor:

 <div> <select id="layer-select" style="visibility:hidden;"> <option value="osm" selected>Open Street Map</option> </select> <div class="card-body p-0"> <div id="map"></div> <div id="popup" class="ol-popup"> <a href="#" id="popup-closer" class="ol-popup-closer"></a> <div id="popup-content"></div> </div> </div> </div>

Index.razor.cs:

 [Inject] IJSRuntime JSRuntime { get; set; } ... private async Task UpdateData() { this.SelectedDate = this.SelectedDate.Value.AddDays(1); this.FilteredDataRecords = this.DataRecords .Where(w => w.TimeNow.Date == SelectedDate.Value.Date && (w.Latitude != 0 || w.Longitude != 0)) .OrderBy(o => o.TimeNow) .ToList(); string jsonData = JsonSerializer.Serialize(this.FilteredDataRecords); await JSRuntime.InvokeAsync<object>("olMap.showMap", jsonData); }

mapa.js:

 window.olMap = { showMap: function (jsonData) { var HereLayers = [ { base: 'base', type: 'maptile', scheme: 'osm', }, ]; ... var vectorLayer = new ol.layer.Vector({ source: loadMarineData(JSON.parse(jsonData)), //JSON.parse(jsonData) visible: true, style: new ol.style.Style({ stroke: new ol.style.Stroke({ color: '#d12710', width: 4 }) }) }); var map = new ol.Map({ overlays: [overlay], target: 'map', layers: layers, view: new ol.View({ center: ol.proj.fromLonLat([25.2849, 60.0917]), zoom: 8 }) }); map.addLayer(vectorLayer); map.addLayer(nauticLayer); .... var select = document.getElementById('layer-select'); function onChange() { var scheme = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers[i].setVisible(HereLayers[i].scheme === scheme); } } select.addEventListener('change', onChange); onChange(); } };