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'>"];

}

});

}