openlayers中interaction的select draw modify

教程目录

一、引言

gis中最基础的就是空间查询,鼠标点击事件获取要素,同时我们经常要对要素进行添加与修改。这些在之前的webgis开发中都要自己去实现,现在openlayer中已经用很多类封装实现了这些功能,如select draw modify,方便了我们快速开发关注业务方面的开发。

二、interaction中select选取feature

这个主要是用在鼠标点击地图获取矢量图层的feature,之前我们可能会用gisserver、geotool库、后台数据库sql空间查询,现在我们可以直接在前台进行查询,而且select返回一个回调函数直接获取feature,连获取函数代码都不用写了==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });

    var vectorSource = new ol.source.Vector({
        url:"json/a.geojson",
        format:new ol.format.GeoJSON()
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    function  styleFunction(feature,isSelect) {

        var _name="",
            _color="rgba(255, 255, 255, 0.8)";
        if(isSelect==true)
        {
             _name=feature.get("NAME");
             _color= "rgba(255, 0, 0, 0.8)";
        }
        _name=map.getView().getZoom()>4?_name:"";
        return  new ol.style.Style({
            fill: new ol.style.Fill({ //矢量图层填充颜色,以及透明度
                color:_color
            }),
            stroke: new ol.style.Stroke({ //边界样式
                color: '#319FD3',
                width: 1
            }),
            text: new ol.style.Text({ //文本样式
                text:_name,
                font: '12px Calibri,sans-serif',
                fill: new ol.style.Fill({
                    color: '#000'
                }),
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 3
                }),
                //textAlign:"left",
                offsetX:"0"
            })
        });
    }
    //select
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[vectorLayer],
        multi:true,
        style:function (feature) {
            return styleFunction(feature,true);
        }
    });
    select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];
        var geometry=feature.getGeometry();
        var attribute=  feature.getProperties();
        var temp=attribute["NAME"];
        temp=attribute.NAME;
        var coordinates=geometry.getCoordinates();
        var polygons=geometry.getPolygons();
        var polygon=geometry.getPolygon(0);


        alert(feature.get("NAME"));
    });
    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view:view,
        target: 'map'
    });
    map.addLayer(vectorLayer);
    map.addInteraction(select);

    
    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>

效果图如下:

此地图用的是geojson,下载地址为https://download.csdn.net/download/xcymorningsun/10648718

三、interaction中draw与modify修改feature

draw用来画要素,可以选点线面;使用select将要素选区中以后,然后使用modify修改要素,这个openlayer做得十分友好,使用也十分方便。

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>

</head>
<body>
<div id="map" style="width: 100%"></div>
<script>
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([110,39],"EPSG:4326","EPSG:3857"),
        zoom: 4
    });
    ////vector
    var vectorSource = new ol.source.Vector({
        features:[]
    });

    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
    });
    function  styleFunction(feature) {

        var _name=feature.get("NAME");
        _name=map.getView().getZoom()>4?_name:"";
        return  new ol.style.Style({
            fill: new ol.style.Fill({ //矢量图层填充颜色,以及透明度
                color:"red"
            }),
            stroke: new ol.style.Stroke({ //边界样式
                color: '#319FD3',
                width: 1
            })
        });
    }

    // map
    var map = new ol.Map({
        layers: [
            getTdtLayer("vec_w"),
            getTdtLayer("cva_w")
        ],
        view:view,
        target: 'map'
    });
    map.addLayer(vectorLayer);
    ////select
    var select=new ol.interaction.Select();
    map.addInteraction(select);
    ////draw
    var draw = new ol.interaction.Draw({
        source: vectorSource,
        stopClick:true,
        freehand:false,
        type: "Polygon"
    });
    map.addInteraction(draw);
    draw.setActive(true);
    draw.on("drawend",function (e) {
       draw.setActive(false);
       var feature=e.feature;
       var wktformat= new ol.format.WKT();
       alert(wktformat.writeGeometry(feature.getGeometry()));

    });
    ////modify
    var modify = new ol.interaction.Modify({
        features: select.getFeatures()
    });
    map.addInteraction(modify);
    modify.on("modifyend",function (e) {
        var features=e.features.array_;
        var wktformat= new ol.format.WKT();
        alert(wktformat.writeGeometry(features[0].getGeometry()));
    });
    
    function getTdtLayer(lyr) {
        var urls=[];
        for(var i=0;i<8;i++)
        {
            urls.push( "http://t"+i+".tianditu.com/DataServer?T=" + lyr + "&X={x}&Y={y}&L={z}")
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>

效果图:

四、总结

  • select用于鼠标点击选取要素;
  • draw、select、modify用于添加修改要素;

转载自:https://blog.csdn.net/xcymorningsun/article/details/82453944

You may also like...

发表评论

您的电子邮箱地址不会被公开。

CAPTCHAis initialing...