OpenLayers Note 4: Vector layer interaction and highlighting of selected vector features


OpenLayers provides the ol.interaction.Select class to interact with the vector layer.
It is also through monitoring the events of the map and window to trigger the interaction and make the corresponding vector elements dynamically change.

ol.interaction.Select overview

The properties that can be set in the ol.interaction.Select class mainly include:
condition: Maps and browser events that trigger interaction, the default is ol.events.condition.singleClick. Events that can be monitored .
addCondition: triggers map and browser events for multi-selection of interactive targets.
removeCondition: triggers the removal of maps and browser events that occur as interactive targets.
toggleCondition: Map and browser events that can be triggered and removed simultaneously. The default is ol.events.condition.shiftKeyOnly.
layers: the target layer that triggers the interaction, which can be one or more. The default is all visible layers.
features: A collection of target vector features that trigger interaction.
filter: filter interactive target layers or feature sets. Function form, return result, you can set the filter under limited conditions.
style: After the interaction is triggered, the display style of the corresponding vector element. If false, the style remains unchanged.
multi: Overlapping vector elements. The default is false, and only the outermost vector features are selected. If true, all superimposed vector elements are selected.
hitTolerance: The inspection range of hit events. Check if there is a target within a certain radius around the event location.

Highlight selected vector elements with the mouse

var FeatureInteraction = new ol.interaction.Select({
    //指针移动在目标内即触发交互
    condition: ol.events.condition.pointerMove,
    //按住shift键选中未触发交互的要素,即可为该要素触发交互,且不去除已触发的交互。
    //按住shift键选中已触发交互的要素,即可去除当前要素的交互。
    toggleCondition:ol.events.condition.shiftKeyOnly,
    
    //按住alt键选中未触发交互的要素,即可为该要素触发交互,且不去除已触发的交互。
    //按住shift键选中已触发交互的要素,即可去除当前要素的交互。
    //addCondition:ol.events.condition.altKeyOnly,
    //removeCondition:ol.events.condition.shiftKeyOnly,
    
    //目标图层
    layers: [layer2],   
    //筛选 
    //filter: function (feature, layer) {
    //    return layer2;
    //},
    //样式
    style:new ol.style.Style({
        image: new ol.style.Circle({
            radius: 8,
            fill: new ol.style.Fill({
                color: '#ffff44',
            }),
            stroke: new ol.style.Stroke({
                color: '#444444',
                width: 1
            })
         })
     }), 
     multi:false,      
});
map.addInteraction(FeatureInteraction);

Select multiple vector features to highlight

Published 4 original articles · won 15 · views 1152

Guess you like

Origin blog.csdn.net/nolesstime/article/details/105589511