Fix mixed projection for view/coordinates, Fix coordinates transforma…

…tion, Enhancement (#36) * introduce ViewProjection. fix extent * fix coordinates transform * testing * ReadCoordinates Method to explicitly read coordinates. Summary descriptions. * Switch default string format coordinate/extent * DrawDemo split * Revert Coordination/Extent format --------- Co-authored-by: lolochristen <[email protected]>
lolochristen · Feb 2, 2024 · 0938fed · 0938fed
1 parent 2361b16
commit 0938fed
Show file tree

Hide file tree

Showing 16 changed files with 328 additions and 143 deletions.
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/BingMapDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/BingMapDemo.razor
@@ -8,6 +8,7 @@
     </div>
 
     <div class="card-body">
+        <input type="text" @bind-value="_key" width="400px" placeholder="Your Bing Maps Key from https://www.bingmapsportal.com/ ">
         <select @bind="_layerselect">
             <option value="Aerial">Aerial</option>
             <option value="AerialWithLabelsOnDemand">Aerial with labels</option>
@@ -18,10 +19,14 @@
     </div>
 </div>
 
-<BingMap Style="height:800px;" Class="card" ImagerySet="@(_layerselect != null ? Enum.Parse<BingMapImagerySet>(_layerselect) : BingMapImagerySet.RoadOnDemand)" Key="Your Bing Maps Key from https://www.bingmapsportal.com/ here"></BingMap>
+@if (!string.IsNullOrEmpty(_key))
+{
+    <BingMap Style="height: 800px;" Class="card" ImagerySet="@(_layerselect != null ? Enum.Parse<BingMapImagerySet>(_layerselect) : BingMapImagerySet.RoadOnDemand)" Key="@_key"></BingMap>
+}
 
 <CodeView Source="BingMapDemo.razor" />
 
 @code {
     private string? _layerselect;
-}
+    private string? _key;
+}
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/DrawDemo.razor
@@ -1,4 +1,4 @@
-@page "/drawdemo"
+@page "/drawdemo/{MapType?}"
 @using System.Text.Json
 @rendermode Components.RenderMode.DefaultRenderMode
 
@@ -29,26 +29,25 @@
             <input type="range" min="1" max="30" @bind="_styleOptions.Stroke.Width" title="Border Size">
             <input type="button" class="btn btn-primary" value="Undo" @onclick="() => _map.Undo()" />
             <input type="button" class="btn btn-secondary" value="Clear" @onclick="() => _map.ShapesList.Clear()" />
-            <input type="range" min="1080000" max="1280000" value="@_y" @onchange="OnYChange"> <code>@_y</code>
         </div>
     </div>
 </div>
 
