概述：
一直在寻求openlayers中wfs加载和属性查询的相关操作，功夫不负有心人，蓦然回首，那人却在灯火阑珊处，找到了这篇博文：/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: "",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="width: 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 parison({type : parison.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="/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 { width: 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: "",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 parison({type : parison.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="width: 80px;"/><button id="query">属性查询</button><button id="boxQuery">空间查询</button></div><div id="map"></div></body></html>
![[推荐]中国达人秀：刘伟的1500字作文](https://1500zi.500zi.com/uploadfile/img/2024/08/28/d8eef0d8c8c197a59e7d5cc3ca1e9f0f.jpg)
