IT-Naturschutz/konova
7
0
Fork 0
Code Issues 6 Pull Requests Actions Projects Releases 47 Wiki Activity

# WIP: Netgis Client Update

Browse Source
This commit is contained in:
mpeltriaux
2023-01-31 16:26:59 +01:00
parent 9c8286a5d1
commit af21fa3daa
27 changed files with 2098 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/map/client/libs/netgis/Client.js
View File

@@ -191,6 +191,7 @@ netgis.Client.prototype.load = function()
if ( this.output.value && this.output.value.length > 0 )
{
//console.info( "INPUT:", this.output.value );
var json = JSON.parse( this.output.value );
this.invoke( netgis.Events.EDIT_FEATURES_LOADED, json );
}
@@ -288,6 +289,7 @@ netgis.Client.prototype.onHtmlResponse = function( data )
netgis.Client.prototype.onEditFeaturesChange = function( e )
{
var geojson = JSON.stringify( e );
//console.info( "OUTPUT:", geojson );
this.output.value = geojson;
};

17
templates/map/client/libs/netgis/Events.js
View File

@@ -40,18 +40,27 @@ netgis.Events = Object.freeze
BUFFER_CHANGE: "BUFFER_CHANGE",
BUFFER_ACCEPT: "BUFFER_ACCEPT",
BUFFER_CANCEL: "BUFFER_CANCEL",
DRAW_BUFFER_ON: "DRAW_BUFFER_ON",
DRAW_BUFFER_OFF: "DRAW_BUFFER_OFF",
DRAW_BUFFER_RADIUS_CHANGE: "DRAW_BUFFER_RADIUS_CHANGE",
DRAW_BUFFER_SEGMENTS_CHANGE: "DRAW_BUFFER_SEGMENTS_CHANGE",
SNAP_ON: "SNAP_ON",
SNAP_OFF: "SNAP_OFF",
TRACING_ON: "TRACING_ON",
TRACING_OFF: "TRACING_OFF",
IMPORT_SHAPEFILE_SHOW: "IMPORT_SHAPEFILE_SHOW",
IMPORT_GEOJSON_SHOW: "IMPORT_GEOJSON_SHOW",
IMPORT_GML_SHOW: "IMPORT_GML_SHOW",
IMPORT_SPATIALITE_SHOW: "IMPORT_SPATIALITE_SHOW",
IMPORT_GEOPACKAGE_SHOW: "IMPORT_GEOPACKAGE_SHOW",
IMPORT_SHAPEFILE: "IMPORT_SHAPEFILE",
IMPORT_GEOJSON: "IMPORT_GEOJSON",
IMPORT_GML: "IMPORT_GML",
IMPORT_WKT: "IMPORT_WKT",
IMPORT_SPATIALITE: "IMPORT_SPATIALITE",
IMPORT_GEOPACKAGE: "IMPORT_GEOPACKAGE",
EXPORT_PDF_SHOW: "EXPORT_PDF_SHOW",
EXPORT_JPEG_SHOW: "EXPORT_JPEG_SHOW",
@@ -63,6 +72,10 @@ netgis.Events = Object.freeze
EXPORT_PNG: "EXPORT_PNG",
EXPORT_GIF: "EXPORT_GIF",
EXPORT_BEGIN: "EXPORT_BEGIN",
EXPORT_END: "EXPORT_END"
EXPORT_END: "EXPORT_END",
ADD_SERVICE_SHOW: "ADD_SERVICE_SHOW",
ADD_SERVICE_WMS: "ADD_SERVICE_WMS",
ADD_SERVICE_WFS: "ADD_SERVICE_WFS"
}
);

24
templates/map/client/libs/netgis/LayerTree.css
View File

@@ -157,3 +157,27 @@
{
opacity: 0.5;
}
.netgis-layer-tools
{
padding: 4mm;
padding-top: 0mm;
text-align: center;
}
.netgis-layer-tools hr
{
margin: 4mm 0mm;
color: #eee;
border-color: #eee;
}
.netgis-layer-tools button
{
padding: 2mm 4mm;
}
.netgis-layer-tools button i
{
margin-right: 1mm;
}

93
templates/map/client/libs/netgis/LayerTree.js
View File