-<SwissMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType" Freehand="_freehand">
-    <Popup>
-        <div id="popup" class="ol-box">
-            @if (@context != null)
-            {
-                <h3>@context.Type</h3>
-            }
-        </div>
-    </Popup>
-    <Features>
-        <Line Points="new []{new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650)}" BorderColor="red" BorderSize="2"></Line>
-        <Circle @ref="_circle" Center="_center" Radius="2000" BorderSize="3" BorderColor="blue" BackgroundColor="#55229933"></Circle>
-        <Point Coordinate="new Coordinate(2683276.620804008, 1247123.8311215444)" BackgroundColor="green" Radius="20"></Point>
-    </Features>
-</SwissMap>
+@if (MapType == "osm")
+{
+    <OpenStreetMap @ref="_map" Style="height:800px;" Class="card" OnShapeAdded="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType" Freehand="_freehand">
+    </OpenStreetMap>
+}
+else
+{
+    <SwissMap @ref="_map" Style="height: 800px;" Class="card" OnShapeAdded="StateHasChanged" EnableEditShapes="_enableedit" EnableNewShapes="_enabledraw" EnableShapeSnap="_snap" ShapeStyleCallback="(shape) => _styleOptions" NewShapeType="_shapeType" Freehand="_freehand">
+        <Features>
+            <Line Points="new[] { new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650) }" BorderColor="red" BorderSize="2"></Line>
+            <Circle Center="_center" Radius="2000" BorderSize="3" BorderColor="blue" BackgroundColor="#55229933"></Circle>
+            <Point Coordinate="new Coordinate(2683276.620804008, 1247123.8311215444)" BackgroundColor="green" Radius="20"></Point>
+        </Features>
+    </SwissMap>
+}
 
 @if (_map != null)
 {
@@ -76,10 +75,9 @@
 <CodeView Source="DrawDemo.razor" />
 
 @code {
-    private SwissMap _map = null!;
+    [Parameter] public string? MapType { get; set; }
+    private Map? _map;
     private ShapeType _shapeType = ShapeType.LineString;
-    private double _y = 1197650;
-    private Circle _circle;
     private Coordinate _center = new(2604200, 1197650);
     private bool _enabledraw, _enableedit, _snap = true, _freehand;
 
@@ -102,12 +100,4 @@
             StateHasChanged();
         return base.OnAfterRenderAsync(firstRender);
     }
-
-    private void OnYChange(ChangeEventArgs obj)
-    {
-        _y = Double.Parse(obj.Value.ToString());
-        _center.Y = _y;
-        _circle.Center = _center;
-        _ = _circle.UpdateShape();
-    }
 }
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/Index.razor
@@ -30,9 +30,9 @@
         <p>
             <pre>
 Center:@_map?.Center
-Last Position: @_lastPosition?.X / @_lastPosition?.Y
+Last Position: @_lastPosition
 Altitude @(_altitude)m
-Mouse Position: @_mousePosition?.X / @_mousePosition?.Y
+Mouse Position: @_mousePosition
 Visible Extent: @_map?.VisibleExtent
 @_info
         </pre>
@@ -46,14 +46,14 @@ Visible Extent: @_map?.VisibleExtent
             @if (context is Marker marker)
             {
                 <h3>@marker.Title</h3>
-                <p>@marker.Coordinate.X / @marker.Coordinate.Y</p>
+                <p>@marker.Coordinate.X,@marker.Coordinate.Y</p>
             }
         </div>
     </Popup>
     <Features>
         <Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(2604200, 1197650)" Popup></Marker>
-         <Marker Type="MarkerType.MarkerFlag" Coordinate="new Coordinate(2624200, 1177650)" Title="Hallo" BackgroundColor="#449933" Popup></Marker>
-         <Line Points="new[] { new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650) }" BorderColor="cyan"></Line>
+        <Marker Type="MarkerType.MarkerFlag" Coordinate="new Coordinate(2624200, 1177650)" Title="Hallo" BackgroundColor="#449933" Popup></Marker>
+        <Line Points="new[] { new Coordinate(2604200, 1197650), new Coordinate(2624200, 1177650) }" BorderColor="cyan"></Line>
      </Features>
  </SwissMap>
 

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/MarkersDemo.razor
@@ -22,7 +22,7 @@
             @if (context is Marker marker)
             {
                 <h3>@marker.Title</h3>
-                <p>@marker.Coordinate.X / @marker.Coordinate.Y</p>
+                <p>@marker.Coordinate</p>
             }
         </div>
     </Popup>

diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/OpenStreetMapDemo.razor
@@ -8,7 +8,7 @@
     <div class="card-body">
     <p>Demo with a loaded KML Layer on first map, custom WMS source on second map, synced center and a Graticule Layer on second map.</p>
     <pre>
-Center: @_center
+Center: @_map?.Center
 VisibleExtent: @_map?.VisibleExtent
 Zoom: @_map?.Zoom
     </pre>
@@ -35,12 +35,24 @@ Zoom: @_map?.Zoom
         </Layer>
         <Layer SourceType="SourceType.Graticule" />
     </Layers>
