Basic working implementation

projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts

@@ -34,6 +34,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
   private initialized:boolean = false;
   private mapEventHandlerInstalled = false;
   private selectedFeatures = {};
+  private selectionLayer:Layer = null;
   
   constructor(private itemService: ItemService, @Host() private map: MapComponent, public appConfig: AppConfig) {
     super(map);
@@ -195,7 +196,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       });
     }
     if(l.minzoom) {
-      layer.setMinZoom(l.minzoom);
+      layer.setMinZoom(14);
     }
     if(l.maxzoom) {
       layer.setMaxZoom(l.maxzoom);
@@ -203,6 +204,39 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
     return layer;
   }
 
+  createSelectionLayer(itemLayer:IItemLayer):Layer {
+    var layerIndex = -1;
+    var layer: Layer = null; 
+    layerIndex = itemLayer.layerIndex != -1 ? itemLayer.layerIndex : itemLayer.item.data.layers[0].index;
+    var data = itemLayer.item.data;
+    var l:ILayer = (data && data.layers && data.layers.length > 0) ? data.layers[layerIndex] : null;
+    if (l && l.rendering && l.rendering.renderoutputType == "VectorTiles") {
+      return new VectorTileLayer({
+        renderMode: 'vector',
+        source: itemLayer.layer.getSource(),
+        style: (feature) => {
+          if (feature.getId() in this.selectedFeatures) {
+
+            return new style.Style(
+              {
+                fill: new style.Fill({
+                  color: 'red'
+                }),
+                stroke: new style.Stroke({
+                  color: 'red',
+                  width: 1.25
+                })
+              }
+            );
+          }
+        },
+        minZoom: itemLayer.layer.getMinZoom(),
+        maxZoom: itemLayer.layer.getMaxZoom()        
+      });
+    }
+    return null;
+  }
+
   createExternalLayer(item:IItem,itemLayer:IItemLayer):Layer {
     let data = item.data as ILayerData;
     var layer: Layer = null; 
@@ -346,6 +380,11 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
       while(olLayers.getLength() > newLayers.length) {
         olLayers.removeAt(newLayers.length);
       }
+      this.selectionLayer=null;
+      if(this.mapEventHandlerInstalled && itemLayers.length==1 && itemLayers[0].item.itemType == 'vnd.farmmaps.itemtype.shape.processed') {
+        this.selectionLayer = this.createSelectionLayer(itemLayers[0]);
+        olLayers.push(this.selectionLayer)
+      }
     }
   }
 
@@ -359,7 +398,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
         let fid = features[0].getId();
         this.selectedFeatures[fid] = features[0];    
         console.debug(features[0]);
-        //this.itemLayer.layer.changed();         
+        if(this.selectionLayer) this.selectionLayer.changed();
        })
     }    
   }
@@ -379,8 +418,8 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
           }
           this.updateLayers([itemLayer]);
         } else {
-          this.updateLayers([]);
           this.unInstallMapEventHandler();
+          this.updateLayers([]);          
         }
       }
     }