@@ -24,20 +24,56 @@ netgis.LayerTree.prototype.load = function()
this.list.className = "root";
this.root.appendChild( this.list );
this.initDefaultFolders();
this.tools = document.createElement( "div" );
this.tools.className = "netgis-layer-tools";
this.tools.innerHTML = "<hr/>";
this.root.appendChild( this.tools );
this.buttonAddService = document.createElement( "button" );
this.buttonAddService.setAttribute( "type", "button" );
//this.buttonAddService.className = "netgis-primary netgis-hover-primary netgis-shadow";
this.buttonAddService.className = "netgis-text-primary netgis-hover-primary";
//this.buttonAddService.innerHTML = "<i class='fas fa-plus' style='color: #000'></i> Dienst hinzufügen";
this.buttonAddService.innerHTML = "<i class='fas fa-folder-plus'></i> Dienst hinzufügen";
//this.buttonAddService.innerHTML = "<i class='fas fa-cloud-upload-alt'></i> Dienst hinzufügen";
this.buttonAddService.addEventListener( "click", this.onAddServiceClick.bind( this ) );
this.tools.appendChild( this.buttonAddService );
this.client.root.appendChild( this.root );
this.client.on( netgis.Events.CONTEXT_UPDATE, this.onContextUpdate.bind( this ) );
this.client.on( netgis.Events.LAYER_LIST_TOGGLE, this.onLayerListToggle.bind( this ) );
this.client.on( netgis.Events.LAYER_CREATED, this.onLayerCreated.bind( this ) );
this.client.on( netgis.Events.EDIT_FEATURES_CHANGE, this.onEditFeaturesChange.bind( this ) );
this.client.on( netgis.Events.ADD_SERVICE_WMS, this.onAddServiceWMS.bind( this ) );
this.client.on( netgis.Events.ADD_SERVICE_WFS, this.onAddServiceWFS.bind( this ) );
//TODO: kind of hack to hide if parcel search open
this.client.on( netgis.Events.SET_MODE, this.onSetMode.bind( this ) );
};
netgis.LayerTree.prototype.initDefaultFolders = function()
{
this.folderDraw = this.createFolder( "Zeichnung" );
this.folderDraw.classList.add( "netgis-hide" );
this.list.appendChild( this.folderDraw );
this.folderImport = this.createFolder( "Importierte Ebenen" );
this.folderImport.classList.add( "netgis-hide" );
this.list.appendChild( this.folderImport );
this.folderServices = this.createFolder( "Eigene Dienste" );
this.folderServices.classList.add( "netgis-hide" );
this.list.appendChild( this.folderServices );
};
netgis.LayerTree.prototype.clearAll = function()
{
this.list.innerHTML = "";
this.initDefaultFolders();
};
netgis.LayerTree.prototype.createFolder = function( title )
@@ -102,6 +138,9 @@ netgis.LayerTree.prototype.createLayer = function( id, title, checked )
var text = document.createTextNode( title );
label.appendChild( text );
var appendix = document.createElement( "span" );
label.appendChild( appendix );
return item;
};
@@ -342,21 +381,26 @@ netgis.LayerTree.prototype.onLayerCreated = function( e )
//TODO: this is a hack to get special folders working
if ( e.folder === "import" )
{
if ( ! this.folderImport )
/*if ( ! this.folderImport )
{
this.folderImport = this.createFolder( "Importierte Ebenen" );
this.list.insertBefore( this.folderImport, this.folderDraw ? this.folderDraw.nextSibling : this.list.firstChild );
}
*/
this.folderImport.classList.remove( "netgis-hide" );
folder = this.folderImport;
}
else if ( e.folder === "draw" )
{
if ( ! this.folderDraw )
/*if ( ! this.folderDraw )
{
this.folderDraw = this.createFolder( "Zeichnung" );
this.list.insertBefore( this.folderDraw, this.list.firstChild );
}
}*/
this.folderDraw.classList.remove( "netgis-hide" );
folder = this.folderDraw;
}
@@ -382,13 +426,54 @@ netgis.LayerTree.prototype.onEditFeaturesChange = function( e )
this.updateFolderChecks( this.folderDraw );
this.client.invoke( netgis.Events.LAYER_SHOW, { id: id } );
}
// Update Area
var label = list.getElementsByTagName( "label" )[ 0 ];
var spans = label.getElementsByTagName( "span" );
var appendix = spans[ spans.length - 1 ];
if ( e.area && e.area > 0.0 )
{
appendix.innerText = " (Fläche: " + netgis.util.formatArea( e.area, true ) + ")";
}
else
{
appendix.innerText = "";
}
};
};
netgis.LayerTree.prototype.onAddServiceWMS = function( e )
{
var item = this.createLayer( e.id, e.title, true );
this.folderServices.classList.remove( "netgis-hide" );
this.addToFolder( this.folderServices, item, true );
this.updateFolderChecks( this.folderServices );
this.client.invoke( netgis.Events.LAYER_SHOW, { id: e.id } );
};
netgis.LayerTree.prototype.onAddServiceWFS = function( e )
{
var item = this.createLayer( e.id, e.title, true );
this.folderServices.classList.remove( "netgis-hide" );
this.addToFolder( this.folderServices, item, true );
this.updateFolderChecks( this.folderServices );
this.client.invoke( netgis.Events.LAYER_SHOW, { id: e.id } );
};
netgis.LayerTree.prototype.onSetMode = function( e )
{
if ( e === netgis.Modes.SEARCH_PARCEL )
{
this.root.classList.add( "netgis-hide" );
}
};
netgis.LayerTree.prototype.onAddServiceClick = function( e )
{
this.client.invoke( netgis.Events.ADD_SERVICE_SHOW, null );
};

