Commit 7827adcf authored by seyed.takyar's avatar seyed.takyar
Browse files

Layer management to move layer up and down in the layers-list

Changing opacity and showing information
parent 03598392
Pipeline #141450 passed with stage
in 2 minutes and 10 seconds
export interface Product {
id?:string;
code?:string;
name?:string;
description?:string;
price?:number;
quantity?:number;
inventoryStatus?:string;
category?:string;
image?:string;
rating?:number;
}
\ No newline at end of file
import { TestBed } from '@angular/core/testing';
import { LayerServiceService } from './layer-service.service';
describe('LayerServiceService', () => {
let service: LayerServiceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LayerServiceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LayerServiceService {
constructor() { }
}
import { TestBed } from '@angular/core/testing';
import { LegendServiceService } from './legend-service.service';
describe('LegendServiceService', () => {
let service: LegendServiceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(LegendServiceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LegendServiceService {
constructor() { }
}
import { TestBed } from '@angular/core/testing';
import { ProductServiceService } from './product-service.service';
describe('ProductServiceService', () => {
let service: ProductServiceService;
beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(ProductServiceService);
});
it('should be created', () => {
expect(service).toBeTruthy();
});
});
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductServiceService {
constructor() { }
}
import { VisualizationPanelComponent } from './../visualization-panel/visualization-panel.component';
import { DataService } from './../../_service/data.service';
import { PrimeNGConfig } from 'primeng/api';
/*
Copyright 2019 Esri
Licensed under the Apache License, Version 2.0 (the "License");
......@@ -84,12 +85,15 @@ export class EsriMapComponent implements OnInit {
'esri/renderers/RasterColormapRenderer',
'esri/renderers/ClassBreaksRenderer',
'esri/symbols/SimpleFillSymbol',
'esri/Color'
'esri/Color',
'esri/layers/WMSLayer',
'esri/geometry/Extent',
'esri/widgets/Slider'
])
.then(async ([Map, MapView, Graphic, ImageryLayer, Compass, BasemapToggle, CoordinateConversion, BasemapLayerList, Fullscreen,
Legend, LayerList, MapImageLayer, Renderer, RasterFunction, Search, SimpleRenderer, colorRendererCreator, RasterColormapRenderer, ClassBreaksRenderer, SimpleFillSymbol, Color]) => {
Legend, LayerList, MapImageLayer, Renderer, RasterFunction, Search, SimpleRenderer, colorRendererCreator, RasterColormapRenderer, ClassBreaksRenderer,
SimpleFillSymbol, Color, WMSLayer, WMSLayerInfo, Extent, Slider]) => {
this.map = new Map({
basemap: 'topo-vector'
......@@ -200,14 +204,19 @@ export class EsriMapComponent implements OnInit {
}
]
};
// *********************************************** example wms *******************************************************
// url: "https://coastmap.hzg.de/image/services/rehan_3/ImageServer/WMSServer?request=GetCapabilities&service=WMS"
// const layer = new WMSLayer({
// url: "https://coastmap.hzg.de/image/services/rehan_3/ImageServer/WMSServer?request=GetCapabilities&service=WMS",
// url: "https://hub.hereon.de/server/services/Data/HZG_coastmap_TOC_in_sediment/ImageServer/WMSServer?request=GetCapabilities&service=WMS",
// renderer: renderer
// });
const layer = new ImageryLayer({
url: "https://hub.hereon.de/server/rest/services/Data/HZG_coastmap_TOC_in_sediment/ImageServer",
popupTemplate: imagePopupTemplate,
......@@ -221,7 +230,7 @@ export class EsriMapComponent implements OnInit {
// alert(layer.title)
this.map.add(layer);
......@@ -250,13 +259,153 @@ export class EsriMapComponent implements OnInit {
this.mapView.ui.add(legend, "bottom-right");
let layerList = new LayerList({
view: this.mapView
view: this.mapView,
listItemCreatedFunction: defineActionsForLayerList
});
function defineActionsForLayerList(event) {
// The event object contains an item property.
// is is a ListItem referencing the associated layer
// and other properties. You can control the visibility of the
// item, its title, and actions using this object.
const item = event.item;
item.actionsSections = [
[
{
title: "Go to full extent",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
},
{
title: "Layer information",
className: "esri-icon-description",
id: "information"
}
] ,
[
{
title: "Move Up",
className: "esri-icon-up-arrow",
id: "move-layer-up"
},
{
title: "Move Down",
className: "esri-icon-down-arrow",
id: "move-layer-down"
}
],
[
{
title: "Increase opacity",
className: "esri-icon-up",
id: "increase-opacity"
},
{
title: "Decrease opacity",
className: "esri-icon-down",
id: "decrease-opacity"
}
]
];
};
layerList.on("trigger-action", (event) => {
// The layer visible in the view at the time of the trigger.
let visibleLayer: any;
const item = event.item;
this.map.layers.forEach(element => {
if (element.title == item.title){
visibleLayer = element
}
});
// Capture the action id.
const id = event.action.id;
if (id === "full-extent") {
// If the full-extent action is triggered then navigate
// to the full extent of the visible layer.
this.mapView.goTo(visibleLayer.fullExtent);
} else if (id === "information") {
// If the information action is triggered, then
// open the item details page of the service layer.
window.open(visibleLayer.url);
} else if (id === "increase-opacity") {
// If the increase-opacity action is triggered, then
// increase the opacity of the GroupLayer by 0.25.
if (visibleLayer.opacity < 1) {
visibleLayer.opacity += 0.25;
}
} else if (id === "decrease-opacity") {
// If the decrease-opacity action is triggered, then
// decrease the opacity of the GroupLayer by 0.25.
if (visibleLayer.opacity > 0) {
visibleLayer.opacity -= 0.25;
}
} else if (id === "move-layer-up") {
var layerToMoveName = event.item.title;
var layerToMoveIdx = -1
for (var i = 0; i < layerList.viewModel.operationalItems.length; i++) {
var item1 = layerList.viewModel.operationalItems.getItemAt(i)
if (item1.title === layerToMoveName) {
layerToMoveIdx = i
}
}
if (layerToMoveIdx > 0) {
layerList.viewModel.moveListItem(event.item, null, null, layerToMoveIdx);
}
}
else if (id === "move-layer-down") {
var layerToMoveName = event.item.title;
var layerToMoveIdx = -1
for (var i = 0; i < layerList.viewModel.operationalItems.length; i++) {
var item1 = layerList.viewModel.operationalItems.getItemAt(i)
if (item1.title === layerToMoveName) {
layerToMoveIdx = i
}
}
if (layerToMoveIdx < layerList.viewModel.operationalItems.length) {
layerList.viewModel.moveListItem(event.item, null, null, layerToMoveIdx + 1);
}
}
});
this.mapView.ui.add(layerList, {
position: "top-left"
});
const searchWidget = new Search({
view: this.mapView
});
......@@ -443,6 +592,8 @@ export class EsriMapComponent implements OnInit {
this.mapView.ui.add(compass, "top-left");
let fullscreen = new Fullscreen({
view: this.mapView
});
......@@ -478,6 +629,8 @@ export class EsriMapComponent implements OnInit {
});
this.mapView.ui.add("rendererDiv", "top-left");
var o = layer.toJSON();
......@@ -548,6 +701,7 @@ export class EsriMapComponent implements OnInit {
this.map.add(layer)
} catch (err) {
console.log(err);
}
......
<button id="rendererDiv" class="pi pi-pencil round-button" pButton (click)="showMaximizableDialog()"></button>
<button id="rendererDiv" class="pi pi-plus round-button" pButton (click)="showMaximizableDialog()"></button>
<p-dialog header="Layer Editor" [(visible)]="displayMaximizable" [modal]="true" [style]="{width: '50vw'}" style="background-color: black; min-width: 400px !important;" [maximizable]="true"
[draggable]="false" [resizable]="true" >
<div class="card" >
<p-tabView styleClass="tabview-custom" >
<p-tabPanel style="width: 400px;">
<p-tabView styleClass="tabview-custom" >
<p-tabPanel style="width: 400px; ">
<ng-template pTemplate="header" >
<i class=""></i>
<span>Header I</span>
<span>Add Layer</span>
</ng-template>
<p>
<p-dropdown [options]="layerTypes" class="p-inputtext-sm" [(ngModel)]="selectedLayerType" optionLabel="name"></p-dropdown>
<p style="margin-top:1em;">
Please enter an EsriLayer Service URL:
</p>
<input type="text" pInputText class="p-inputtext-sm" style="width: 400px;" placeholder="EsriLayer Service URL" [(ngModel)]="esriLayerServiceURL" />
<input type="text" pInputText class="p-inputtext-sm" style="width: 400px; margin-right:4px;" placeholder="EsriLayer Service URL" [(ngModel)]="esriLayerServiceURL" />
</p-tabPanel>
<p-tabPanel header="Header II">
<ng-template pTemplate="header">
<i class=""></i>
<span>Header II</span>
<span>Edit Layer</span>
</ng-template>
<p>
fiugerfugergferougferugferuf
......
.round-button {
height: 35px;
width: 35px;
height: 33px;
width: 33px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
......@@ -11,10 +11,10 @@
}
#rendererDiv {
padding-left: 9px !important;
padding-left: 7px !important;
}
#rendererDiv ::hover {
#rendererDiv :hover {
background-color: rgb(134, 133, 136) !important;
}
......
import { EsriMapComponent } from './../esri-map/esri-map.component';
import { Component, OnInit, SystemJsNgModuleLoader, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-layer-editor',
templateUrl: './layer-editor.component.html',
......@@ -8,8 +9,18 @@ import { Component, OnInit, SystemJsNgModuleLoader, ViewEncapsulation } from '@a
encapsulation:ViewEncapsulation.Emulated
})
export class LayerEditorComponent implements OnInit {
layerTypes : any = [];
selectedLayerType: string;
constructor( private esriMapComponent: EsriMapComponent ) {
constructor( private esriMapComponent: EsriMapComponent ) {}
this.layerTypes = [
{name: 'Imagery Layer', code: 'IMG'},
{name: 'WMS Layer', code: 'WMS'}
]
}
ngOnInit() {
......@@ -34,14 +45,14 @@ export class LayerEditorComponent implements OnInit {
}
public updateLayer(){
alert("I am an alert box!: "+ this.esriLayerServiceURL);
alert("Are you sure you want to add this layer? : "+ this.esriLayerServiceURL);
this.esriMapComponent.updateLayer(this.esriLayerServiceURL)
}
public addLayer(){
alert("I am an alert box!: "+ this.esriLayerServiceURL);
alert("Are you sure you want to add this layer? : "+ this.esriLayerServiceURL);
this.esriMapComponent.addLayer(this.esriLayerServiceURL)
......
<#
.Synopsis
Activate a Python virtual environment for the current PowerShell session.
.Description
Pushes the python executable for a virtual environment to the front of the
$Env:PATH environment variable and sets the prompt to signify that you are
in a Python virtual environment. Makes use of the command line switches as
well as the `pyvenv.cfg` file values present in the virtual environment.
.Parameter VenvDir
Path to the directory that contains the virtual environment to activate. The
default value for this is the parent of the directory that the Activate.ps1
script is located within.
.Parameter Prompt
The prompt prefix to display when this virtual environment is activated. By
default, this prompt is the name of the virtual environment folder (VenvDir)
surrounded by parentheses and followed by a single space (ie. '(.venv) ').
.Example
Activate.ps1
Activates the Python virtual environment that contains the Activate.ps1 script.
.Example
Activate.ps1 -Verbose
Activates the Python virtual environment that contains the Activate.ps1 script,
and shows extra information about the activation as it executes.
.Example
Activate.ps1 -VenvDir C:\Users\MyUser\Common\.venv
Activates the Python virtual environment located in the specified location.
.Example
Activate.ps1 -Prompt "MyPython"
Activates the Python virtual environment that contains the Activate.ps1 script,
and prefixes the current prompt with the specified string (surrounded in
parentheses) while the virtual environment is active.
.Notes
On Windows, it may be required to enable this Activate.ps1 script by setting the
execution policy for the user. You can do this by issuing the following PowerShell
command:
PS C:\> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
For more information on Execution Policies:
https://go.microsoft.com/fwlink/?LinkID=135170
#>
Param(
[Parameter(Mandatory = $false)]
[String]
$VenvDir,
[Parameter(Mandatory = $false)]
[String]
$Prompt
)
<# Function declarations --------------------------------------------------- #>
<#
.Synopsis
Remove all shell session elements added by the Activate script, including the
addition of the virtual environment's Python executable from the beginning of
the PATH variable.
.Parameter NonDestructive
If present, do not remove this function from the global namespace for the
session.
#>
function global:deactivate ([switch]$NonDestructive) {
# Revert to original values
# The prior prompt:
if (Test-Path -Path Function:_OLD_VIRTUAL_PROMPT) {
Copy-Item -Path Function:_OLD_VIRTUAL_PROMPT -Destination Function:prompt
Remove-Item -Path Function:_OLD_VIRTUAL_PROMPT
}
# The prior PYTHONHOME:
if (Test-Path -Path Env:_OLD_VIRTUAL_PYTHONHOME) {
Copy-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME -Destination Env:PYTHONHOME
Remove-Item -Path Env:_OLD_VIRTUAL_PYTHONHOME
}
# The prior PATH:
if (Test-Path -Path Env:_OLD_VIRTUAL_PATH) {
Copy-Item -Path Env:_OLD_VIRTUAL_PATH -Destination Env:PATH
Remove-Item -Path Env:_OLD_VIRTUAL_PATH
}
# Just remove the VIRTUAL_ENV altogether:
if (Test-Path -Path Env:VIRTUAL_ENV) {
Remove-Item -Path env:VIRTUAL_ENV
}
# Just remove the _PYTHON_VENV_PROMPT_PREFIX altogether:
if (Get-Variable -Name "_PYTHON_VENV_PROMPT_PREFIX" -ErrorAction SilentlyContinue) {
Remove-Variable -Name _PYTHON_VENV_PROMPT_PREFIX -Scope Global -Force
}
# Leave deactivate function in the global namespace if requested:
if (-not $NonDestructive) {
Remove-Item -Path function:deactivate
}
}
<#
.Description
Get-PyVenvConfig parses the values from the pyvenv.cfg file located in the
given folder, and returns them in a map.
For each line in the pyvenv.cfg file, if that line can be parsed into exactly
two strings separated by `=` (with any amount of whitespace surrounding the =)
then it is considered a `key = value` line. The left hand string is the key,
the right hand is the value.
If the value starts with a `'` or a `"` then the first and last character is
stripped from the value before being captured.
.Parameter ConfigDir
Path to the directory that contains the `pyvenv.cfg` file.
#>
function Get-PyVenvConfig(
[String]
$ConfigDir
) {
Write-Verbose "Given ConfigDir=$ConfigDir, obtain values in pyvenv.cfg"
# Ensure the file exists, and issue a warning if it doesn't (but still allow the function to continue).
$pyvenvConfigPath = Join-Path -Resolve -Path $ConfigDir -ChildPath 'pyvenv.cfg' -ErrorAction Continue <