+
+    <Features>
+        <Marker Type="MarkerType.MarkerPin" Coordinate="new Coordinate(x, y)" Title="You are Here" Popup></Marker>
+        <Circle Center="new Coordinate(x, y)" Radius="50" BackgroundColor="#2222AA66"></Circle>
+        <Point Coordinate="new Coordinate(x, y)" BorderSize="4" BorderColor="red" BackgroundColor="cyan" Radius="3"></Point>
+        <Point Coordinate="new Coordinate(x2, y2)" BorderSize="4" BorderColor="red" BackgroundColor="cyan" Radius="3"></Point>
+         <Line Points="new []{ new Coordinate(x, y), new Coordinate(x2, y2) }" BorderColor="cyan" BorderSize="20" BackgroundColor="cyan" Title="Test"></Line>
+    </Features>
+
+
 </OpenStreetMap>
 
 <CodeView Source="OpenStreetMapDemo.razor"/>
 
 @code {
-    private Coordinate _center = new(7.6, 46.5);
-    private OpenStreetMap _map;
+    private double x = 11, y = 49, x2 = 12, y2 = 48;
+    private Coordinate _center = new(11, 49);
+    //private OpenStreetMap _map;
+    private Map _map;
     private dynamic _kmlOptions = new { ShowPointNames = true, ExtractStyles = true };
 }
diff --git a/src/OpenLayers.Blazor.Demo.Components/Pages/SwissMapLayersDemo.razor b/src/OpenLayers.Blazor.Demo.Components/Pages/SwissMapLayersDemo.razor
@@ -92,7 +92,7 @@
     {
         string url = $"https://api3.geo.admin.ch/rest/services/all/MapServer/identify?geometry={coordinate.X},{coordinate.Y}&geometryFormat=geojson&geometryType=esriGeometryPoint&imageDisplay=975,1117,96&lang=en&layers=all:{_selectedLayer}&limit=10&mapExtent={_map.VisibleExtent.X1},{_map.VisibleExtent.Y1},{_map.VisibleExtent.X2},{_map.VisibleExtent.Y2}&returnGeometry=true&sr=2056&timeInstant=2021&tolerance=10";
         var json = await HttpClient.GetFromJsonAsync<JsonElement>(url);
-        var results = json.GetProperty("results");await _map.LoadGeoJson(results[0], _map.Defaults.CoordinatesProjection); // json is in EPSG:2056
+        var results = json.GetProperty("results");await _map.LoadGeoJson(results[0], _map.Options.CoordinatesProjection); // json is in EPSG:2056
     }
 
     private void OnFeatureClick(Feature feature)

diff --git a/src/OpenLayers.Blazor.Demo.Server/Components/Layout/NavMenu.razor b/src/OpenLayers.Blazor.Demo.Server/Components/Layout/NavMenu.razor
@@ -56,10 +56,15 @@
                 <span class="oi oi-plus" aria-hidden="true"></span> Custom Map
             </NavLink>
         </div>
-
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="/drawdemo">
-                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes
+                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes (Swiss)
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/drawdemo/osm">
+                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes (OSM)
             </NavLink>
         </div>
 

diff --git a/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor b/src/OpenLayers.Blazor.Demo/Shared/NavMenu.razor
@@ -59,7 +59,13 @@
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="/drawdemo">
-                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes
+                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes (Swiss)
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="/drawdemo/osm">
+                <span class="oi oi-plus" aria-hidden="true"></span> Draw Shapes (OSM)
             </NavLink>
         </div>
 

diff --git a/src/OpenLayers.Blazor/Defaults.cs b/src/OpenLayers.Blazor/Defaults.cs
diff --git a/src/OpenLayers.Blazor/Extent.cs b/src/OpenLayers.Blazor/Extent.cs
@@ -9,6 +9,17 @@ public Extent()
     {
     }
 
