master #313
@ -237,7 +237,7 @@ netgis.MapOpenLayers.prototype.initInteractions = function()
 | 
			
		||||
	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.DragPan(),
 | 
			
		||||
		new ol.interaction.DragPan( { condition: function( e ) { return ( e.originalEvent.which === 2 ); } } ),
 | 
			
		||||
		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 ];
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -1169,6 +1190,8 @@ netgis.MapOpenLayers.prototype.onSingleClick = function( e )
 | 
			
		||||
			{
 | 
			
		||||
				this.editLayer.getSource().removeFeature( this.hover );
 | 
			
		||||
				this.hover = null;
 | 
			
		||||
				
 | 
			
		||||
				this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
 | 
			
		||||
			}
 | 
			
		||||
			
 | 
			
		||||
			break;
 | 
			
		||||
@ -1246,6 +1269,8 @@ netgis.MapOpenLayers.prototype.onCutFeatureDrawEnd = function( e )
 | 
			
		||||
	this.splitMultiPolygons( this.editLayer );
 | 
			
		||||
	this.editEventsSilent = false;
 | 
			
		||||
	this.updateEditOutput();
 | 
			
		||||
	
 | 
			
		||||
	this.client.invoke( netgis.Events.SET_MODE, netgis.Modes.VIEW );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
netgis.MapOpenLayers.prototype.onModifyFeaturesEnd = function( e )
 | 
			
		||||
@ -1328,30 +1353,43 @@ netgis.MapOpenLayers.prototype.onDrawPointsEnd = function( e )
 | 
			
		||||
	if ( preview )
 | 
			
		||||
	{
 | 
			
		||||
		var src = this.editLayer.getSource();
 | 
			
		||||
		
 | 
			
		||||
		// Add Buffer Feature
 | 
			
		||||
		src.addFeature( preview.clone() );
 | 
			
		||||
		
 | 
			
		||||
		//TODO: remove sketch point ?
 | 
			
		||||
		//this.editLayer.getSource().removeFeature( e.feature );
 | 
			
		||||
		
 | 
			
		||||
		/*window.setTimeout( function() {
 | 
			
		||||
		var features = src.getFeatures();
 | 
			
		||||
		src.removeFeature( features[ features.length - 1 ] );
 | 
			
		||||
		src.addFeature( preview.clone() );
 | 
			
		||||
		}, 10 );*/
 | 
			
		||||
		
 | 
			
		||||
		/*e.preventDefault();
 | 
			
		||||
		e.stopPropagation();
 | 
			
		||||
		return false;*/
 | 
			
		||||
		// Remove Sketch Feature
 | 
			
		||||
		window.setTimeout
 | 
			
		||||
		(
 | 
			
		||||
			function()
 | 
			
		||||
			{
 | 
			
		||||
				src.removeFeature( e.feature );
 | 
			
		||||
			},
 | 
			
		||||
			10
 | 
			
		||||
		);
 | 
			
		||||
	}
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
netgis.MapOpenLayers.prototype.onDrawLinesEnd = function( e )
 | 
			
		||||
{
 | 
			
		||||
	var preview = this.previewLayer.getSource().getFeatures()[ 0 ];
 | 
			
		||||
	if ( ! preview ) return;
 | 
			
		||||
	
 | 
			
		||||
	if ( preview )
 | 
			
		||||
	{
 | 
			
		||||
		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 )
 | 
			
		||||
 | 
			
		||||
@ -31,17 +31,17 @@ netgis.Toolbar.prototype.load = function()
 | 
			
		||||
		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.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.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 );
 | 
			
		||||
@ -62,7 +62,7 @@ netgis.Toolbar.prototype.load = function()
 | 
			
		||||
		this.root.appendChild( this.toolbars[ netgis.Modes.CUT_FEATURE_DRAW ] );
 | 
			
		||||
 | 
			
		||||
		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.toolbars[ netgis.Modes.DELETE_FEATURES ] = this.createToolbar();
 | 
			
		||||
@ -196,8 +196,10 @@ netgis.Toolbar.prototype.createToolbarInput = function( title, value, callback )
 | 
			
		||||
	var input = document.createElement( "input" );
 | 
			
		||||
	input.setAttribute( "type", "number" );
 | 
			
		||||
	input.setAttribute( "min", 0 );
 | 
			
		||||
	input.setAttribute( "step", 0.01 );
 | 
			
		||||
	input.value = value;
 | 
			
		||||
	input.addEventListener( "change", callback );
 | 
			
		||||
	input.addEventListener( "keyup", callback );
 | 
			
		||||
	label.appendChild( input );
 | 
			
		||||
	
 | 
			
		||||
	return label;
 | 
			
		||||
@ -266,12 +268,12 @@ netgis.Toolbar.prototype.onSetMode = function( e )
 | 
			
		||||
		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;
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
@ -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.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 )
 | 
			
		||||
@ -533,16 +549,16 @@ netgis.Toolbar.prototype.showDrawBufferOptions = function( on )
 | 
			
		||||
	
 | 
			
		||||
	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" );
 | 
			
		||||
		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" );
 | 
			
		||||
		pointsItems[ 3 ].classList.add( "netgis-hide" );
 | 
			
		||||
		pointsItems[ 4 ].classList.add( "netgis-hide" );
 | 
			
		||||
		linesItems[ 3 ].classList.add( "netgis-hide" );
 | 
			
		||||
		linesItems[ 4 ].classList.add( "netgis-hide" );
 | 
			
		||||
	}
 | 
			
		||||
};
 | 
			
		||||
@ -190,6 +190,7 @@ netgis.util =
 | 
			
		||||
			output = i + ( large ? " km²" : " m²" );
 | 
			
		||||
			
 | 
			
		||||
			//NOTE: HTML Superscript / Unicode (² etc.) not supported in OL Labels
 | 
			
		||||
			
 | 
			
		||||
			return output;
 | 
			
		||||
		};
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user