openlayer的要素获取

/*
* 要素查询完成
*/

/*
* Green style
*/

var style_green = {
strokeColor : “#00FF00”,
strokeWidth : 3,
strokeDashstyle : “dashdot”,
pointRadius : 6,
pointerEvents : “visiblePainted”
};
var myStyles = new OpenLayers.StyleMap({
“default” : new OpenLayers.Style({
pointRadius : “${type}”, // sized according
// to type attribute
fillColor : “#ffcc66”,
strokeColor : “#ff9933”,
strokeWidth : 2,
graphicZIndex : 1
}),
“select” : new OpenLayers.Style({
fillColor : “#66ccff”,
strokeColor : “#3399ff”,
graphicZIndex : 2
})
});

function makeXML(infoName) {
XML = ‘<?xml version=”1.0″ encoding=”UTF-8″ ?>’ + “\n”;
XML += ‘<wfs:GetFeature service=”WFS” version=”1.0.0″‘ + “\n”;
XML += ‘ outputFormat=”GML2″‘ + “\n”;
XML += ‘ xmlns:huangc=”http://localhost:8080/geoserver”‘ + “\n”;
XML += ‘ xmlns:wfs=”http://www.opengis.net/wfs”‘ + “\n”;
XML += ‘ xmlns:ogc=”http://www.opengis.net/ogc”‘ + “\n”;
XML += ‘ xmlns:gml=”http://www.opengis.net/gml”‘ + “\n”;
XML += ‘ xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”‘ + “\n”;
XML += ‘ xsi:schemaLocation=”http://www.opengis.net/wfs [url]http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd[/url]”‘
+ “\n”;
XML += ‘>’ + “\n”;
XML += ‘ <wfs:Query typeName=”haha:yinhang” >’ + “\n”;
XML += ‘ <ogc:Filter>’ + “\n”;
XML += ‘ <ogc:PropertyIsLike wildCard=”*” singleChar=”#” escapeChar=”!”>’
+ “\n”;
XML += ‘ <ogc:PropertyName>NAME</ogc:PropertyName>’ + “\n”;
XML += ‘ <ogc:Literal>’ + “\n”;
XML += ‘*’ + infoName + ‘*’ + “\n”;
XML += ‘ </ogc:Literal>’ + “\n”;
XML += ‘ </ogc:PropertyIsLike>’ + “\n”;
XML += ‘ </ogc:Filter>’ + “\n”;
XML += ‘ </wfs:Query>’ + “\n”;
XML += ‘ <wfs:Query typeName=”haha:SDE_LRDL_500_1_SplitLine” >’ + “\n”;
XML += ‘ <ogc:Filter>’ + “\n”;
XML += ‘ <ogc:PropertyIsLike wildCard=”*” singleChar=”#” escapeChar=”!”>’
+ “\n”;
XML += ‘ <ogc:PropertyName>NAME</ogc:PropertyName>’ + “\n”;
XML += ‘ <ogc:Literal>’ + “\n”;
XML += ‘*’ + infoName + ‘*’ + “\n”;
XML += ‘ </ogc:Literal>’ + “\n”;
XML += ‘ </ogc:PropertyIsLike>’ + “\n”;
XML += ‘ </ogc:Filter>’ + “\n”;
XML += ‘ </wfs:Query>’ + “\n”;
XML += ‘ <wfs:Query typeName=”haha:sheshimian” >’ + “\n”;
XML += ‘ <ogc:Filter>’ + “\n”;
XML += ‘ <ogc:PropertyIsLike wildCard=”*” singleChar=”#” escapeChar=”!”>’
+ “\n”;
XML += ‘ <ogc:PropertyName>NAME</ogc:PropertyName>’ + “\n”;
XML += ‘ <ogc:Literal>’ + “\n”;
XML += ‘*’ + infoName + ‘*’ + “\n”;
XML += ‘ </ogc:Literal>’ + “\n”;
XML += ‘ </ogc:PropertyIsLike>’ + “\n”;
XML += ‘ </ogc:Filter>’ + “\n”;
XML += ‘ </wfs:Query>’ + “\n”;
XML += ‘ </wfs:GetFeature>’ + “\n”;

return XML;
}

