feat(hover): Hover feature (#779)

* feat(vectorLayer) add a hover directive #773 * feat(layerVector.hover) add hover for layer vector and fix #765 * feat(map.hover) delete hover screen on single click * feat (map.hover) fix lint * Delete mapboxStyle-covid.json no need ... * Delete mapboxStyle-covidcomplet.json no need ... * Update hover-routing.module.ts Co-authored-by: Marc-André Trottier <trottier.marcandre@msp.gouv.qc.ca> Co-authored-by: Marc-André Barbeau <marc-andre.barbeau@msp.gouv.qc.ca>
infra-geo-ouverte · Nov 16, 2020 · aa182ec · aa182ec
1 parent 09826e6
commit aa182ec
Show file tree

Hide file tree

Showing 14 changed files with 697 additions and 9 deletions.
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -42,6 +42,7 @@ <h5>{{version.lib}}</h5>
         <a mat-list-item routerLink="overlay">Overlay</a>
         <a mat-list-item routerLink="geometry">Geometry</a>
         <a mat-list-item routerLink="feature">Feature</a>
+        <a mat-list-item routerLink="hover">Hover</a>
         <a mat-list-item routerLink="measure">Measure</a>
         <a mat-list-item routerLink="query">Query</a>
         <a mat-list-item routerLink="catalog">Catalog</a>

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { AppLegendModule } from './geo/legend/legend.module';
 import { AppOverlayModule } from './geo/overlay/overlay.module';
 import { AppGeometryModule } from './geo/geometry/geometry.module';
 import { AppFeatureModule } from './geo/feature/feature.module';
+import { AppHoverModule } from './geo/hover/hover.module';
 import { AppMeasureModule } from './geo/measure/measure.module';
 import { AppQueryModule } from './geo/query/query.module';
 import { AppCatalogModule } from './geo/catalog/catalog.module';
@@ -85,6 +86,7 @@ import { AppComponent } from './app.component';
     AppOverlayModule,
     AppGeometryModule,
     AppFeatureModule,
+    AppHoverModule,
     AppMeasureModule,
     AppQueryModule,
     AppCatalogModule,

diff --git a/demo/src/app/geo/hover/hover-routing.module.ts b/demo/src/app/geo/hover/hover-routing.module.ts
@@ -0,0 +1,13 @@
+import { Routes, RouterModule } from '@angular/router';
+import { AppHoverComponent } from './hover.component';
+
+const routes: Routes = [
+  {
+    path: 'hover',
+    component: AppHoverComponent
+  }
+];
+
+export const AppHoverRoutingModule = RouterModule.forChild(
+  routes
+);
diff --git a/demo/src/app/geo/hover/hover.component.html b/demo/src/app/geo/hover/hover.component.html
@@ -0,0 +1,21 @@
+<mat-card>
+  <mat-card-subtitle>Geo</mat-card-subtitle>
+  <mat-card-title>Hover</mat-card-title>
+  <mat-card-content>
+    <li>Dependencies: LanguageService</li>
+
+    <br>
+    See the <a href="https://github.com/infra-geo-ouverte/igo2-lib/tree/master/demo/src/app/geo/hover">code of this example</a>
+    <hr>
+  </mat-card-content>
+
+  <igo-map-browser [map]="map" [view]="view"
+  igoHoverFeature
+  [igoHoverFeatureDelay]="pointerHoverFeatureDelay"
+  [igoHoverFeatureEnabled]="true">
+    <igo-zoom-button [map]="map" color="primary"></igo-zoom-button>
+    <igo-geolocate-button [map]="map" color="primary"></igo-geolocate-button>
+    <igo-rotation-button [map]="map" [showIfNoRotation]="true" color="primary"></igo-rotation-button>
+  </igo-map-browser>
+
+</mat-card>
diff --git a/demo/src/app/geo/hover/hover.component.scss b/demo/src/app/geo/hover/hover.component.scss
@@ -0,0 +1,4 @@
+igo-map-browser {
+  width: 100%;
+  height: 500px;
+}
diff --git a/demo/src/app/geo/hover/hover.component.ts b/demo/src/app/geo/hover/hover.component.ts
@@ -0,0 +1,155 @@
+import { Component } from '@angular/core';
+
+import { LanguageService, MediaService } from '@igo2/core';
+import { IgoMap, DataSourceService, LayerService, WFSDataSourceOptions, VectorLayerOptions, WFSDataSource } from '@igo2/geo';
+import { transform } from 'ol/proj';
+
+@Component({
+  selector: 'app-hover',
+  templateUrl: './hover.component.html',
+  styleUrls: ['./hover.component.scss']
+})
+export class AppHoverComponent {
+  public selected;
+  public pointerCoord;
+  public pointerCoordDelay: number = 0;
+  public pointerHoverFeatureDelay: number = 0;
+  public map = new IgoMap({
+    controls: {
+      attribution: {
+        collapsed: true
+      },
+      scaleLine: true
+    }
+  });
+
+  public view = {
+    center: [-73, 47.2],
+    zoom: 8,
+    projection: 'EPSG:3857'
+  };
+
+
+  get media() {
+    return this.mediaService.getMedia();
+  }
+
+  get isTouchScreen() {
+    return this.mediaService.isTouchScreen();
+  }
+
+  constructor(
+    private languageService: LanguageService,
+    private dataSourceService: DataSourceService,
+    private layerService: LayerService,
+    private mediaService: MediaService
+  ) {
+
+    this.dataSourceService
+    .createAsyncDataSource({
+      type: 'wmts',
+      url: 'https://geoegl.msp.gouv.qc.ca/carto/wmts/1.0.0/wmts',
+      layer: 'carte_gouv_qc_public',
+      matrixSet: 'EPSG_3857',
+      version: '1.3.0'
+    })
+    .subscribe(dataSource => {
+      this.map.addLayer(
+        this.layerService.createLayer({
+          title: 'Quebec',
+          visible: true,
+          baseLayer: true,
+          source: dataSource
+        })
+      );
+    });
+
+    interface WFSDataOptions
+      extends WFSDataSourceOptions {}
+
+    const wfsDatasourcePolygon: WFSDataOptions = {
+      type: 'wfs',
+      url: '/ws/igo_gouvouvert.fcgi',
+      params: {
+        featureTypes: 'adn_bassin_n1_public_v',
+        fieldNameGeometry: 'geometry',
+        maxFeatures: 10000,
+        version: '3.0.0',
+        outputFormat: undefined,
+        outputFormatDownload: 'shp'
+      }
+    };
+
+    this.dataSourceService
+      .createAsyncDataSource(wfsDatasourcePolygon)
+      .subscribe((dataSource: WFSDataSource) => {
+        const layer: VectorLayerOptions = {
+          title: 'WFS (polygon)',
+          visible: true,
+          source: dataSource
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+
+    const wfsDatasourcePoint: WFSDataOptions = {
+      type: 'wfs',
+      url: '/ws/igo_gouvouvert.fcgi',
+      params: {
+        featureTypes: 'CASERNE',
+        fieldNameGeometry: 'geometry',
+        maxFeatures: 10000,
+        version: '3.0.0',
+        outputFormat: undefined,
+        outputFormatDownload: 'shp'
+      }
+    };
+
+    this.dataSourceService
+      .createAsyncDataSource(wfsDatasourcePoint)
+      .subscribe((dataSource: WFSDataSource) => {
+        const layer: VectorLayerOptions = {
+          title: 'WFS (point)',
+          visible: true,
+          source: dataSource,
+          styleByAttribute: {
+            attribute: 'en_caserne',
+            data: ['true', 'false'],
+            stroke: ['red', 'blue'],
+            fill: ['#ffffff', '#ffffff'],
+            radius: [7, 7],
+            width: [2, 2],
+            hoverStyle: {
+                label: {
+                  attribute: 'Caserne: ${nom_service_incendie} \n Mun: ${ville}',
+                  style: {
+                    textAlign: 'left',
+                    textBaseline: 'bottom',
+                    font: '12px Calibri,sans-serif',
+                    fill: { color: '#000' },
+                    backgroundFill: { color: 'rgba(255, 255, 255, 0.5)' },
+                    backgroundStroke: { color: 'rgba(200, 200, 200, 0.75)', width: 2 },
+                    stroke: { color: '#fff', width: 3 },
+                    overflow: true,
+                    offsetX: 10,
+                    offsetY: -10,
+                    padding: [2.5, 2.5, 2.5, 2.5]
+                  }
+                },
+                baseStyle: {
+                  circle: {
+                    stroke: {
+                      color: 'orange',
+                      width: 5
+                    },
+                    width: [5],
+                    radius: 15
+                  }
+                }
+            }
+          }
+        };
+        this.map.addLayer(this.layerService.createLayer(layer));
+      });
+
+  }
+}
diff --git a/demo/src/app/geo/hover/hover.module.ts b/demo/src/app/geo/hover/hover.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+import { IgoMapModule } from '@igo2/geo';
+
+import { AppHoverComponent } from './hover.component';
+import { AppHoverRoutingModule } from './hover-routing.module';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  declarations: [AppHoverComponent],
+  imports: [
+    CommonModule,
+    AppHoverRoutingModule,
+    MatCardModule,
+    MatButtonModule,
+    IgoMapModule
+  ],
+  exports: [AppHoverComponent]
+})
+export class AppHoverModule {}
diff --git a/packages/geo/src/lib/feature/shared/store.ts b/packages/geo/src/lib/feature/shared/store.ts
@@ -110,7 +110,7 @@ export class FeatureStore<T extends Feature = Feature> extends EntityStore<T> {
    * @param features Openlayers feature objects
    * @param motion Optional: The type of motion to perform
    */
-  private setLayerOlFeatures(
+  public setLayerOlFeatures(
     olFeatures: OlFeature[],
     motion: FeatureMotion = FeatureMotion.Default,
     viewScale?: [number, number, number, number],

diff --git a/packages/geo/src/lib/layer/shared/style.service.ts b/packages/geo/src/lib/layer/shared/style.service.ts
@@ -69,8 +69,9 @@ export class StyleService {
   }
 
   createStyleByAttribute(feature, styleByAttribute: StyleByAttribute) {
+
     let style;
-    const type = styleByAttribute.type;
+    const type = styleByAttribute.type ? styleByAttribute.type : this.guessTypeFeature(feature);
     const attribute = styleByAttribute.attribute;
     const data = styleByAttribute.data;
     const stroke = styleByAttribute.stroke;
@@ -79,13 +80,17 @@ export class StyleService {
     const radius = styleByAttribute.radius;
     const icon = styleByAttribute.icon;
     const scale = styleByAttribute.scale;
-    const size = data.length;
-    const label = styleByAttribute.label.attribute || styleByAttribute.label;
-    const labelStyle =
+    const size = data ? data.length : 0;
+    const label = styleByAttribute.label ? (styleByAttribute.label.attribute || styleByAttribute.label) : undefined;
+    const labelStyle = styleByAttribute.label ?
       this.parseStyle('text', styleByAttribute.label.style) ||
-      new olstyle.Text();
-    labelStyle.setText(this.getLabel(feature, label));
+      new olstyle.Text() : undefined;
     const baseStyle = styleByAttribute.baseStyle;
+
+    if (labelStyle) {
+      labelStyle.setText(this.getLabel(feature, label));
+    }
+
     if (type === 'circle') {
       for (let i = 0; i < size; i++) {
         const val =
@@ -123,6 +128,13 @@ export class StyleService {
         }
       }
       if (!feature.getStyle()) {
+        if (baseStyle) {
+          style = this.createStyle(baseStyle);
+          if (labelStyle) {
+            style.setText(labelStyle);
+          }
+          return style;
+        }
         style = [
           new olstyle.Style({
             image: new olstyle.Circle({
@@ -164,6 +176,9 @@ export class StyleService {
         if (!feature.getStyle()) {
           if (baseStyle) {
             style = this.createStyle(baseStyle);
+            if (labelStyle) {
+              style.setText(labelStyle);
+            }
             return style;
           }
           style = [
@@ -272,4 +287,15 @@ export class StyleService {
 
     return label;
   }
+
+  private guessTypeFeature(feature) {
+    switch (feature.getGeometry().getType()) {
+      case 'Point':
+      case 'MultiPoint':
+      case 'Circle':
+        return 'circle';
+      default:
+        return 'regular';
+    }
+  }
 }
diff --git a/packages/geo/src/lib/layer/shared/vector-style.interface.ts b/packages/geo/src/lib/layer/shared/vector-style.interface.ts
@@ -12,6 +12,7 @@ export interface StyleByAttribute {
     scale?: Array<number>;
     label?: string | { [key: string]: any } | olStyle | olStyle[];
     baseStyle?: { [key: string]: any } | olStyle | olStyle[];
+    hoverStyle?: StyleByAttribute;
 }
 
 export interface MapboxStyle {

diff --git a/packages/geo/src/lib/map/map.module.ts b/packages/geo/src/lib/map/map.module.ts
@@ -17,6 +17,7 @@ import { MiniBaseMapComponent } from './baselayers-switcher/mini-basemap.compone
 import { MapOfflineDirective } from './shared/mapOffline.directive';
 import { OfflineButtonComponent } from './offline-button/offline-button.component';
 import { PointerPositionDirective } from './shared/map-pointer-position.directive';
+import { HoverFeatureDirective } from './shared/hover-feature.directive';
 
 @NgModule({
   imports: [
@@ -36,7 +37,8 @@ import { PointerPositionDirective } from './shared/map-pointer-position.directiv
     MiniBaseMapComponent,
     MapOfflineDirective,
     OfflineButtonComponent,
-    PointerPositionDirective
+    PointerPositionDirective,
+    HoverFeatureDirective
   ],
   declarations: [
     MapBrowserComponent,
@@ -47,7 +49,8 @@ import { PointerPositionDirective } from './shared/map-pointer-position.directiv
     MiniBaseMapComponent,
     MapOfflineDirective,
     OfflineButtonComponent,
-    PointerPositionDirective
+    PointerPositionDirective,
+    HoverFeatureDirective
   ]
 })
 export class IgoMapModule {}