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

netgis_client_update #312

Merged
mpeltriaux merged 2 commits from netgis_client_update into master 2023-03-16 08:14:17 +01:00
Conversation 0 Commits 2 Files Changed 3 +88 -33
3 changed files with 88 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -237,7 +237,7 @@ netgis.MapOpenLayers.prototype.initInteractions = function()
this.interactions[ netgis.Modes.MODIFY_FEATURES ] = this.interactions[ netgis.Modes.MODIFY_FEATURES ] =
[ [
new ol.interaction.Modify( { source: this.editLayer.getSource(), deleteCondition: ol.events.condition.doubleClick, style: this.styleModify.bind( this ) } ), new ol.interaction.Modify( { source: this.editLayer.getSource(), deleteCondition: ol.events.condition.doubleClick, style: this.styleModify.bind( this ) } ),
//new ol.interaction.DragPan(), new ol.interaction.DragPan( { condition: function( e ) { return ( e.originalEvent.which === 2 ); } } ),
new ol.interaction.MouseWheelZoom() new ol.interaction.MouseWheelZoom()
]; ];
@ -596,6 +596,27 @@ netgis.MapOpenLayers.prototype.styleModify = function( feature )
} }
); );
var geom = feature.getGeometry();
if ( geom instanceof ol.geom.Polygon )
{
var area = geom.getArea();
style.setText
(
new ol.style.Text
(
{
text: [ netgis.util.formatArea( area, true ), "4mm sans-serif" ],
font: this.labelFont,
fill: new ol.style.Fill( { color: this.client.config.styles.modify.stroke } ),
backgroundFill: new ol.style.Fill( { color: "rgba( 255, 255, 255, 0.5 )" } ),
padding: [ 2, 4, 2, 4 ]
}
)
);
}
return [ style, vertex ]; return [ style, vertex ];
}; };
@ -1169,6 +1190,8 @@ netgis.MapOpenLayers.prototype.onSingleClick = function( e )
{ {
this.editLayer.getSource().removeFeature( this.hover ); this.editLayer.getSource().removeFeature( this.hover );
this.hover = null; this.hover = null;
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
} }
break; break;
@ -1246,6 +1269,8 @@ netgis.MapOpenLayers.prototype.onCutFeatureDrawEnd = function( e )
this.splitMultiPolygons( this.editLayer ); this.splitMultiPolygons( this.editLayer );
this.editEventsSilent = false; this.editEventsSilent = false;
this.updateEditOutput(); this.updateEditOutput();
this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
}; };
netgis.MapOpenLayers.prototype.onModifyFeaturesEnd = function( e ) netgis.MapOpenLayers.prototype.onModifyFeaturesEnd = function( e )
@ -1328,30 +1353,43 @@ netgis.MapOpenLayers.prototype.onDrawPointsEnd = function( e )
if ( preview ) if ( preview )
{ {
var src = this.editLayer.getSource(); var src = this.editLayer.getSource();
// Add Buffer Feature
src.addFeature( preview.clone() ); src.addFeature( preview.clone() );
//TODO: remove sketch point ? // Remove Sketch Feature
//this.editLayer.getSource().removeFeature( e.feature ); window.setTimeout
(
/*window.setTimeout( function() { function()
var features = src.getFeatures(); {
src.removeFeature( features[ features.length - 1 ] ); src.removeFeature( e.feature );
src.addFeature( preview.clone() ); },
}, 10 );*/ 10
);
/*e.preventDefault();
e.stopPropagation();
return false;*/
} }
}; };
netgis.MapOpenLayers.prototype.onDrawLinesEnd = function( e ) netgis.MapOpenLayers.prototype.onDrawLinesEnd = function( e )
{ {
var preview = this.previewLayer.getSource().getFeatures()[ 0 ]; var preview = this.previewLayer.getSource().getFeatures()[ 0 ];
if ( ! preview ) return;
var src = this.editLayer.getSource(); if ( preview )
src.addFeature( preview.clone() ); {
var src = this.editLayer.getSource();
// Add Buffer Feature
src.addFeature( preview.clone() );
// Remove Sketch Feature
window.setTimeout
(
function()
{
src.removeFeature( e.feature );
},
10
);
}
}; };
netgis.MapOpenLayers.prototype.onDrawBufferOn = function( e ) netgis.MapOpenLayers.prototype.onDrawBufferOn = function( e )

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

