openlayers實現wfs屬性查詢和空間查詢，openlayerswfs
概述：
一直在尋求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="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 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 { 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: "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="width: 80px;"/> <button id="query">屬性查詢</button> <button id="boxQuery">空間查詢</button></div><div id="map"></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
