Skip to content

Commit

Permalink
New parameter Rotation and flag if interactions are active.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lolochristen
lolochristen committed Mar 4, 2024
1 parent b51c593 commit 87b9ddc
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 17 deletions.
19 changes: 15 additions & 4 deletions src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,19 @@
}
<button class="btn btn-primary" @onclick="CenterLocation">Center to current location</button>
<button class="btn btn-primary" @onclick="AddMarkLocation">Add Mark at current location</button>
<button class="btn btn-primary" @onclick="SetVisibleExtent">Beautiful</button>
<div class="input-group">
<button class="btn btn-secondary" @onclick="SetVisibleExtent">Beautiful</button>

<input type="checkbox" class="btn-check" id="btninteract" autocomplete="off" @bind="_enableInteractions">
<label class="btn btn-outline-info" for="btninteract">Interactive</label>
</div>
<div class="d-flex">
<div class="input-group w-25">
<label for="zoom" class="form-label small">Zoom @_zoom</label>
<input type="range" class="form-range" id="zoom" min="1" max="15" @bind-value="_zoom">
<input type="range" class="form-range" id="zoom" min="1" max="15" step=".1" @bind-value="_zoom">
</div>
<div class="input-group w-25 m-lg-2">
<label for="rotation" class="form-label small">Rotation @_rotation</label>
<input type="range" class="form-range" id="rotation" step=".1" min="-6" max="6" @bind-value="_rotation">
</div>
</div>
<p>
Expand All @@ -45,7 +54,7 @@ Visible Extent: @_map?.VisibleExtent
</div>
</div>

<SwissMap @ref="_map" OnClick="OnMapClick" OnPointerMove="OnPointerMove" OnRenderComplete="@(() => { _info = "Render complete: " + DateTime.Now.ToString("h:mm:ss.ms"); })" @bind-Zoom="_zoom" Style="height:800px;" Class="card">
<SwissMap @ref="_map" OnClick="OnMapClick" OnPointerMove="OnPointerMove" OnRenderComplete="@(() => { _info = "Render complete: " + DateTime.Now.ToString("h:mm:ss.ms"); })" @bind-Zoom="_zoom" Style="height:800px;" Class="card" InteractionsEnabled="@_enableInteractions" @bind-Rotation="_rotation">
<Popup>
<div id="popup" class="ol-box">
@if (context is Marker marker)
Expand All @@ -71,6 +80,8 @@ Visible Extent: @_map?.VisibleExtent
private decimal _altitude;
private Coordinate? _lastPosition;
private string _info = "";
bool _enableInteractions = true;
private double _rotation;

[Inject]
HttpClient HttpClient { get; set; }
Expand Down
63 changes: 60 additions & 3 deletions src/OpenLayers.Blazor/Map.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@ public Map()
_counter++;
_mapId = "map_" + _counter;
_popupId = "map_popup_" + _counter;

EnableShapeSnap = true;
}

[Inject] private IJSRuntime? JSRuntime { get; set; }
Expand All @@ -46,6 +44,20 @@ public Map()
[Parameter]
public EventCallback<Coordinate> CenterChanged { get; set; }

/// <summary>
/// Gets or set the rotation of the map in radians.
/// Negative value = counter-clockwise
/// Positive value = clockwise
/// </summary>
[Parameter]
public double Rotation { get; set; } = 0;

/// <summary>
/// Event when rotation changes
/// </summary>
[Parameter]
public EventCallback<double> RotationChanged { get; set; }

/// <summary>
/// Zoom level of the map
/// </summary>
Expand Down Expand Up @@ -244,6 +256,12 @@ public bool AutoPopup

[Parameter] public Func<Shape, StyleOptions> ShapeStyleCallback { get; set; } = DefaultShapeStyleCallback;

/// <summary>
/// Set or gets if any interaction is active.
/// </summary>
[Parameter]
public bool InteractionsEnabled { get; set; }

