OpenLayers 框选图层交互 从图层服务器读取数据

 function initEditToolBar() {
   // style the sketch fancy
     var sketchSymbolizers = {
         “Point”: {
             pointRadius: 4,
             graphicName: “circle”,
             fillColor: “green”,
             fillOpacity: 1,
             strokeWidth: 1,
             strokeOpacity: 1,
             strokeColor: “#333333”
         },
         “Line”: {
             strokeWidth: 2,
             strokeOpacity: 1,
             strokeColor: “red”
                     //strokeDashstyle: “dash”
         },
         “Polygon”: {
             strokeWidth: 2,
             strokeOpacity: 1,
             strokeColor: “blue”,
             fillColor: “orange”,
             strokeDashstyle: “dash”,
             fillOpacity: 0.3
         }
     };
     var style = new OpenLayers.Style();
     style.addRules([
         new OpenLayers.Rule({
             symbolizer: sketchSymbolizers
         })
     ]);
     var styleMap = new OpenLayers.StyleMap({
         “default”: style
     });
   
     // allow testing of specific renderers via “?renderer=Canvas”, etc
     var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
     renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
     var panel = new OpenLayers.Control.Panel(
             {
                 //        ‘displayClass’: ‘customEditingToolbar’
             }
     );
     var polygonSelect = new OpenLayers.Control.DrawFeature(
             vectorLayer, OpenLayers.Handler.Polygon,
             {
                 handlerOptions:
                         {
                             layerOptions: {
                                 renderers: renderer,
                                 styleMap: styleMap
                             }
                         },
                 title: “多边形选择”,
                 type: 0,
                 //            displayClass: “olControlDrawFeaturePolygon”,
                 multi: false
             }
     );
     var circle = new OpenLayers.Control.DrawFeature(vectorLayer,
             OpenLayers.Handler.RegularPolygon,
             {
                 handlerOptions:
                         {
                             sides: 40,
                             //                persist: true,
                             layerOptions: {
                                 renderers: renderer,
                                 styleMap: styleMap
                             }
                         },
                 title: “画圆”,
                 type: 5,
                 //            displayClass: “olControlDrawFeatureCircle”,
                 multi: true
             });
     var square = new OpenLayers.Control.DrawFeature(vectorLayer,
             OpenLayers.Handler.RegularPolygon, {
         handlerOptions: {
             sides: 4,
             irregular: true,
             layerOptions: {
                 renderers: renderer,
                 styleMap: styleMap
             }
         },
         title: “画方形”,
         type: 6,
         //            displayClass: “olControlDrawFeatureRectangle”,
         multi: false
     });
   
     var navigate = new OpenLayers.Control.Navigation({
         title: “地图漫游”,
         type: 0,
         dragPanOptions: {
             enableKinetic: true
         }
     });
     
     //    drawPoint.events.on({
     //        “featureadded”: addPointInfo
     //    });
     //
     //    drawPolygon.events.on({
     //        “featureadded”: drawCompleted
     //    });
     polygonSelect.events.on({
         “featureadded”: drawPolyCompleted
     });
     square.events.on({
         “featureadded”: drawCompleted
     });
     circle.events.on({
         “featureadded”: drawCompleted
     });
 
   
     toolbarControls = [polygonSelect,  circle, square];
     panel.addControls(toolbarControls);  
     panel.defaultControl = navigate;
     map.addControl(panel);
 
 }
function drawPolyCompleted(drawGeometryArgs) {
     //enablePan();
     drawCompleted(drawGeometryArgs);
 }
//处理绘制完成后的信息
function drawCompleted(drawGeometryArgs) {
    style = {
        strokeColor: “red”,
        strokeWidth: 1,
        pointerEvents: “visiblePainted”,
        fillColor: “green”,
        fillOpacity: 0.5
    };
    var feature = new OpenLayers.Feature.Vector();
    feature.geometry = drawGeometryArgs.feature.geometry,
            feature.style = style;

    intersectsQuery(feature, true);
}

//空间相交查询
function intersectsQuery(inputFeature, showInfo) {

    var filter = new OpenLayers.Filter.Spatial({
        type: OpenLayers.Filter.Spatial.INTERSECTS,//表示相交
        value: inputFeature.geometry,
        projection: “EPSG:4326”
    });
    

    var wfsProtocol = new OpenLayers.Protocol.WFS({
        url: “http://xx.xx.xx.xx/geoserver/wfs“,
        featureType: “shengchanqu”,
        featureNS: “http://www.xx.com/xx”,
        featurePrefix: “zhaoyuan”,
        srsName: “EPSG:4326”,
        geometryName: “the_geom”,
        version: “1.1.0”
    })

    var response = wfsProtocol.read({
        filter: filter,
        callback: function(req) {
            vectorLayer.addFeatures(inputFeature);
            vectorLayer.addFeatures(req.features);
            var count = req.features.length;
            var area = 0;
            var table = “<div>”;
            var idStr = “\””;

            var bufferHead = [“<table id=’table-properties’>”];
            bufferHead.push(“<tr>”);
            bufferHead.push(“<td width=’100′>序号</td><td width=’100′>水体类型</td><td width=’100′>面积(亩)</td>”);
            bufferHead.push(“</tr>”);

            for (i = 0; i < count; i++) {

                var data = req.features[i].data;
               alert(“ID:”+data.fid);

            }
            var buffer = [“<table id=’table-properties’>”];
          

        }
    });

}

转载自:https://blog.csdn.net/u013925989/article/details/46877831

You may also like...