728
templates/map/client/libs/netgis/MapOpenLayers.js
View File

File diff suppressed because it is too large Load Diff

12
templates/map/client/libs/netgis/Menu.js
View File

@@ -72,6 +72,8 @@ netgis.Menu.prototype.load = function()
//fileItems.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>KML', this.onImportKMLClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GML', this.onImportGMLClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>Shapefile', this.onImportShapefileClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>Spatialite', this.onImportSpatialiteClick.bind( this ) ) );
importItem.appendChild( this.createMenuItem( '<i class="fas fa-file"></i>GeoPackage', this.onImportGeopackageClick.bind( this ) ) );
// Export
var exportMenu = this.createMenu( '<i class="fas fa-caret-down"></i>Export' );
@@ -228,6 +230,16 @@ netgis.Menu.prototype.onImportGMLClick = function( e )
this.client.invoke( netgis.Events.IMPORT_GML_SHOW, null );
};
netgis.Menu.prototype.onImportSpatialiteClick = function( e )
{
this.client.invoke( netgis.Events.IMPORT_SPATIALITE_SHOW, null );
};
netgis.Menu.prototype.onImportGeopackageClick = function( e )
{
this.client.invoke( netgis.Events.IMPORT_GEOPACKAGE_SHOW, null );
};
netgis.Menu.prototype.onExportPDFClick = function( e )
{
this.client.invoke( netgis.Events.EXPORT_PDF_SHOW, null );

3
templates/map/client/libs/netgis/Modal.css
View File

@@ -131,7 +131,8 @@
cursor: not-allowed;
}
.netgis-modal-content input
.netgis-modal-content input,
.netgis-modal-content select
{
width: 100%;
}

412
templates/map/client/libs/netgis/Modal.js
View File