/// <summary>
/// Disposing resources.
/// </summary>
Expand All @@ -270,9 +288,15 @@ public override Task SetParametersAsync(ParameterView parameters)
if (parameters.TryGetValue(nameof(Center), out Coordinate center) && !center.Equals(Center))
_ = SetCenter(center);

if (parameters.TryGetValue(nameof(Rotation), out double rotation) && !rotation.Equals(Rotation))
_ = SetRotation(rotation);

if (parameters.TryGetValue(nameof(VisibleExtent), out Extent extent) && !extent.Equals(VisibleExtent))
_ = SetVisibleExtent(extent);

if (parameters.TryGetValue(nameof(InteractionsEnabled), out bool interactionsEnabled) && interactionsEnabled != InteractionsEnabled)
_ = SetInteractions(interactionsEnabled);

short drawingChanges = 0;
if (parameters.TryGetValue(nameof(EnableNewShapes), out bool newShapes) && newShapes != EnableNewShapes)
drawingChanges++;
Expand Down Expand Up @@ -315,7 +339,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
Instance ??= DotNetObjectReference.Create(this);

if (_module != null)
await _module.InvokeVoidAsync("MapOLInit", _mapId, _popupId, Options, Center, Zoom,
await _module.InvokeVoidAsync("MapOLInit", _mapId, _popupId, Options, Center, Zoom, Rotation, InteractionsEnabled,
MarkersList.Select(p => p.InternalFeature).ToArray(),
ShapesList.Select(p => p.InternalFeature).ToArray(),
LayersList.Select(p => p.InternalLayer).ToArray(),
Expand All @@ -327,6 +351,12 @@ await _module.InvokeVoidAsync("MapOLInit", _mapId, _popupId, Options, Center, Zo
}
}

protected override void OnInitialized()
{
EnableShapeSnap = true;
InteractionsEnabled = true;
}

[JSInvokable]
public async Task OnInternalFeatureClick(Internal.Feature feature)
{
Expand Down Expand Up @@ -384,6 +414,13 @@ public async Task OnInternalCenterChanged(Coordinate coordinate)
}
}

[JSInvokable]
public async Task OnInternalRotationChanged(double rotation)
{
Rotation = rotation;
await RotationChanged.InvokeAsync(rotation);
}

[JSInvokable]
public async Task OnInternalVisibleExtentChanged(Extent visibleExtent)
{
Expand Down Expand Up @@ -448,6 +485,16 @@ public async Task SetCenter(Coordinate center)
if (_module != null) await _module.InvokeVoidAsync("MapOLCenter", _mapId, center);
}

/// <summary>
/// Sets the rotation of the map.
/// </summary>
/// <param name="rotation">Rotation in radians</param>
/// <returns>Task</returns>
public async Task SetRotation(double rotation)
{
if (_module != null) await _module.InvokeVoidAsync("MapOLRotate", _mapId, rotation);
}

[JSInvokable]
public async Task OnInternalZoomChanged(double zoom)
{
Expand Down Expand Up @@ -551,6 +598,16 @@ public async Task SetVisibleExtent(Extent extent)
if (_module != null) await _module.InvokeVoidAsync("MapOLSetVisibleExtent", _mapId, extent);
}

/// <summary>
/// Set interactions settings
/// </summary>
/// <param name="active"></param>
/// <returns></returns>
public async Task SetInteractions(bool active)
{
if (_module != null) await _module.InvokeVoidAsync("MapOLSetInteractions", _mapId, active);
}

