added altclick select to selectfeatures example
This commit is contained in:
@@ -3,7 +3,7 @@ template: example.html
|
|||||||
title: Select features example
|
title: Select features example
|
||||||
shortdesc: Example of using the Select interaction.
|
shortdesc: Example of using the Select interaction.
|
||||||
docs: >
|
docs: >
|
||||||
Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
Choose between <code>Single-click</code>, <code>Click</code>, <code>Hover</code> and <code>Alt+Click</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
||||||
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
|
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
|
||||||
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
|
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
@@ -13,6 +13,7 @@ docs: >
|
|||||||
<option value="singleclick">Single-click</option>
|
<option value="singleclick">Single-click</option>
|
||||||
<option value="click">Click</option>
|
<option value="click">Click</option>
|
||||||
<option value="pointermove">Hover</option>
|
<option value="pointermove">Hover</option>
|
||||||
|
<option value="altclick">Alt+Click</option>
|
||||||
</select>
|
</select>
|
||||||
<span id="status"> 0 selected features</span>
|
<span id="status"> 0 selected features</span>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -43,6 +43,13 @@ var selectPointerMove = new ol.interaction.Select({
|
|||||||
condition: ol.events.condition.pointerMove
|
condition: ol.events.condition.pointerMove
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var selectAltClick = new ol.interaction.Select({
|
||||||
|
condition: function(mapBrowserEvent) {
|
||||||
|
return ol.events.condition.click(mapBrowserEvent) &&
|
||||||
|
ol.events.condition.altKeyOnly(mapBrowserEvent);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
var selectElement = document.getElementById('type');
|
var selectElement = document.getElementById('type');
|
||||||
|
|
||||||
var changeInteraction = function() {
|
var changeInteraction = function() {
|
||||||
@@ -56,6 +63,8 @@ var changeInteraction = function() {
|
|||||||
select = selectClick;
|
select = selectClick;
|
||||||
} else if (value == 'pointermove') {
|
} else if (value == 'pointermove') {
|
||||||
select = selectPointerMove;
|
select = selectPointerMove;
|
||||||
|
} else if (value == 'altclick') {
|
||||||
|
select = selectAltClick;
|
||||||
} else {
|
} else {
|
||||||
select = null;
|
select = null;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user