feat(view): dynamically update view projection

Author: samuel-girard

projects/ngx-openlayers/src/lib/view.component.ts

@@ -81,6 +81,10 @@ export class ViewComponent implements OnInit, OnChanges, OnDestroy {
               this.instance.setZoom(changes[key].currentValue);
             }
             break;
+          case 'projection':
+            this.instance = new View(this);
+            this.host.instance.setView(this.instance);
+            break;
           default:
             break;
         }

src/app/app.module.ts

@@ -25,6 +25,7 @@ import { ColorSelectHoverComponent } from './color-select-hover/color-select-hov
 import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 import { ImageWMSComponent } from './image-wms/image-wms.component';
+import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
 
 @NgModule({
   declarations: [
@@ -47,6 +48,7 @@ import { ImageWMSComponent } from './image-wms/image-wms.component';
     MarkerComponent,
     ArcgisImageComponent,
     ImageWMSComponent,
+    ViewProjectionUpdateComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

src/app/app.routing.ts

@@ -18,6 +18,7 @@ import { ColorSelectHoverComponent } from './color-select-hover/color-select-hov
 import { MarkerComponent } from './marker/marker.component';
 import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 import { ImageWMSComponent } from './image-wms/image-wms.component';
+import { ViewProjectionUpdateComponent } from './view-projection-update/view-projection-update.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -41,6 +42,7 @@ const routes: Routes = [
       { path: 'raster', component: RasterComponent },
       { path: 'arcgis-image', component: ArcgisImageComponent },
       { path: 'image-wms', component: ImageWMSComponent },
+      { path: 'view-projection-update', component: ViewProjectionUpdateComponent },
     ],
   },
   { path: '**', redirectTo: '' },

src/app/example-list.ts

@@ -94,4 +94,9 @@ export const examplesList = [
     routerLink: 'image-wms',
     openLayersLink: 'https://openlayers.org/en/latest/examples/image-load-events.html',
   },
+  {
+    title: 'View projection update',
+    description: 'Dynamically update view projection.',
+    routerLink: 'view-projection-update',
+  },
 ];

src/app/view-projection-update/view-projection-update.component.ts

@@ -0,0 +1,76 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <aol-map [width]="'100%'" [height]="'100%'">
+      <aol-interaction-default></aol-interaction-default>
+      <aol-view [zoom]="2" [projection]="viewProjection">
+        <aol-coordinate [x]="0" [y]="0" [srid]="'EPSG:4326'"></aol-coordinate>
+      </aol-view>
+      <aol-layer-tile> <aol-source-osm></aol-source-osm> </aol-layer-tile>
+      <aol-layer-vector>
+        <aol-source-vector>
+          <aol-feature>
+            <aol-geometry-point>
+              <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
+            </aol-geometry-point>
+            <aol-style>
+              <aol-style-circle [radius]="10">
+                <aol-style-stroke [color]="'black'" [width]="2"></aol-style-stroke>
+                <aol-style-fill [color]="'green'"></aol-style-fill>
+              </aol-style-circle>
+            </aol-style>
+          </aol-feature>
+          <aol-feature>
+            <aol-geometry-point>
+              <aol-coordinate [x]="5.1" [y]="45.1" [srid]="'EPSG:4326'"></aol-coordinate>
+            </aol-geometry-point>
+            <aol-style>
+              <aol-style-icon
+                [src]="'assets/marker.png'"
+                [anchor]="[0.5, 1]"
+                [anchorXUnits]="'fraction'"
+                [anchorYUnits]="'fraction'"
+                [scale]="0.1"
+                [anchorOrigin]="'top-left'"
+              >
+              </aol-style-icon>
+            </aol-style>
+          </aol-feature>
+        </aol-source-vector>
+      </aol-layer-vector>
+    </aol-map>
+    <div class="controls">
+      Current projection:
+      <select (change)="onProjectionChange($event)">
+        <option value="EPSG:3857">EPSG:3857</option>
+        <option value="EPSG:4326">EPSG:4326</option>
+      </select>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+      }
+
+      aol-map {
+        width: 70%;
+      }
+
+      .controls {
+        width: 28%;
+        padding: 1rem;
+      }
+    `,
+  ],
+})
+export class ViewProjectionUpdateComponent {
+  public viewProjection = 'EPSG:3857';
+
+  onProjectionChange(evt) {
+    console.log(`Projection changed to ${evt.target.value}`);
+    this.viewProjection = evt.target.value;
+  }
+}