feat(source): add Image ArcGIS source (#209)

Author: kekel87

projects/ngx-openlayers/src/lib/sources/imagearcgisrest.component.ts

@@ -0,0 +1,34 @@
+import { Component, forwardRef, Host, Input, OnInit } from '@angular/core';
+import { source, ProjectionLike, Attribution, ImageLoadFunctionType } from 'openlayers';
+import { LayerImageComponent } from '../layers/layerimage.component';
+import { SourceComponent } from './source.component';
+
+@Component({
+  selector: 'aol-source-imagearcgisrest',
+  template: `
+    <ng-content></ng-content>
+  `,
+  providers: [{ provide: SourceComponent, useExisting: forwardRef(() => SourceImageArcGISRestComponent) }],
+})
+export class SourceImageArcGISRestComponent extends SourceComponent implements OnInit {
+  instance: source.ImageArcGISRest;
+
+  @Input() projection: ProjectionLike | string;
+  @Input() url: string;
+  @Input() attributions: Attribution[];
+  @Input() crossOrigin?: string;
+  @Input() imageLoadFunction?: ImageLoadFunctionType;
+  @Input() params?: { [k: string]: any };
+  @Input() ratio = 1;
+  @Input() resolutions?: number[];
+  @Input() logo?: string | olx.LogoOptions;
+
+  constructor(@Host() layer: LayerImageComponent) {
+    super(layer);
+  }
+
+  ngOnInit() {
+    this.instance = new source.ImageArcGISRest(this);
+    this.host.instance.setSource(this.instance);
+  }
+}

projects/ngx-openlayers/src/public_api.ts

@@ -23,6 +23,7 @@ import { SourceTileJSONComponent } from './lib/sources/tilejson.component';
 import { SourceGeoJSONComponent } from './lib/sources/geojson.component';
 import { SourceImageStaticComponent } from './lib/sources/imagestatic.component';
 import { SourceImageWMSComponent } from './lib/sources/imagewms.component';
+import { SourceImageArcGISRestComponent } from './lib/sources/imagearcgisrest.component';
 import { SourceRasterComponent } from './lib/sources/raster.component';
 import { FeatureComponent } from './lib/feature.component';
 import {
@@ -93,6 +94,7 @@ export {
   SourceImageStaticComponent,
   SourceImageWMSComponent,
   SourceRasterComponent,
+  SourceImageArcGISRestComponent,
   FeatureComponent,
   GeometryLinestringComponent,
   GeometryPointComponent,
@@ -164,6 +166,7 @@ const COMPONENTS = [
   SourceGeoJSONComponent,
   SourceImageStaticComponent,
   SourceImageWMSComponent,
+  SourceImageArcGISRestComponent,
   SourceRasterComponent,
   FeatureComponent,
   GeometryLinestringComponent,

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { SwipeComponent } from './swipe/swipe.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
 import { MarkerComponent } from './marker/marker.component';
+import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 
 @NgModule({
   declarations: [
@@ -43,6 +44,7 @@ import { MarkerComponent } from './marker/marker.component';
     OverlayComponent,
     ColorSelectHoverComponent,
     MarkerComponent,
+    ArcgisImageComponent,
   ],
   imports: [BrowserModule, FormsModule, AppRoutingModule, AngularOpenlayersModule, ReactiveFormsModule],
   providers: [],

src/app/app.routing.ts

@@ -16,6 +16,7 @@ import { SwipeComponent } from './swipe/swipe.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { ColorSelectHoverComponent } from './color-select-hover/color-select-hover.component';
 import { MarkerComponent } from './marker/marker.component';
+import { ArcgisImageComponent } from './arcgis-image/arcgis-image.component';
 
 const routes: Routes = [
   { path: '', component: ExamplesListComponent },
@@ -37,6 +38,7 @@ const routes: Routes = [
       { path: 'marker', component: MarkerComponent },
       { path: 'cluster', component: ClusterComponent },
       { path: 'raster', component: RasterComponent },
+      { path: 'arcgis-image', component: ArcgisImageComponent },
     ],
   },
   { path: '**', redirectTo: '' },

src/app/arcgis-image/arcgis-image.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <aol-map>
+      <aol-interaction-default></aol-interaction-default>
+      <aol-control-defaults></aol-control-defaults>
+      <aol-control-fullscreen></aol-control-fullscreen>
+      <aol-view [zoom]="zoom"> <aol-coordinate [x]="-10997148" [y]="4569099"></aol-coordinate> </aol-view>
+      <aol-layer-tile> <aol-source-osm></aol-source-osm> </aol-layer-tile>
+
+      <aol-layer-image>
+        <aol-source-imagearcgisrest
+          projection="EPSG:3857"
+          url="https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"
+        ></aol-source-imagearcgisrest>
+      </aol-layer-image>
+    </aol-map>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+      }
+
+      aol-map {
+        width: 70%;
+        height: 100%;
+      }
+    `,
+  ],
+})
+export class ArcgisImageComponent {
+  public zoom = 4;
+  public opacity = 1.0;
+}

src/app/example-list.ts

@@ -78,4 +78,11 @@ export const examplesList = [
     title: 'Raster',
     routerLink: 'raster',
   },
+  {
+    title: 'Image ArcGIS',
+    description:
+      'Example of using aol-source-imagearcgisrest. This example display exported image of MapServer ArcGis endpoint.',
+    routerLink: 'arcgis-image',
+    openLayersLink: 'https://openlayers.org/en/latest/examples/arcgis-image.html',
+  },
 ];