function commithTxt(name) {
XML = makeXML(name);
var request = OpenLayers.Request.POST({// ajax请求获取数据源
url : “http://10.76.28.32:8080/geoserver/wfs”,
data : XML,
callback : showResponseq
});
}

function showResponseq(req) {
var g = new OpenLayers.Format.GML();

var features = g.read(req.responseText);
if (features != null) {
for (var feat in features) {
if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “MULTIPOLYGON”) {
map
.setCenter(
new OpenLayers.LonLat(
parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry
.getBounds().right)), 2);

map.panTo(new OpenLayers.LonLat(parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry.getBounds().right)));

} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “POINT”) {
var lon = features[feat].geometry.x;
var lat = features[feat].geometry.y;
map.setCenter(new OpenLayers.LonLat(parseFloat(lon),
parseFloat(lat)), 2);
map.panTo(new OpenLayers.LonLat(parseFloat(lon),
parseFloat(lat)));
} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “MULTILINESTRING”) {
map
.setCenter(
new OpenLayers.LonLat(
parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry
.getBounds().right)), 2);

map.panTo(new OpenLayers.LonLat(parseFloat(features[0].geometry
.getBounds().left),
parseFloat(features[0].geometry.getBounds().right)));
}
}

} else {
alert(‘–暂无数据–‘);
}
}
// we want opaque external graphics and non-opaque internal graphics
var layer_style = OpenLayers.Util.extend({},
OpenLayers.Feature.Vector.style[‘default’]);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1;
/*
* Blue style
*/
var style_blue = OpenLayers.Util.extend({}, layer_style);
style_blue.strokeColor = “blue”;
style_blue.fillColor = “blue”;
style_blue.graphicName = “star”;
style_blue.pointRadius = 10;
style_blue.strokeWidth = 3;
style_blue.rotation = 45;
style_blue.strokeLinecap = “butt”;
function drawsFeatures(features) {

var arr = new Array();
var html = “”;
var flag = 0;
// html += “<ul style = ‘text-decoration:underline’>”;
for (var feat in features) {
if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “POINT”) {
var lon = features[feat].geometry.x;
var lat = features[feat].geometry.y;
arr.push(features[feat].attributes[‘NAME’]);
var geo = new OpenLayers.Geometry.Point(lon, lat);// , {type : 5 +
features[feat] = new OpenLayers.Feature.Vector(geo, {
NAME : features[feat].attributes[‘NAME’]
}, style_blue);

// alert(features[feat].attributes[‘NAME’]);
// alert(features[feat].geometry);
flag = 3;
} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “MULTILINESTRING”) {

arr.push(features[feat].attributes[‘NAME’]);
flag = 1;

} else if (features[feat].geometry.toString().substring(0,
features[feat].geometry.toString().indexOf(‘(‘)) == “MULTIPOLYGON”) {
arr.push(features[feat].attributes[‘NAME’]);
flag = 2;
}
}
if (flag == 1) {
if (vectors != null) {
map.removeLayer(vectors);
}

vectors = new OpenLayers.Layer.Vector(“”, {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
hover : true,
onSelect : onFeatureSelect_line,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();

var newArray = [];
var provisionalTable = {};
html += “<ul style = ‘text-decoration:underline’>”;
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += “<li>”;
html += “<label style=’cursor:pointer;’ onclick=commithTxt(“
+ “‘” + item + “‘” + “);” + “>” + item + “</label>”;
provisionalTable[item] = true;
}
}
html += “</ul>”;
document.getElementById(‘output’).innerHTML = html;
} else if (flag == 2) {
if (vectors != null) {
map.removeLayer(vectors);
}
vectors = new OpenLayers.Layer.Vector(“”, {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
hover : true,
onSelect : onFeatureSelect,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();
var newArray = [];
var provisionalTable = {};
html += “<ul style = ‘text-decoration:underline’>”;
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += “<li>”;
html += “<label style=’cursor:pointer;’ onclick=commithTxt(“
+ “‘” + item + “‘” + “);” + “>” + item + “</label>”;
provisionalTable[item] = true;
}
}
html += “</ul>”;
document.getElementById(‘output’).innerHTML = html;
} else if (flag == 3) {
if (vectors != null) {
map.removeLayer(vectors);
}

vectors = new OpenLayers.Layer.Vector(“”, {
styleMap : myStyles
});
map.addLayer(vectors);
vectors.events.register(‘mousedown’, vectors, function(evt) {
// alert(‘polgon’);
// getMapDetail(id);
OpenLayers.Event.stop(evt);
});
vectors.addFeatures(features);
var select = new OpenLayers.Control.SelectFeature(vectors, {
multiple : true,
toggle : true,
box : false,

hover : true,
onSelect : onFeatureSelect_point,
onUnselect : onFeatureUnselect
});
map.addControl(select);
select.activate();
var newArray = [];
var provisionalTable = {};
html += “<ul style = ‘text-decoration:underline’>”;
for (var i = 0, item; (item = arr[i]) != null; i++) {
if (!provisionalTable[item]) {
// newArray.push(item);
html += “<li>”;
html += “<label style=’cursor:pointer;’ onclick=commithTxt(“
+ “‘” + item + “‘” + “);” + “>” + item + “</label>”;
provisionalTable[item] = true;
}
}
html += “</ul>”;
document.getElementById(‘output’).innerHTML = html;
}

}