@@ -21,6 +21,9 @@ netgis.Modal = function()
this.exportJPEG = null;
this.exportPNG = null;
this.exportGIF = null;
this.addService = null;
this.addServiceID = 10000;
};
netgis.Modal.prototype.load = function()
@@ -39,6 +42,12 @@ netgis.Modal.prototype.load = function()
this.importShapefile = this.createImportShapefile();
this.root.appendChild( this.importShapefile );
this.importSpatialite = this.createImportSpatialite();
this.root.appendChild( this.importSpatialite );
this.importGeopackage = this.createImportGeopackage();
this.root.appendChild( this.importGeopackage );
// Export
this.exportPDF = this.createExportPDF();
this.root.appendChild( this.exportPDF );
@@ -52,6 +61,10 @@ netgis.Modal.prototype.load = function()
this.exportGIF = this.createExportGIF();
this.root.appendChild( this.exportGIF );
// Layers
this.addService = this.createAddService();
this.root.appendChild( this.addService );
// Done
this.client.root.appendChild( this.root );
@@ -59,11 +72,15 @@ netgis.Modal.prototype.load = function()
this.client.on( netgis.Events.IMPORT_GEOJSON_SHOW, this.onImportGeoJSONShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_GML_SHOW, this.onImportGMLShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_SHAPEFILE_SHOW, this.onImportShapefileShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_SPATIALITE_SHOW, this.onImportSpatialiteShow.bind( this ) );
this.client.on( netgis.Events.IMPORT_GEOPACKAGE_SHOW, this.onImportGeopackageShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_PDF_SHOW, this.onExportPDFShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_JPEG_SHOW, this.onExportJPEGShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_PNG_SHOW, this.onExportPNGShow.bind( this ) );
this.client.on( netgis.Events.EXPORT_GIF_SHOW, this.onExportGIFShow.bind( this ) );
this.client.on( netgis.Events.ADD_SERVICE_SHOW, this.onAddServiceShow.bind( this ) );
};
netgis.Modal.prototype.createImportGeoJSON = function()
@@ -102,6 +119,30 @@ netgis.Modal.prototype.createImportShapefile = function()
return container;
};
netgis.Modal.prototype.createImportSpatialite = function()
{
var container = this.createContainer( "Import Spatialite" );
this.createText( container, "Unterstützte Koordinatensysteme:", "<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>" );
this.createInputFile( container, "Datei auswählen / ablegen:", ".sqlite", this.onImportSpatialiteChange.bind( this ) );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Importieren", this.onImportSpatialiteAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createImportGeopackage = function()
{
var container = this.createContainer( "Import GeoPackage" );
this.createText( container, "Unterstützte Koordinatensysteme:", "<ul><li>World Geodetic System 1984 (EPSG:4326)</li><li>ETRS89 / UTM zone 32N (EPSG:25832)</li></ul>" );
this.createInputFile( container, "Datei auswählen / ablegen:", ".gpkg", this.onImportGeopackageChange.bind( this ) );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Importieren", this.onImportGeopackageAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.createExportPDF = function()
{
var container = this.createContainer( "Export PDF" );
@@ -152,6 +193,29 @@ netgis.Modal.prototype.createExportGIF = function()
return container;
};
netgis.Modal.prototype.createAddService = function()
{
var container = this.createContainer( "Dienst hinzufügen" );
this.createInputText( container, "WMS/WFS URL:" );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-cloud-download-alt'></i>Dienst laden", this.onAddServiceLoad.bind( this ) );
/*var details = document.createElement( "div" );
details.className = "netgis-hide";
container.appendChild( details );*/
this.createSpace( container );
this.createInputHidden( container );
this.createText( container, "Bezeichnung:", "" );
this.createInputSelect( container, "Kartenebene:", [] );
this.createInputSelect( container, "Format:", [] );
this.createSpace( container );
this.createButton( container, "<i class='fas fa-check'></i>Dienst hinzufügen", this.onAddServiceAccept.bind( this ) );
return container;
};
netgis.Modal.prototype.show = function( container )
{
this.root.classList.add( "netgis-show" );
@@ -243,6 +307,25 @@ netgis.Modal.prototype.createButton = function( container, title, callback )
return button;
};
netgis.Modal.prototype.createInputHidden = function( container )
{
var row = document.createElement( "tr" );
row.className = "netgis-hidden";
var cell = document.createElement( "td" );
row.appendChild( cell );
var input = document.createElement( "input" );
input.setAttribute( "type", "hidden" );
cell.appendChild( input );
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createInputText = function( container, title )
{
var row = document.createElement( "tr" );
@@ -258,12 +341,41 @@ netgis.Modal.prototype.createInputText = function( container, title )
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
row.appendChild( cell );
var input = document.createElement( "input" );
input.setAttribute( "type", "text" );
cell.appendChild( input );
label.htmlFor = input;
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
var table = content.getElementsByTagName( "table" )[ 0 ];
table.appendChild( row );
return input;
};
netgis.Modal.prototype.createInputSelect = function( container, title, keyValues )
{
var row = document.createElement( "tr" );
//row.className = "netgis-hover-light";
var head = document.createElement( "th" );
head.className = "netgis-padding";
var label = document.createElement( "label" );
label.innerHTML = title;
head.appendChild( label );
row.appendChild( head );
var cell = document.createElement( "td" );
cell.className = "netgis-padding";
row.appendChild( cell );
var input = document.createElement( "select" );
cell.appendChild( input );
label.htmlFor = input;
var content = container.getElementsByClassName( "netgis-modal-content" )[ 0 ];
@@ -503,6 +615,74 @@ netgis.Modal.prototype.onImportShapefileAccept = function( e )
this.hide();
};
netgis.Modal.prototype.onImportSpatialiteShow = function( e )
{
var input = this.importShapefile.getElementsByTagName( "input" )[ 0 ];
var button = this.importShapefile.getElementsByTagName( "button" )[ 1 ];
input.value = "";
button.disabled = true;
this.show( this.importSpatialite );
};
netgis.Modal.prototype.onImportSpatialiteChange = function( e )
{
var input = this.importSpatialite.getElementsByTagName( "input" )[ 0 ];
var button = this.importSpatialite.getElementsByTagName( "button" )[ 1 ];
if ( input.value && input.value.length > 0 )
{
button.disabled = false;
}
else
{
button.disabled = true;
}
};
netgis.Modal.prototype.onImportSpatialiteAccept = function( e )
{
var input = this.importSpatialite.getElementsByTagName( "input" )[ 0 ];
var file = input.files[ 0 ];
this.client.invoke( netgis.Events.IMPORT_SPATIALITE, file );
this.hide();
};
netgis.Modal.prototype.onImportGeopackageShow = function( e )
{
var input = this.importGeopackage.getElementsByTagName( "input" )[ 0 ];
var button = this.importGeopackage.getElementsByTagName( "button" )[ 1 ];
input.value = "";
button.disabled = true;
this.show( this.importGeopackage );
};
netgis.Modal.prototype.onImportGeopackageChange = function( e )
{
var input = this.importGeopackage.getElementsByTagName( "input" )[ 0 ];
var button = this.importGeopackage.getElementsByTagName( "button" )[ 1 ];
if ( input.value && input.value.length > 0 )
{
button.disabled = false;
}
else
{
button.disabled = true;
}
};
netgis.Modal.prototype.onImportGeopackageAccept = function( e )
{
var input = this.importGeopackage.getElementsByTagName( "input" )[ 0 ];
var file = input.files[ 0 ];
this.client.invoke( netgis.Events.IMPORT_GEOPACKAGE, file );
this.hide();
};
netgis.Modal.prototype.onExportPDFShow = function( e )
{
var inputs = this.exportPDF.getElementsByTagName( "input" );
@@ -588,5 +768,237 @@ netgis.Modal.prototype.onExportGIFAccept = function( e )
var resy = Number.parseInt( inputs[ 1 ].value );
this.client.invoke( netgis.Events.EXPORT_GIF, { resx: resx, resy: resy } );
this.hide();
};
netgis.Modal.prototype.onAddServiceShow = function( e )
{
//this.addService.getElementsByTagName( "input" )[ 0 ].value = "";
this.show( this.addService );
// Hide Details
var rows = this.addService.getElementsByTagName( "tr" );
for ( var r = 3; r < rows.length; r++ )
{
rows[ r ].classList.add( "netgis-hide" );
}
};
netgis.Modal.prototype.onAddServiceLoad = function( e )
{
var inputs = this.addService.getElementsByTagName( "input" );
var url = inputs[ 0 ].value;
// Get Base URL
var qmark = url.indexOf( "?" );
if ( qmark > -1 ) url = url.substr( 0, qmark );
var getCaps = url + "?request=GetCapabilities";
netgis.util.request( getCaps, this.onAddServiceCapsResponse.bind( this ) );
console.info( "Add Service Load:", url );
};
netgis.Modal.prototype.onAddServiceCapsResponse = function( e )
{
var parser = new DOMParser();
var xml = parser.parseFromString( e, "text/xml" );
var caps = xml.documentElement;
var rows = this.addService.getElementsByTagName( "tr" );
var rowTitle = rows[ 5 ];
var inputs = this.addService.getElementsByTagName( "input" );
var inputType = inputs[ 1 ];
var selects = this.addService.getElementsByTagName( "select" );
var selectLayer = selects[ 0 ];
var selectFormat = selects[ 1 ];
for ( var i = selectLayer.options.length - 1; i >= 0; i-- ) selectLayer.options.remove( i );
for ( var i = selectFormat.options.length - 1; i >= 0; i-- ) selectFormat.options.remove( i );
switch ( caps.nodeName )
{
// WMS
case "WMS_Capabilities":
{
inputType.value = "wms";
var version = caps.getAttribute( "version" );
var service = caps.getElementsByTagName( "Service" )[ 0 ];
var title = service.getElementsByTagName( "Title" )[ 0 ].textContent;
rowTitle.children[ 1 ].innerHTML = title;
var layerItems = caps.getElementsByTagName( "Layer" );
var layers = [];
for ( var l = 0; l < layerItems.length; l++ )
{
var item = layerItems[ l ];
var layerName = item.getElementsByTagName( "Name" )[ 0 ].textContent;
var layerTitle = item.getElementsByTagName( "Title" )[ 0 ].textContent;
layers.push( { name: layerName, title: layerTitle } );
var option = document.createElement( "option" );
option.text = layerTitle;
option.value = layerName;
selectLayer.options.add( option );
}
var getMap = caps.getElementsByTagName( "GetMap" )[ 0 ];
var formatItems = getMap.getElementsByTagName( "Format" );
var formats = [];
for ( var f = 0; f < formatItems.length; f++ )
{
var item = formatItems[ f ];
var format = item.textContent;
formats.push( format );
var option = document.createElement( "option" );
option.text = format;
option.value = format;
selectFormat.options.add( option );
}
break;
}
// WFS
case "WFS_Capabilities":
case "wfs:WFS_Capabilities":
{
inputType.value = "wfs";
var version = caps.getAttribute( "version" );
var service = caps.getElementsByTagName( "ows:ServiceIdentification" )[ 0 ];
var title = service.getElementsByTagName( "ows:Title" )[ 0 ].textContent;
rowTitle.children[ 1 ].innerHTML = title;
var featureTypeItems = caps.getElementsByTagName( "FeatureType" );
var types = [];
for ( var l = 0; l < featureTypeItems.length; l++ )
{
var item = featureTypeItems[ l ];
var typeName = item.getElementsByTagName( "Name" )[ 0 ].textContent;
var typeTitle = item.getElementsByTagName( "Title" )[ 0 ].textContent;
types.push( { name: typeName, title: typeTitle } );
var option = document.createElement( "option" );
option.text = typeTitle;
option.value = typeName;
selectLayer.options.add( option );
}
var operations = caps.getElementsByTagName( "ows:Operation" );
var getFeature = null;
for ( var o = 0; o < operations.length; o++ )
{
if ( operations[ o ].getAttribute( "name" ) === "GetFeature" )
{
getFeature = operations[ o ];
break;
}
}
if ( getFeature )
{
var parameters = getFeature.getElementsByTagName( "ows:Parameter" );
for ( var p = 0; p < parameters.length; p++ )
{
var parameter = parameters[ p ];
if ( parameter.getAttribute( "name" ) === "outputFormat" )
{
var formatItems = parameter.getElementsByTagName( "ows:Value" );
for ( var f = 0; f < formatItems.length; f++ )
{
var item = formatItems[ f ];
var format = item.textContent;
var option = document.createElement( "option" );
option.text = format;
option.value = format;
selectFormat.options.add( option );
}
break;
}
}
}
selectFormat.value = "application/json";
break;
}
}
// Show Details
var rows = this.addService.getElementsByTagName( "tr" );
for ( var r = 3; r < rows.length; r++ )
{
rows[ r ].classList.remove( "netgis-hide" );
}
};
netgis.Modal.prototype.onAddServiceAccept = function( e )
{
/*var inputs = this.exportPDF.getElementsByTagName( "input" );
var resx = Number.parseInt( inputs[ 0 ].value );
var resy = Number.parseInt( inputs[ 1 ].value );
var margin = Number.parseInt( inputs[ 2 ].value );
var mode = inputs[ 3 ].checked;
this.client.invoke( netgis.Events.EXPORT_PDF, { resx: resx, resy: resy, mode: mode, margin: margin } );*/
var inputs = this.addService.getElementsByTagName( "input" );
var selects = this.addService.getElementsByTagName( "select" );
var url = inputs[ 0 ].value;
var type = inputs[ 1 ].value;
var selectLayer = selects[ 0 ];
var selectFormat = selects[ 1 ];
var layerOption = selectLayer.options.item( selectLayer.options.selectedIndex );
var formatOption = selectFormat.options.item( selectFormat.options.selectedIndex );
var id = this.addServiceID++;
var params =
{
id: id,
url: url,
title: layerOption.text,
name: layerOption.value,
format: formatOption.value
};
switch ( type )
{
case "wms":
{
this.client.invoke( netgis.Events.ADD_SERVICE_WMS, params );
break;
}
case "wfs":
{
this.client.invoke( netgis.Events.ADD_SERVICE_WFS, params );
break;
}
}
this.hide();
};

121
templates/map/client/libs/netgis/Toolbar.js
View File

@@ -18,20 +18,38 @@ netgis.Toolbar.prototype.load = function()
if ( this.client.editable )
{
var bufferDefaultRadius = 1000;
var bufferDefaultSegments = 3;
if ( netgis.util.isDefined( config.tools ) )
{
if ( netgis.util.isDefined( config.tools.buffer.defaultRadius ) ) bufferDefaultRadius = config.tools.buffer.defaultRadius;
if ( netgis.util.isDefined( config.tools.buffer.defaultSegments ) ) bufferDefaultSegments = config.tools.buffer.defaultSegments;
}
// Draw
this.toolbars[ netgis.Modes.DRAW_POINTS ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Punkte zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POINTS ] );
this.toolbars[ netgis.Modes.DRAW_LINES ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Linien zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarCheckbox( "Puffern", this.onDrawBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_LINES ] );
this.showDrawBufferOptions( false );
this.toolbars[ netgis.Modes.DRAW_POLYGONS ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Polygone zeichnen:</span>', this.onToolbarClose.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarCheckbox( "Einrasten", this.onSnapChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.DRAW_POLYGONS ], this.createToolbarCheckbox( "Tracing", this.onTracingChange.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POLYGONS ] );
// Edit
@@ -60,17 +78,8 @@ netgis.Toolbar.prototype.load = function()
//var wrapper = document.createElement( "div" );
//this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ].appendChild( wrapper );
var bufferDefaultRadius = 1000;
var bufferDefaultSegments = 3;
if ( netgis.util.isDefined( config.tools ) )
{
if ( netgis.util.isDefined( config.tools.buffer.defaultRadius ) ) bufferDefaultRadius = config.tools.buffer.defaultRadius;
if ( netgis.util.isDefined( config.tools.buffer.defaultSegments ) ) bufferDefaultSegments = config.tools.buffer.defaultSegments;
}
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature puffern:</span>', this.onBufferCancel.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarInput( "Radius in Meter:", bufferDefaultRadius, this.onBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarInput( "Radius (Meter):", bufferDefaultRadius, this.onBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onBufferChange.bind( this ) ) );
this.append( this.toolbars[ netgis.Modes.BUFFER_FEATURE_EDIT ], this.createToolbarButton( '<i class="fas fa-check"></i><span>OK</span>', this.onBufferAccept.bind( this ) ) );
@@ -252,6 +261,19 @@ netgis.Toolbar.prototype.onSetMode = function( e )
this.updateBuffer();
break;
}
case netgis.Modes.DRAW_POINTS:
case netgis.Modes.DRAW_LINES:
{
var checkbox = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ];
if ( checkbox.checked )
{
this.client.invoke( netgis.Events.DRAW_BUFFER_ON, null );
}
break;
}
}
};
@@ -444,4 +466,83 @@ netgis.Toolbar.prototype.onSnapChange = function( e )
this.toolbars[ netgis.Modes.DRAW_POLYGONS ].getElementsByTagName( "input" )[ 0 ].checked = on;
this.client.invoke( on ? netgis.Events.SNAP_ON : netgis.Events.SNAP_OFF, null );
};
netgis.Toolbar.prototype.onTracingChange = function( e )
{
var input = e.target;
var on = input.checked;
var snapInput = this.toolbars[ netgis.Modes.DRAW_POLYGONS ].getElementsByTagName( "input" )[ 0 ];
var snap = snapInput.checked;
if ( on && !snap )
{
snapInput.checked = on;
this.client.invoke( netgis.Events.SNAP_ON, null );
}
this.client.invoke( on ? netgis.Events.TRACING_ON : netgis.Events.TRACING_OFF, null );
};
netgis.Toolbar.prototype.onDrawBufferChange = function( e )
{
var input = e.target;
var on = input.checked;
this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ].checked = on;
this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 1 ].checked = on;
this.client.invoke( on ? netgis.Events.DRAW_BUFFER_ON : netgis.Events.DRAW_BUFFER_OFF, null );
this.showDrawBufferOptions( on );
};
netgis.Toolbar.prototype.onDrawBufferRadiusChange = function( e )
{
var input = e.target;
var radius = Number.parseFloat( input.value );
this.client.invoke( netgis.Events.DRAW_BUFFER_RADIUS_CHANGE, radius );
var pointsInput = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 2 ];
if ( input !== pointsInput ) pointsInput.value = radius;
var linesInput = this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 2 ];
if ( input !== linesInput ) linesInput.value = radius;
};
netgis.Toolbar.prototype.onDrawBufferSegmentsChange = function( e )
{
var input = e.target;
var segs = Number.parseInt( input.value );
this.client.invoke( netgis.Events.DRAW_BUFFER_SEGMENTS_CHANGE, segs );
var pointsInput = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 3 ];
if ( input !== pointsInput ) pointsInput.value = segs;
var linesInput = this.toolbars[ netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" )[ 3 ];
if ( input !== linesInput ) linesInput.value = segs;
};
netgis.Toolbar.prototype.showDrawBufferOptions = function( on )
{
var pointsItems = this.toolbars[ netgis.Modes.DRAW_POINTS ].children[ 0 ].children;
var linesItems = this.toolbars[ netgis.Modes.DRAW_LINES ].children[ 0 ].children;
if ( on )
{
pointsItems[ 3 ].classList.remove( "netgis-hide" );
pointsItems[ 4 ].classList.remove( "netgis-hide" );
linesItems[ 3 ].classList.remove( "netgis-hide" );
linesItems[ 4 ].classList.remove( "netgis-hide" );
}
else
{
pointsItems[ 3 ].classList.add( "netgis-hide" );
pointsItems[ 4 ].classList.add( "netgis-hide" );
linesItems[ 3 ].classList.add( "netgis-hide" );
linesItems[ 4 ].classList.add( "netgis-hide" );
}
};

