11openlayers 地图交互

Posted 2021-03-05 mashuai666

地图交互interaction 关于map的方法：

//添加地图交互
map.addInteraction(interaction)
//删除地图交互
map.removeInteraction(interaction)

创建矢量图层并添加到地图容器中：

//创建矢量图层并添加到地图容器中
var source = new ol.source.Vector({
    wrapX: false
});
var vector = new ol.layer.Vector({
    source: source
});
map.addLayer(vector)

1、绘制交互功能：Draw

//绘制交互功能
draw = new ol.interaction.Draw({
    source: source,//矢量资源
    type: flg.ArrowLine.type,//绘制类型
    geometryFunction:flg.ArrowLine.geometryFunction,//更新几何坐标时调用的函数
});
map.addInteraction(draw);

绘制类型：

//绘制类型
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){
            //中心点
            var center = coordinates[0];
            //鼠标点击的另一个点
            var last = coordinates[1];
            var dx = center[0] - last[0];
            var dy = center[1] - last[1];
            //半径
            var radius = Math.sqrt(dx * dx + dy * dy);
            //旋转的角度
            var rotation = Math.atan2(dy, dx);
            //用来记录顶点坐标的数组 
            var newCoordinates = [];
            //顶点个数
            var numPoints = 10;
            for (var i = 0; i < numPoints; ++i) {
                //顶点相对转过的角度
                var angle = rotation + i * 2 * Math.PI / numPoints;
                //确定凸顶点和凹顶点
                var fraction = i % 2 === 0 ? 1 : 0.5;
                //计算顶点的坐标
                var offsetX = radius * fraction * Math.cos(angle);
                var offsetY = radius * fraction * 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、捕捉交互——修改交互

//捕捉交互功能
let snap = new ol.interaction.Snap({ source: source });
map.addInteraction(snap);

//修改交互功能
let modify = new ol.interaction.Modify({ 
    source: source,//矢量资源
    insertVertexCondition: function (){return true},//是否应将新顶点添加到草图特征
});
map.addInteraction(modify);

3、旋转缩放交互

//按住Shift并使用鼠标拖拽可以旋转、缩放地图
let dRZ = new ol.interaction.DragRotateAndZoom()
map.addInteraction(dRZ);

4、选择交互(矢量)

//添加一个geojson
let vectorGeojson = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: ‘lib/lands.geojson‘,
        format: new ol.format.GeoJSON()
      })
})
map.addLayer(vectorGeojson)
//交互类型
let enents={
    click:ol.events.condition.click,
    singleclick:ol.events.condition.singleclick,
    pointerMove:ol.events.condition.pointerMove
}
//创建交互
let selects = new ol.interaction.Select({
      condition: enents.click,
      layers:[vectorGeojson],//应当从中选择要素的图层列表,如未提供默认所有图层可选
      style:new ol.style.Style({//选中的样式，未提供使用默认样式
        //填充样式(面)
        fill: new ol.style.Fill({
            color: ‘rgba(255, 255, 255, 0.2)‘
        }),
        //描边样式(线)
        stroke: new ol.style.Stroke({
            color: ‘#ffcc33‘,
            width: 2
        })
    })
})
map.addInteraction(selects);
//交互事件
selects.on(‘select‘,function(e){
    console.log(e)
})

5、移动交互

//要素移动交互(需要用到选择交互selects)配合选择要素使用
let translate = new ol.interaction.Translate({
    features: selects.getFeatures()
});
map.addInteraction(translate);