Interaction

Superplasticizer in concrete 2021-08-12 10:41 163

interaction refers to the user's interactive behaviors such as translating, rotating and zooming the map through mouse, keyboard and touch screen; Openlayers provides the most basic map zoom in, zoom out, pan and other functions. These basic operation functions are built-in by default. No additional settings are required during secondary development. In addition, there are some interactive behaviors that need to be set to take effect, such as moving features, drawing graphics, etc

Default interaction
 / / Map
var map = new ol.Map({
interactions: ol.interaction.defaults({
onFocusOnly: true,
Altshiftdragrotate: false, / / ALT + Shift drag and rotate
Pinchrotate: false, / / rotate the two finger touch screen
Doubleclickzoom: false, / / double click to zoom
Mousewheel zoom: false, / / mouse wheel zoom
Shiftdragzoom: false, / / shift drag zoom
Pinchzoom: false, / / the two finger touch screen is clamped open to zoom
Dragpan: false, / / PAN
Keyboard: false, / / keyboard operation
Zoomdelta: 3, / / zoom level increment when zooming using the keyboard or double clicking
Zoomduration: 5000, / / duration of scaling animation (MS)
}),
layers:[gaodeTileLayer,layerChinaSimple,layerDraw],
view: new ol.View({
center: [117.020847,36.670086],
maxZoom: 19,
zoom: 5,
projection: 'EPSG:4326'
}),
target: 'map'
});
Translate move features

Interaction for translating (moving) features. Interaction for moving features; Official example: https://openlayers.org/en/latest/examples/translate-features.html

the moving object can be feature features or layer layers, but they cannot exist at the same time; The hittolerance property is used to set the trigger range

primary code:

 / / create a mobile interaction object
var translate = new ol.interaction.Translate({
features: new ol.Collection([featureIcon1]),
//layers: [layerChinaSimple],
//Hittolerance: 100 / / trigger range: it can be triggered within the radius circle of 100 pixels of the element
})
//Add interactive behavior to map
map.addInteraction(translate);
//Trigger event of interactive object
translate.on('translatestart',function(e){
$(#message1). Text (start moving!);
});
translate.on('translating',function(e){
$(#message1). Text (moving!);
});
translate.on('translateend',function(e){
$(#message1). Text (end move!);
});
Draw draw feature graphics

Interaction for drawing feature geometries. Interactive drawing of feature geometry Official example: https://openlayers.org/en/latest/examples/draw-features.html?q=draw Refer to the official example for drawing other graphics: https://openlayers.org/en/latest/examples/draw-shapes.html?q=draw

type can be 'point' 'linestring' 'polygon' 'circle', which is used to draw geometry points, lines, faces and circles Geometryfunction can draw other graphics. Ol. Interaction. Draw. Createbox() is used to draw rectangles, ol. Interaction. Draw. Createregularpolygon() is used to draw regular polygons, and createregularpolygon (4) is square; Note that when using the geometryfunction, the type attribute should be circle

primary code:

 / / create and draw interactive objects
var draw = new ol.interaction.Draw({
source: sourceDraw,
type: 'Circle'    // 'Point''LineString''Polygon''Circle'
geometryFunction: ol.interaction.Draw.createBox()    // createRegularPolygon()
})
//Add interactive behavior to map
map.addInteraction(draw);
//Trigger event of interactive object
draw.on('drawstart',function(e){
$(#message). Text (start drawing!);
});
draw.on('drawend',function(e){
$(#message). Text (end drawing!);
});
Snap snap

Handles snapping of vector features while modifying or drawing them. The capture interaction of vector features is realized when modifying or drawing vector features Official example: https://openlayers.org/en/latest/examples/snap.html?q=draw

primary code:

 / / create snap interactive object
var snap = new ol.interaction.Snap({
source: sourceDraw,
})
//Add interactive behavior to map
map.addInteraction(snap);
Tag:Interaction,interaction,refers