57
templates/map/client/libs/netgis/Util.js
View File

@@ -139,6 +139,59 @@ netgis.util =
{
return Object.assign( target, other );
};
/**
* @returns {String} Formatted Date Time String (German Locale)
*/
var getTimeStamp = function()
{
var date = new Date();
var timestamp = date.getDate() + "." + ( date.getMonth() + 1 ) + "." + date.getFullYear();
timestamp += " " + date.getHours() + ":" + date.getMinutes();
return timestamp;
};
/*
* @param {Number} area Raw Area in Square Meters
* @param {Boolean} decimals Output Rounded Decimals
* @returns {String} Formatted Area String (Square Meters/Square Kilometers)
*/
var formatArea = function( area, decimals )
{
var output;
// Normal / Large Value
var large = ( area > 10000 );
// Round Value
var i = 0;
if ( large )
{
if ( decimals )
i = Math.round( area / 1000000 * 1000 ) / 1000;
else
i = Math.round( area / 1000000 );
}
else
{
if ( decimals )
i = Math.round( area * 100 ) / 100;
else
i = Math.round( area );
}
if ( i === 0 ) large = false;
// Build String
output = i + ( large ? " qkm" : " qm" );
//NOTE: HTML Superscript / Unicode (&sup2; etc.) not supported in OL Labels
return output;
};
// Public Interface
var iface =
@@ -153,7 +206,9 @@ netgis.util =
size: size,
request: request,
padstr: padstr,
merge: merge
merge: merge,
getTimeStamp: getTimeStamp,
formatArea: formatArea
};
return iface;