diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor index a344b30..022af1d 100644 --- a/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor +++ b/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor @@ -13,6 +13,7 @@ + @@ -40,6 +41,8 @@ private async Task OnMapClick(Coordinate coordinate) { + _map.MarkersList.Clear(); + switch (_selectedMarkerType) { case MarkerType.MarkerPin: @@ -55,4 +58,14 @@ } } + private async Task AddRandom() + { + var random = new Random((int)DateTime.Now.Ticks); + var extent = _map.LayersList[0].Extent; + for (var i = 0; i < 20; i++) + { + _map.MarkersList.Add( + new Marker(MarkerType.MarkerPin, new Coordinate(random.NextDouble() * (extent[2] - extent[0]) + extent[0], random.NextDouble() * (extent[3] - extent[1]) + extent[1]))); + } + } } \ No newline at end of file diff --git a/src/OpenLayers.Blazor/Map.razor.cs b/src/OpenLayers.Blazor/Map.razor.cs index cccdb07..f040bbf 100644 --- a/src/OpenLayers.Blazor/Map.razor.cs +++ b/src/OpenLayers.Blazor/Map.razor.cs @@ -791,23 +791,20 @@ private void ShapesOnCollectionChanged(object? sender, NotifyCollectionChangedEv foreach (var newShape in e.NewItems.OfType()) newShape.ParentMap = this; - Task.Run(async () => + if (e.Action == NotifyCollectionChangedAction.Reset) { - if (e.Action == NotifyCollectionChangedAction.Reset) - { - await _module.InvokeVoidAsync("MapOLSetShapes", _mapId, null); - } - else - { - if (e.OldItems != null) - foreach (var oldShape in e.OldItems.OfType()) - await _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature); + _ = _module.InvokeVoidAsync("MapOLSetShapes", _mapId, null); + } + else + { + if (e.OldItems != null) + foreach (var oldShape in e.OldItems.OfType()) + _ = _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature); - if (e.NewItems != null) - foreach (var newShape in e.NewItems.OfType()) - await _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature); - } - }); + if (e.NewItems != null) + foreach (var newShape in e.NewItems.OfType()) + _ = _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature); + } } private void MarkersOnCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) @@ -819,22 +816,20 @@ private void MarkersOnCollectionChanged(object? sender, NotifyCollectionChangedE foreach (var newShape in e.NewItems.OfType()) newShape.ParentMap = this; - Task.Run(async () => + // when execute the following as Task, the order of execute of InvoiceAsync cannot be guaranteed + if (e.Action == NotifyCollectionChangedAction.Reset) { - if (e.Action == NotifyCollectionChangedAction.Reset) - { - await _module.InvokeVoidAsync("MapOLMarkers", _mapId, null); - } - else - { - if (e.OldItems != null) - foreach (var oldShape in e.OldItems.OfType()) - await _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature); + _ = _module.InvokeVoidAsync("MapOLMarkers", _mapId, null); + } + else + { + if (e.OldItems != null) + foreach (var oldShape in e.OldItems.OfType()) + _ = _module.InvokeVoidAsync("MapOLRemoveShape", _mapId, oldShape.InternalFeature); - if (e.NewItems != null) - foreach (var newShape in e.NewItems.OfType()) - await _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature); - } - }); + if (e.NewItems != null) + foreach (var newShape in e.NewItems.OfType()) + _ = _module.InvokeVoidAsync("MapOLAddShape", _mapId, newShape.InternalFeature); + } } } \ No newline at end of file diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js index 975307c..6d992b6 100644 --- a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js +++ b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js @@ -443,26 +443,24 @@ MapOL.prototype.findLayer = function (layer) { MapOL.prototype.setMarkers = function (markers) { var source = this.Markers.getSource(); - source.clear(); - - markers.forEach((marker) => { - var feature = this.mapShapeToFeature(marker); - source.addFeature(feature); - }); + if (markers) { + markers.forEach((marker) => { + var feature = this.mapShapeToFeature(marker); + source.addFeature(feature); + }); + } }; MapOL.prototype.setShapes = function (shapes) { var source = this.Geometries.getSource(); - source.clear(); - - if (!shapes) return; - - shapes.forEach((shape) => { - var feature = this.mapShapeToFeature(shape); - source.addFeature(feature); - }); + if (shapes) { + shapes.forEach((shape) => { + var feature = this.mapShapeToFeature(shape); + source.addFeature(feature); + }); + } }; MapOL.prototype.loadGeoJson = function (json, dataProjection, raiseEvents) {