[11] openlayers interactive map

Maps on interactive map interaction method:

// add interactive map 
map.addInteraction (Interaction)
 // delete interactive map 
map.removeInteraction (interaction)

And create a vector layer added to the map container:

// Create vector layer and added to the map container 
var Source = new new ol.source.Vector ({ 
    wrapX: to false 
}); 
var Vector = new new ol.layer.Vector ({ 
    Source: Source 
}); 
map.addLayer ( vector)

1. Draw interactive features: Draw

// Draw interactive features 
Draw = new new ol.interaction.Draw ({ 
    Source: Source, // vector resource 
    of the type: flg.ArrowLine.type, // draw type 
    flg.ArrowLine.geometryFunction,: geometryFunction // called when updating the geometric coordinates function 
}); 
map.addInteraction (Draw);

Drawing Type:

//绘制类型
let flg = {
    Point:{
        type:'Point',
        style:undefined,
        geometryFunction:undefined,
    },
    LineString:{
        type:'LineString',
        style:undefined,
        geometryFunction:undefined
    },
    ArrowLine:{
        type:'LineString',
        style:undefined,
        geometryFunction:undefined,
        style: function (feature) {
            let geometry = feature.getGeometry();
            let styles = [
                new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#ffcc33',
                        width: 2
                    })
                })
            ];
            geometry.forEachSegment(function (start, end) {
                let dx = end[0] - start[0];
                let dy = end[1] - start[1];
                let rotation = Math.atan2(dy, dx);
                styles.push(new ol.style.Style({
                    geometry: new ol.geom.Point(end),
                    image: new ol.style.Icon({
                        src: 'lib/arrow.png',
                        anchor: [0.75, 0.5],
                        rotateWithView: true,
                        rotation: -rotation
                    })
                }));
            });
            return styles;
        }
    },
    Polygon:{
        type:'Polygon',
        style:undefined,
        geometryFunction:undefined
    },
    Circle:{
        type:'Circle',
        style:undefined,
        geometryFunction:undefined
    },
    Square:{
        type:'Circle',
        style:undefined,
        geometryFunction:ol.interaction.Draw.createRegularPolygon(4)
    },
    Box:{
        type:'Circle',
        style:undefined,
        geometryFunction:ol.interaction.Draw.createBox()
    },
    Star:{
        type:'Circle',
        style:undefined,
        geometryFunction: function (coordinates, Geometry) {
             // center point 
            var Center = coordinates [0 ];
             // another mouse click 
            var Last = coordinates [. 1 ];
             var DX Center = [0] - Last [0 ];
             var Dy = Center [. 1] - Last [. 1 ];
             // radius 
            var rADIUS = the Math.sqrt (DX DX * * + Dy Dy);
             // angle of rotation 
            var rotation = Math.atan2 (Dy, DX);
             / / is used to record an array of vertex coordinates 
            var newCoordinates = [];
            // number of vertices 
            var numPoints = 10 ;
            for ( var I = 0; I <numPoints; ++ I) {
                 // opposite the apex angle turned 
                var angle rotation + = 2 * I * Math.PI / numPoints;
                 // determining concave and convex vertex vertex 
                var fraction = ? I === 0. 1% 2: 0.5 ;
                 // calculate vertex coordinates 
                var offsetX fraction * * = RADIUS Math.cos (angle);
                 var offsetY fraction * * = RADIUS Math.sin, (angle);                             
                newCoordinates.push ( [Center [ 0] + offsetX, Center [. 1] + offsetY]); 
            } 
            newCoordinates.push (newCoordinates [0].slice());
            if (!geometry) {
                geometry = new ol.geom.Polygon([newCoordinates]);
            } else {
                geometry.setCoordinates([newCoordinates]);
            }
            return geometry;
        }
    }
}

2, to capture the interaction - interaction modification

// capture interactive features 
the let SNAP = new new ol.interaction.Snap ({Source: Source}); 
map.addInteraction (SNAP); 

// modified interaction function 
the let Modify = new new ol.interaction.Modify ({ 
    Source: Source, / / vector resources 
    insertVertexCondition: function () { return  to true }, // should new vertices to a sketch feature 
}); 
map.addInteraction (Modify);

3, rotating zoom interaction

// hold down Shift and use the mouse to drag can rotate, zoom the map 
the let DRZ = new new ol.interaction.DragRotateAndZoom () 
map.addInteraction (DRZ);

4, select interaction (vector)

// Add a GeoJSON 
the let vectorGeojson = new new ol.layer.Vector ({ 
      Source: new new ol.source.Vector ({ 
        URL: 'lib / lands.geojson' , 
        the format: new new ol.format.GeoJSON () 
      }) 
}) 
map.addLayer (vectorGeojson) 
// type of interaction 
the let enents = { 
    the Click: ol.events.condition.click, 
    SingleClick: ol.events.condition.singleclick, 
    pointerMove: ol.events.condition.pointerMove 
} 
// create interactive 
let selects = new new ol.interaction.Select ({  
      for condition Condition: enents.click,
      Layers: [vectorGeojson], //You should choose the elements of the list of layers, if not provided by default all layers Optional 
      style: new new ol.style.Style ({ // the selected style, not provided with the default style 
        // fill style (face) 
        the Fill: new new OL .style.Fill ({ 
            Color: 'RGBA (255, 255, 255, 0.2)' 
        }), 
        // stroke styles (linear) 
        stroke: new new ol.style.Stroke ({ 
            Color: '# FFCC33' , 
            width: 2 
        }) 
    }) 
}) 
map.addInteraction (Selects); 
// interactivity event 
selects.on ( 'SELECT', function  (E) {
    the console.log (E) 
})

5, Mobile Interaction

// mobile factors interaction (selection will need to interact Selects) with selected features using 
the let Translate = new new ol.interaction.Translate ({ 
    Features: selects.getFeatures () 
}); 
map.addInteraction (Translate);