[JSInvokable]
public StyleOptions OnGetShapeStyle(Internal.Shape shape)
{
Expand Down
45 changes: 35 additions & 10 deletions src/OpenLayers.Blazor/wwwroot/openlayers_interop.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
var _MapOL = new Array();

export function MapOLInit(mapId, popupId, options, center, zoom, markers, shapes, layers, instance) {
_MapOL[mapId] = new MapOL(mapId, popupId, options, center, zoom, markers, shapes, layers, instance);
export function MapOLInit(mapId, popupId, options, center, zoom, rotation, interactions, markers, shapes, layers, instance) {
_MapOL[mapId] = new MapOL(mapId, popupId, options, center, zoom, rotation, interactions, markers, shapes, layers, instance);
}

export function MapOLDispose(mapId) {
Expand All @@ -12,6 +12,10 @@ export function MapOLCenter(mapId, point) {
_MapOL[mapId].setCenter(point);
}

export function MapOLRotate(mapId, rotation) {
_MapOL[mapId].setRotation(rotation);
}

export function MapOLZoom(mapId, zoom) {
_MapOL[mapId].setZoom(zoom);
}
Expand Down Expand Up @@ -88,10 +92,14 @@ export function MapOLGetCoordinates(mapId, shapeId) {
return _MapOL[mapId].getCoordinates(shapeId);
}

export function MapOLSetInteractions(mapId, active) {
_MapOL[mapId].setInteractions(active);
}


// --- MapOL ----------------------------------------------------------------------------//

function MapOL(mapId, popupId, options, center, zoom, markers, shapes, layers, instance) {
function MapOL(mapId, popupId, options, center, zoom, rotation, interactions, markers, shapes, layers, instance) {
this.Instance = instance;
this.Options = options;

Expand Down Expand Up @@ -185,8 +193,10 @@ function MapOL(mapId, popupId, options, center, zoom, markers, shapes, layers, i
projection: viewProjection,
center: viewCenter,
extent: viewExtent,
zoom: zoom
})
zoom: zoom,
rotation: rotation
}),
interactions: ol.interaction.defaults.defaults().extend([new ol.interaction.DragRotateAndZoom()])
});

var that = this;
Expand Down Expand Up @@ -226,6 +236,10 @@ function MapOL(mapId, popupId, options, center, zoom, markers, shapes, layers, i
this.Map.on("rendercomplete", function (evt) { that.Instance.invokeMethodAsync("OnInternalRenderComplete"); });
this.Map.getView().on("change:resolution", function (evt) { that.onMapResolutionChanged(); });
this.Map.getView().on("change:center", function (evt) { that.onMapCenterChanged(); });
this.Map.getView().on("change:rotation", function (evt) { that.onMapRotationChanged(); });

this.setInteractions(interactions);

this.setMarkers(markers);
this.setShapes(shapes);

Expand Down Expand Up @@ -472,11 +486,6 @@ MapOL.prototype.loadGeoJson = function (json, dataProjection, raiseEvents) {
if (raiseEvents) features.forEach((f, i, arr) => { that.onFeatureAdded(f) });
};

//MapOL.wait = async function wait() {
// await new Promise(resolve => setTimeout(resolve, 500));
// return null;
//}

MapOL.prototype.setZoom = function (zoom) {
this.Map.getView().setZoom(zoom);
};
Expand All @@ -503,10 +512,20 @@ MapOL.prototype.setCenter = function (point) {
this.Map.getView().getProjection()));
};

MapOL.prototype.setRotation = function (rotation) {
this.Map.getView().setRotation(rotation);
};

MapOL.prototype.setOptions = function (options) {
this.Options = options;
};

MapOL.prototype.setInteractions = function (active) {
this.Map.getInteractions().forEach((interaction, i, arr) => {
interaction.setActive(active);
});
};

MapOL.prototype.getReducedFeature = function (feature) {
const type = feature.getGeometry().getType();

Expand Down Expand Up @@ -599,6 +618,12 @@ MapOL.prototype.onMapCenterChanged = function () {
this.onVisibleExtentChanged();
};

MapOL.prototype.onMapRotationChanged = function () {
const rotation = this.Map.getView().getRotation();
if (!rotation) return;
this.Instance.invokeMethodAsync("OnInternalRotationChanged", rotation);
};

MapOL.prototype.onVisibleExtentChanged = function () {
if (this.disableVisibleExtentChanged) return;
const extentArray = this.Map.getView().calculateExtent(this.Map.getSize());
Expand Down

0 comments on commit 87b9ddc

Please sign in to comment.