openlayers实现wfs属性查询和空间查询

来源：互联网发布：ch341a编程器软件1.30 编辑：程序博客网时间：2024/05/17 02:11

概述：

一直在寻求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>

2 0