@ -31,17 +31,17 @@ netgis.Toolbar.prototype.load = function()
this.toolbars[ netgis.Modes.DRAW_POINTS ] = this.createToolbar(); 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.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( "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.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( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
//this.append( this.toolbars[ netgis.Modes.DRAW_POINTS ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.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.root.appendChild( this.toolbars[ netgis.Modes.DRAW_POINTS ] );
this.toolbars[ netgis.Modes.DRAW_LINES ] = this.createToolbar(); 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.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( "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.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( "Radius (Meter):", bufferDefaultRadius, this.onDrawBufferRadiusChange.bind( this ) ) );
//this.append( this.toolbars[ netgis.Modes.DRAW_LINES ], this.createToolbarInput( "Segmente:", bufferDefaultSegments, this.onDrawBufferSegmentsChange.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.root.appendChild( this.toolbars[ netgis.Modes.DRAW_LINES ] );
this.showDrawBufferOptions( false ); this.showDrawBufferOptions( false );
@ -62,7 +62,7 @@ netgis.Toolbar.prototype.load = function()
this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] ); this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] );
this.toolbars[ netgis.Modes.MODIFY_FEATURES ] = this.createToolbar(); this.toolbars[ netgis.Modes.MODIFY_FEATURES ] = this.createToolbar();
this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Features verschieben:</span>', this.onToolbarClose.bind( this ) ) ); this.append( this.toolbars[ netgis.Modes.MODIFY_FEATURES ], this.createToolbarButton( '<i class="fas fa-times"></i><span>Feature-Eckpunkte verschieben:</span>', this.onToolbarClose.bind( this ) ) );
this.root.appendChild( this.toolbars[ netgis.Modes.MODIFY_FEATURES ] ); this.root.appendChild( this.toolbars[ netgis.Modes.MODIFY_FEATURES ] );
this.toolbars[ netgis.Modes.DELETE_FEATURES ] = this.createToolbar(); this.toolbars[ netgis.Modes.DELETE_FEATURES ] = this.createToolbar();
@ -196,8 +196,10 @@ netgis.Toolbar.prototype.createToolbarInput = function( title, value, callback )
var input = document.createElement( "input" ); var input = document.createElement( "input" );
input.setAttribute( "type", "number" ); input.setAttribute( "type", "number" );
input.setAttribute( "min", 0 ); input.setAttribute( "min", 0 );
input.setAttribute( "step", 0.01 );
input.value = value; input.value = value;
input.addEventListener( "change", callback ); input.addEventListener( "change", callback );
input.addEventListener( "keyup", callback );
label.appendChild( input ); label.appendChild( input );
return label; return label;
@ -266,12 +268,12 @@ netgis.Toolbar.prototype.onSetMode = function( e )
case netgis.Modes.DRAW_LINES: case netgis.Modes.DRAW_LINES:
{ {
var checkbox = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ]; var checkbox = this.toolbars[ netgis.Modes.DRAW_POINTS ].getElementsByTagName( "input" )[ 1 ];
/*
if ( checkbox.checked ) if ( checkbox.checked )
{ {
this.client.invoke( netgis.Events.DRAW_BUFFER_ON, null ); this.client.invoke( netgis.Events.DRAW_BUFFER_ON, null );
} }
*/
break; break;
} }
} }
@ -496,6 +498,20 @@ netgis.Toolbar.prototype.onDrawBufferChange = function( e )
this.client.invoke( on ? netgis.Events.DRAW_BUFFER_ON : netgis.Events.DRAW_BUFFER_OFF, null ); this.client.invoke( on ? netgis.Events.DRAW_BUFFER_ON : netgis.Events.DRAW_BUFFER_OFF, null );
this.showDrawBufferOptions( on ); this.showDrawBufferOptions( on );
// Update Buffer Values
if ( on )
{
var points = true;
if ( ! this.toolbars[ netgis.Modes.DRAW_LINES ].classList.contains( "netgis-hide" ) ) points = false;
var inputs = this.toolbars[ points ? netgis.Modes.DRAW_POINTS : netgis.Modes.DRAW_LINES ].getElementsByTagName( "input" );
var radius = Number.parseInt( inputs[ 2 ].value );
var segments = Number.parseInt( inputs[ 3 ].value );
this.client.invoke( netgis.Events.DRAW_BUFFER_RADIUS_CHANGE, radius );
this.client.invoke( netgis.Events.DRAW_BUFFER_SEGMENTS_CHANGE, segments );
}
}; };
netgis.Toolbar.prototype.onDrawBufferRadiusChange = function( e ) netgis.Toolbar.prototype.onDrawBufferRadiusChange = function( e )
@ -533,16 +549,16 @@ netgis.Toolbar.prototype.showDrawBufferOptions = function( on )
if ( on ) if ( on )
{ {
//pointsItems[ 3 ].classList.remove( "netgis-hide" ); pointsItems[ 3 ].classList.remove( "netgis-hide" );
//pointsItems[ 4 ].classList.remove( "netgis-hide" ); pointsItems[ 4 ].classList.remove( "netgis-hide" );
//linesItems[ 3 ].classList.remove( "netgis-hide" ); linesItems[ 3 ].classList.remove( "netgis-hide" );
//linesItems[ 4 ].classList.remove( "netgis-hide" ); linesItems[ 4 ].classList.remove( "netgis-hide" );
} }
else else
{ {
//pointsItems[ 3 ].classList.add( "netgis-hide" ); pointsItems[ 3 ].classList.add( "netgis-hide" );
//pointsItems[ 4 ].classList.add( "netgis-hide" ); pointsItems[ 4 ].classList.add( "netgis-hide" );
//linesItems[ 3 ].classList.add( "netgis-hide" ); linesItems[ 3 ].classList.add( "netgis-hide" );
//linesItems[ 4 ].classList.add( "netgis-hide" ); linesItems[ 4 ].classList.add( "netgis-hide" );
} }
}; };

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

@ -190,6 +190,7 @@ netgis.util =
output = i + ( large ? " km²" : " m²" ); output = i + ( large ? " km²" : " m²" );
//NOTE: HTML Superscript / Unicode (&sup2; etc.) not supported in OL Labels //NOTE: HTML Superscript / Unicode (&sup2; etc.) not supported in OL Labels
return output; return output;
}; };