概述：
一直在寻求openlayers中wfs加载和属性查询的相关操作，功夫不负有心人，蓦然回首，那人却在灯火阑珊处，找到了这篇博文：http://blog.csdn.net/longshengguoji/article/details/39377931，试了下，在IE8中正常运行，但是在chrom中涉及到跨域的问题，待后期接解决吧。本文讲解如何通过wfs实现属性的查询与展示。
效果：
初始化状态
属性查询结果
空间查询结果
数据表：
关键代码：
添加wfs图层
wfs = new OpenLayers.Layer.Vector("wfs", {
strategies: [new OpenLayers.Strategy.Fixed()],
visibility:true,
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8081/geoserver/lzugis/wfs?",
featureType: "capital",
featurePrefix : "lzugis",
featureNS: "http://www.lzugis.com.cn",
srsName : "EPSG:4326",
geometryName:"the_geom"
})
});
map.addLayer(wfs);查询条件面板
<pre name="code" class="html"><div class="query-box">
<select id="field">
<option value="code">编码</option>
<option value="pinyin">拼音</option>
</select>
<input type="text" id="val" value="100032" style=" 80px;"/>
<button id="query">属性查询</button>
<button id="boxQuery">空间查询</button>
</div>
执行属性查询查询
$("#query").on("click",function(){
var field = $("#field").val();
var val = $("#val").val();
var filter = new OpenLayers.Filter.Comparison({
type : OpenLayers.Filter.Comparison.EQUAL_TO,
property : field,
value : val
});
console.log(wfs);
wfs.filter = filter;
wfs.refresh();
})
空间查询
var drawLayer = new OpenLayers.Layer.Vector("drawLayer",{
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#ff0000",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "#000000",
fillOpacity: 0.1
}})
});
map.addLayer(drawLayer);
var drawBox = new OpenLayers.Control.DrawFeature(drawLayer,
OpenLayers.Handler.RegularPolygon,{
handlerOptions: {
sides: 4,
irregular: true
}
}
);
map.addControl(drawBox);
drawBox.featureAdded = onEndDraw;
function onEndDraw(feature){
drawBox.deactivate();
console.info(feature);
var geometry = feature.geometry;
var filter = new OpenLayers.Filter.Spatial({
type : OpenLayers.Filter.Spatial.INTERSECTS,
value : geometry,
projection : 'EPSG:4326'
});
wfs.filter = filter;
wfs.refresh();
map.zoomToExtent(wfs.getDataExtent());
}
$("#boxQuery").on("click",function(){
drawLayer.removeAllFeatures();
wfs.filter = null;
wfs.refresh();
drawBox.activate();
});完整代码为：
<pre name="code" class="html"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>china EPSG:4326 image/png</title>
<link rel="stylesheet" type="text/css" href="http://localhost/olapi/theme/default/style.css"/>
<style type="text/css">
body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
body { border: 0px; margin: 0px; padding: 0px; }
#map { 100%; height: 100%; border: 0px; padding: 0px; }
.query-box{
position: absolute;
top: 15pt;
right: 15pt;
z-index:1001;
border: 1px solid #ff0000;
border-radius: 3px;
background: #f2f2f2;
padding: 5px 8px;
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
</style>
<script type="text/javascript" src="http://localhost/olapi/OpenLayers.js"></script>
<script type="text/javascript" src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
<script src="http://localhost/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
var map, wfs;
function init(){
var bounds = new OpenLayers.Bounds(
87.57582859314434, 19.969920291221204,
126.56713756740385, 45.693810203800794
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.1523098006807012,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map('map', options);
var tiled = new OpenLayers.Layer.WMS(
"province", "http://localhost:8081/geoserver/lzugis/wms",
{
"LAYERS": 'province',
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
map.addLayer(tiled);
map.addControl(new OpenLayers.Control.PanZoomBar({
position: new OpenLayers.Pixel(2, 15)
}));
map.addControl(new OpenLayers.Control.Navigation());
map.zoomToExtent(bounds);
wfs = new OpenLayers.Layer.Vector("wfs", {
strategies: [new OpenLayers.Strategy.Fixed()],
visibility:true,
protocol: new OpenLayers.Protocol.WFS({
url: "http://localhost:8081/geoserver/lzugis/wfs?",
featureType: "capital",
featurePrefix : "lzugis",
featureNS: "http://www.lzugis.com.cn",
srsName : "EPSG:4326",
geometryName:"the_geom"
})
});
map.addLayer(wfs);
var drawLayer = new OpenLayers.Layer.Vector("drawLayer",{
styleMap: new OpenLayers.StyleMap({'default':{
strokeColor: "#ff0000",
strokeOpacity: 1,
strokeWidth: 1,
fillColor: "#000000",
fillOpacity: 0.1
}})
});
map.addLayer(drawLayer);
var drawBox = new OpenLayers.Control.DrawFeature(drawLayer,
OpenLayers.Handler.RegularPolygon,{
handlerOptions: {
sides: 4,
irregular: true
}
}
);
map.addControl(drawBox);
drawBox.featureAdded = onEndDraw;
function onEndDraw(feature){
drawBox.deactivate();
console.info(feature);
var geometry = feature.geometry;
var filter = new OpenLayers.Filter.Spatial({
type : OpenLayers.Filter.Spatial.INTERSECTS,
value : geometry,
projection : 'EPSG:4326'
});
wfs.filter = filter;
wfs.refresh();
map.zoomToExtent(wfs.getDataExtent());
}
$("#boxQuery").on("click",function(){
drawLayer.removeAllFeatures();
wfs.filter = null;
wfs.refresh();
drawBox.activate();
});
$("#query").on("click",function(){
var field = $("#field").val();
var val = $("#val").val();
var filter = new OpenLayers.Filter.Comparison({
type : OpenLayers.Filter.Comparison.EQUAL_TO,
property : field,
value : val
});
wfs.filter = filter;
wfs.refresh();
// map.zoomToExtent(wfs.getDataExtent());
});
}
</script>
</head>
<body onLoad="init()">
<div class="query-box">
<select id="field">
<option value="code">编码</option>
<option value="pinyin">拼音</option>
</select>
<input type="text" id="val" value="100032" style=" 80px;"/>
<button id="query">属性查询</button>
<button id="boxQuery">空间查询</button>
</div>
<div id="map"></div>
</body>
</html>
