您的位置：首页 > 运维架构

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

2015-05-30 21:41 441 查看

概述：

一直在寻求openlayers中wfs加载和属性查询的相关操作，功夫不负有心人，蓦然回首，那人却在灯火阑珊处，找到了这篇博文：/article/1375239.html，试了下，在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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航