+    public Extent(double[] array)
+    {
+        if (array.Length != 4)
+            throw new ArgumentException("Extent must contain 4 elements.", nameof(array));
+
+        X1 = array[0];
+        Y1 = array[1];
+        X2 = array[2];
+        Y2 = array[3];
+    }
+
     public Extent(double x1, double y1, double x2, double y2)
     {
         X1 = x1;
@@ -39,4 +50,9 @@ public override string ToString()
     {
         return $"{X1}/{Y1}:{X2}/{Y2}";
     }
+
+    public double[] ToArray()
+    {
+        return new[] { X1, Y1, X2, Y2 };
+    }
 }
diff --git a/src/OpenLayers.Blazor/Feature.cs b/src/OpenLayers.Blazor/Feature.cs
@@ -37,7 +37,7 @@ public string Id
         set => InternalFeature.Id = value;
     }
 
-    protected Internal.Feature InternalFeature
+    internal Internal.Feature InternalFeature
     {
         get => _internalFeature;
         set
@@ -49,15 +49,33 @@ protected Internal.Feature InternalFeature
         }
     }
 
+    /// <summary>
+    /// Gets the geometry type of the feature.
+    /// </summary>
     public GeometryTypes? GeometryType => InternalFeature.GeometryType;
 
+    /// <summary>
+    /// Gets to type of feature.
+    /// </summary>
     public string? Type => InternalFeature.Type;
 
+    /// <summary>
+    /// Gets a dictionary of all dynamic properties of a feature.
+    /// </summary>
     public Dictionary<string, dynamic> Properties => InternalFeature.Properties;
 
-    public Coordinate? Point => Coordinates?.FirstOrDefault();
+    /// <summary>
+    /// Gets the point coordinate if the shape is defined by a single coordinate e.g. point, circle.
+    /// </summary>
+    public Coordinate? Point => CoordinatesHelper.IsSingleCoordinate(InternalFeature.Coordinates) ? Coordinates?.FirstOrDefault() : null;
 
-    public IEnumerable<Coordinate>? Coordinates => CoordinatesHelper.GetCoordinates(InternalFeature.Coordinates);
+    /// <summary>
+    /// Gets an enumerator of coordinates e.g. for a line.
+    /// </summary>
+    public IEnumerable<Coordinate>? Coordinates => !CoordinatesHelper.IsMultiCoordinate(InternalFeature.Coordinates) ? CoordinatesHelper.GetCoordinates(InternalFeature.Coordinates) : null;
 
-    public IEnumerable<IEnumerable<Coordinate>> MultiCoordinates => CoordinatesHelper.GetMultiCoordinates(InternalFeature.Coordinates);
+    /// <summary>
+    /// Gets an enumerator of multi coordinates e.g. for a multi line or multi polygon shape.
+    /// </summary>
+    public IEnumerable<IEnumerable<Coordinate>>? MultiCoordinates => CoordinatesHelper.IsMultiCoordinate(InternalFeature.Coordinates) ? CoordinatesHelper.GetMultiCoordinates(InternalFeature.Coordinates) : null;
 }
diff --git a/src/OpenLayers.Blazor/Internal/CoordinatesHelper.cs b/src/OpenLayers.Blazor/Internal/CoordinatesHelper.cs
@@ -21,6 +21,16 @@ public static double[] SetPoint(Coordinate coordinate)
         return coordinate.Value;
     }
 
+    public static bool IsSingleCoordinate(dynamic coordinates)
+    {
+        return !IsMultiCoordinate(coordinates) && (coordinates is double[] || ((coordinates is IEnumerable<double[]> c1) && c1.Count() == 1));
+    }
+
+    public static bool IsMultiCoordinate(dynamic coordinates)
+    {
+        return coordinates is IEnumerable<IEnumerable<double[]>>;
+    }
+
     public static IEnumerable<Coordinate>? GetCoordinates(dynamic coordinates)
     {
         if (coordinates is double[] c1)