Closed ngjiajunsg closed 2 years ago
Hi,
drawstart
event (popup.hide()
or clear selection)drawend
event and de-activate the interaction to stop using it
// Remove popup on drawstart (clear selection)
edit.getInteraction('DrawLine').on('drawstart', function() {
edit.getInteraction('Select').getFeatures().clear();
});
// Stop drawing on drawend
edit.getInteraction('DrawLine').on('drawend', function() {
edit.getInteraction('DrawLine').setActive(false);
});
Hi Viglino,
i try the below code both
1) // Remove popup on drawstart (clear selection) edit.getInteraction('DrawLine').on('drawstart', function() { edit.getInteraction('Select').getFeatures().clear(); });
2) popup.hide();
both does not work 1) - the PopupFeature still appear with blank information 2) - error : Uncaught TypeError: popup.hide is not a function
i notice if integrate with PopupFeature, seem like my drawing point does not work.
Do you have an online example?
this are the code
<!DOCTYPE html>
You have to use the select interaction of the edit bar edit.getInteraction('Select')
to handle the popup (ie. show poup when selected).
Otherwise, you have to deactivate the selection when drawing to prevent selection/popup to interfere with the drawing itself.
See line 287 > https://codepen.io/viglino/pen/wvrRYPE
thank Viglino,
some questions on the edit bar.
edit.getInteraction('DrawLine').on('drawstart', (e) => {
var feature = e.feature;
// Save the geometry
var geom = feature.getGeometry()
...
})
sorry i dont understand the logic on the "You can add your own buttons to open a form and edit selected features as well. You can use the [i] button to do that for example."
also can i check with you, how can i remove icons from the editbar, for example just display only drawline and draw polygon?
In the exemple click on the info button display a notification:
edit.on('info', function(e){
console.log(e)
note.show('<i class="fa fa-info-circle"></i> '+e.features.getLength()+' feature(s) selected');
});
You can use it to display a form to change feature attributes;
edit.on('info', function(e){
var feature = e.features.item(0); // e.features[0] is a Collection
if (feature) {
var label = prompt('label');
feature.set('label', label);
}
});
You can also add your own control to the bar:
var editAttr = new ol.control.Button({
html: 'E',
title: "attributes",
handleClick: function() {
var f = edit.getInteraction('Select').getFeatures().item(0)
if (f) {
var label = prompt('label');
f.set('label', label);
}
}
});
edit.addControl (editAttr);
edit.on('info', function(e){
var feature = e.features[0];
if (feature) {
var label = prompt('label');
features.set('label', label);
}
});
i try add this code but seem like the var feature = e.features[0]; is undefined
Ok! e.features
is not an array but a Collection, try e.features.item(0)
instead 😃
edit.on('info', function(e){
var feature = e.features.item(0);
if (feature) {
var label = prompt('label');
feature.set('label', label);
}
});
Hi Viglino,
can i check with you wonder am i able restrict users to move anything from the map.. example https://codepen.io/viglino/pen/wvrRYPE
i have 3 locations point which i dont want users to move it.. is there any other way?
The default modify interaction in the edit bar use the selected feature but you can set your own modify interaction on creation. The ModifyFeature interaction lets you add a filter function decide if the feature has to be modified or not. See http://viglino.github.io/ol-ext/doc/doc-pages/ol.interaction.ModifyFeature.html Something like that:
edit = new ol.control.Bar({
interactions: {
ModifySelect: new ol.interaction.ModifyFeature({
filter: function(f) {
// Test if feature can be modified
if (isModif(f)) return true;
else return false;
}
}
})
I've added a setFilter method to let you change the filter directly:
edit.getInteraction('ModifySelect').setFilter(function(f) {
//edit.getInteraction('ModifySelect', function(f) {
if (isModif(f)) return true;
else return false;
})
Sorry i dont get it as i implement the
edit.getInteraction('ModifySelect', function(f) {
if (isModif(f)) return true;
else return false;
})
but i still able to move the fixed feature
Sorry setFilter()
was missing, the code should be:
edit.getInteraction('ModifySelect').setFilter(function(f) {
if (isModif(f)) return true;
else return false;
})
Hi Viglino,
Sorry, seem like now all the features unable to edit/modfiy. even newly created from the editbar
in addition, now i also able to delete alway all the predrawn feature
Hi Viglino,
can check with you if i wish the measurement to remain on the features issit possible? and in addition for circle can i check if i draw with shift and ctrl why it show the area of the circle instead of the radius?
If you want to add information on feature you have to do it by yourself on drawend
event.
While drawing you can check the current drawing and modify the tooltip content.
var regular = edit.getInteraction('DrawRegular');
regular.on('drawing', function(e) {
// Circle?
if (e.centered && e.square && regular.getSides()<3) {
// Calculate Length
var length = ol.sphere.getDistance( ol.proj.toLonLat(e.startCoordinate), ol.proj.toLonLat(e.coordinate) );
// set measure
tooltip.set('measure', tooltip.formatLength(length));
}
})
Hi Viglino,
Sorry, seem like now all the features unable to edit/modfiy. even newly created from the editbar
in addition, now i also able to delete alway all the predrawn feature
The edition is controlled by the filter you give. Try display the test on console to see what's wrong:
edit.getInteraction('ModifySelect').setFilter(function(f) {
console.log('TEST', f, isModif(f));
if (isModif(f)) return true;
else return false;
})
Hi Viglino,
i got this error.
Uncaught ReferenceError : isModif is not defined at ol.interaction.ModifyFeature.filterSplit_ at ol.interaction.ModifyFeature.getClosestFeature (ol-ext.js:22969)
i try put this code in codepen (https://codepen.io/ngjiajun/pen/wvrRmML) still the same
[Uncaught ReferenceError: isModif is not defined at https://cdpn.io/cpe/boomboom/index.html?editors=1011&key=index.html-4c07c6af-6231-0790-34b3-3a8499428ec5:213]
Hi Viglino,
can i check whether i am able to put the measure label display after measure (https://openlayers.org/en/latest/examples/measure.html)
You have to define your own filter function (isModif
) to test if the feature is modifiable or not...
Return true
if the feature is modifiable or `false if not...
If you want to add information on feature you have to do it by yourself on
drawend
event.While drawing you can check the current drawing and modify the tooltip content.
var regular = edit.getInteraction('DrawRegular'); regular.on('drawing', function(e) { // Circle? if (e.centered && e.square && regular.getSides()<3) { // Calculate Length var length = ol.sphere.getDistance( ol.proj.toLonLat(e.startCoordinate), ol.proj.toLonLat(e.coordinate) ); // set measure tooltip.set('measure', tooltip.formatLength(length)); } })
Hi Viglino, can check if i want to display both area and distance together?
issit by adding to the area computation into tooltip.set method?
You have to define your own filter function (
isModif
) to test if the feature is modifiable or not... Returntrue
if the feature is modifiable or `false if not...
can check issit the isModif function workflow should be like
You can set what you want in the measure
property of the tooltip:
tooltip.set('measure', 'blabla: ' + length + ' - ' + area);
The filter function in the ModifySelect interaction only get the selected feature. You don't have access to the layer at this step. You have to store the layer as a feature property when inserted in the layer if you want to retrieve it...
Hi Viglino,
can i check whether i am able to put the measure label display after measure (https://openlayers.org/en/latest/examples/measure.html)
how can i set the label display after measure for line, shape and polygon?? issit that i need to
output = ol.sphere.getDistance( ol.proj.toLonLat(e.startCoordinate), ol.proj.toLonLat(e.coordinate) );
tooltip.innerHTML = tooltip.formatLength(output );
tooltip.setPosition(e.coordinate);
- The filter function in the ModifySelect interaction only get the selected feature. You don't have access to the layer at this step. You have to store the layer as a feature property when inserted in the layer if you want to retrieve it...
do you mean by this
var DrawingLayer = new ol.layer.Vector({ source: new ol.source.Vector({ layer: 'Drawing Layer' }), title: "Drawing Layer" });
how can i set the label display after measure for line, shape and polygon?? issit that i need to
tooltip.set('measure', any_string_you_want);
source.on('addfeature', function(f) {
f.set('layer', layer)
});
// then you can get layer's back: f.get('layer')
how can i set the label display after measure for line, shape and polygon?? issit that i need to
tooltip.set('measure', any_string_you_want);
i wish to display the measurement at the end of the drawing
- You have to store the layer on the feature when you insert it to get the layer back when you have to know it:
source.on('addfeature', function(f) { f.set('layer', layer) }); // then you can get layer's back: f.get('layer')
i understand for my own code i able to store this line of code. but for editbar the drawing how should i add the line of code above for all kinds of drawing
edit.getInteraction('DrawPoint').on('change:active', function(e){
tooltip.setInfo(e.oldValue ? '' : 'Click map to place a point...');
});
edit.getInteraction('DrawLine').on(['change:active','drawend'], function(e){
tooltip.setFeature();
tooltip.setInfo(e.oldValue ? '' : 'Click map to start drawing line...');
});
i not sure where should i put it for point and the same for line and poly and shapes
i wish to display the measurement at the end of the drawing
The editbar example show you how to display measure while drawing. If you want to display information after drawing, just use a Popup.
i understand for my own code i able to store this line of code. but for editbar the drawing how should i add the line of code above for all kinds of drawing
You said you want to know the layer the feature belong to.
can check issit the isModif function workflow should be like : check the layer issit drawing layer if yes is true else is false?
But there is no link between features and layers with ol (the same feature can be in many layers). So you have to set the layer as an attribute on feature insertion (source.on('addfeature', function(f) { f.set('layer', layer) });
) to get it back when needed and test in your isModif function...
Hi Viglino,
i got some issue when i intergate EditBar with PopupFeature.