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

概述:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(52):使用TweenLite

TweenLite是第三方出品的专用于各种缓动动画的类库,其性能据说已经超过了Adobe官方的Tween. 从网上找到了一篇中文的说明文档:http://fil...

2085
来自专栏数据结构与算法

1020 孪生蜘蛛

1020 孪生蜘蛛 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 在G城保卫...

3225
来自专栏五毛程序员

五毛的cocos2d-x学习笔记08-动画

1965
来自专栏向治洪

android 自定义相机

老规矩,先上一下项目地址:GitHub:https://github.com/xiangzhihong/CameraDemo 方式: 调用Camera AP...

1K6
来自专栏菩提树下的杨过

ExtJs+WCF+LINQ实现分页Grid

上篇文章《用ExtJs+Linq+Wcf打造简单grid 》,这个网格控件不带分页,本文在上文的基础上添加分页功能,文中会着重介绍如何在用LINQ返回分页数据,...

3607
来自专栏菩提树下的杨过

as3.0中如何阻止事件冒泡?

as3.0中的事件冒泡机制有时候会很烦人,比如一个Sprite(方便下文描述就命名为Container吧)把另一外Sprite(称为Child吧)做为子元素套进...

2376
来自专栏菩提树下的杨过

Flash在线拍摄用户头象

很多网站在上传用户头象时,除了传统方式上传外,都支持在线摄像头拍照并做简单编辑,完成之后再将图象数据提交到服务端(比如ASP.Net),这几天正好需要这个功能,...

3428
来自专栏游戏杂谈

基于SOUI开发一个简单的小工具

Duilib 很久不维护了,而很多不同的分支,似乎都不太维护。微信 Windows 的版本是基于 Duilib 进行开发的,说明应该还是很广泛的。

4403
来自专栏Android开发经验

Volley从源码梳理主要工作流程简记

重点来了。 这里开启了一个缓存调度线程CacheDispatcher,一个网络请求调度线程NetworkDispatcher。

762
来自专栏hotqin888的专栏

MeritMS+jQuery.Gantt价值管理系统增加项目进度展示

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2991

扫码关注云+社区

领取腾讯云代金券