function onFeatureSelect(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud(“chicken”, feature.geometry
.getBounds().getCenterLonLat(), null,

“<div style=’font-size:.8em’>名称: ” + feature.attributes[‘NAME’]
+ “<br />面积: ” + feature.geometry.getArea() + “</div>”,

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}

function onFeatureSelect_line(feature) {
// alert(‘zei’);
// alert(feature.attributes[‘NAME’]);
selectedFeature = feature;

popup = new OpenLayers.Popup.FramedCloud(“chicken”,

feature.geometry.getBounds().getCenterLonLat(),

null,

“<div style=’font-size:.8em’>名称: ” + feature.attributes[‘NAME’]
+ “<br />长度: ” + feature.geometry.getLength() + “</div>”,

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}
function onFeatureSelect_point(feature) {
selectedFeature = feature;
popup = new OpenLayers.Popup.FramedCloud(“chicken”, feature.geometry
.getBounds().getCenterLonLat(), null,

“<div style=’font-size:.8em’>名称: ” + feature.attributes[‘NAME’]
+ “<br /></div>”,// 面积: ” + feature.geometry.getArea() +
// “

null, true, onPopupClose);

feature.popup = popup;

map.addPopup(popup);

}
function onFeatureUnselect(feature) {

map.removePopup(feature.popup);

feature.popup.destroy();

feature.popup = null;

}
function onPopupClose(evt) {

selectControl.unselect(selectedFeature);

}

function showResponse(req) {
var g = new OpenLayers.Format.GML();

var features = g.read(req.responseText);

if (features != null && features != “”) {
drawsFeatures(features);
} else {
alert(‘暂时无数据’);
}

}

function showTxt(infoName) {
var info_Name = document.getElementById(‘infoName’);
XML = makeXML(info_Name.value);
var request = OpenLayers.Request.POST({// ajax请求获取数据源
url : “http://10.76.28.32:8080/geoserver/wfs”,
data : XML,
callback : showResponse
});

}
转载自：https://blog.csdn.net/bupingfan_ee/article/details/83874047