开源WebGIS开发——地图交互

1、交互对象Interaction架构

2、DragAndDrop拖放文件到地图

 

//创建一个拖放交互控件
        var dragAndDrop = new ol.interaction.DragAndDrop({
            //支持加载的地理数据的格式
            formatConstructors: [
                ol.format.GPX,
                ol.format.GeoJSON,
                ol.format.IGC,
                ol.format.KML,
                ol.format.TopoJSON
            ]
        })

添加对应的拖动事件，“addfeatures”

dragAndDrop.on("addfeatures", function (event) {
            console.log(event)
            var vectorSource = new ol.source.Vector();
            var vectorLayer = new ol.layer.Vector({
                source: vectorSource,
                style: getStyle
            });
            var features = event.features;
            for (var index = 0; index < features.length; index++) {
                var feature = features[index];
                var featureN = new ol.Feature();
                featureN.setId(feature.getId());
                featureN.setGeometry(feature.getGeometry());
                var pros = feature.getProperties();
                for (var item in pros) {
                    featureN.set(item, pros[item])
                }
                vectorSource.addFeature(featureN);
                // console.log(featureN)
            }
            map.addLayer(vectorLayer);
        })

3、Draw绘图控件（以点的绘制为例）

（1）定义一个draw控件，声明type、style等属性

var pointSource = new ol.source.Vector(); //创建矢量图层
var draw = new ol.interaction.Draw({
            type: 'Point',                  //类型为point
            style: new ol.style.Style({    
                image: new ol.style.Circle({   //样式为image
                    radius: 15,                //半径
                    fill: new ol.style.Fill({  //内部填充颜色
                        color: [0, 0, 255, 1]   
                    }),
                    radius: 5,
                    stroke: new ol.style.Stroke({       //边框线
                        color: [0, 255, 255, 1],        //边框线颜色 
                        width: 1                //线宽度
                    })
                })
            }),      

（2）添加开始和结束事件

draw.on("drawstart", function (e) {
            console.log("绘制开始了")
        })
        draw.on("drawend", function (e) {
            console.log("绘制结束了")
        })

（3）设置点击button激活绘制工具

①添加按钮

<input type="button" value="点击开始绘制" onclick="active()"> //添加button，设置事件函数为active

②设置事件函数

        draw.on("drawstart", function (e) {
            console.log("绘制开始了")
        })
        draw.on("drawend", function (e) {
            draw.setActive(false)
            console.log("绘制结束了")
        })
        function active(){                //点击开始激活绘制，结束绘制后取消
            draw.setActive(true)
        }
        draw.setActive(false)       //设置初始状态为不激活

4、Modify修改要素控件

 定义修改要素控件

var modify = new ol.Interaction.Modify({
    source:layer.getSource()
})
modify.setActive(false);   //设置初始状态为不激活

5、Extent范围控件（在地图上绘制范围 https://openlayers.org/en/latest/examples/extent interaction.html）

 var extent = new ol.interaction.Extent();

6、Snap捕捉控件

        var snap = new ol.interaction.Snap({   
            source:source,     //捕捉哪一个图层
            pixelTolerance:0,     //捕捉容差
            vertex:false           //是否自动寻找顶点
        })

7、Translate移动要素控件

  var translate = new ol.interaction.Translate({
            source: source
        })

8、Select选择要素控件

选择要素：https://openlayers.org/en/latest/examples/select-features.html?q=select

扩展：框选要素：https://openlayers.org/en/latest/examples/box-selection.html?q=select

扩展：矢量切片选择：https://openlayers.org/en/latest/examples/vector-tile-selection.html?q=select

var select = new ol.interaction.Select({
            layers:[layer], //选择图层
            multi:true,       //是否可以多选
            hitTolerance:1000,    //选择容差
            condition: ol.events.condition.altKeyOnly    //选择方法（单击选择or其他）
            // condition: ol.events.condition.altShiftKeysOnly
            // condition: ol.events.condition.pointerMove
            // condition: ol.events.condition.click
        })