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>

openlayers实现wfs属性查询和空间查询相关推荐

ArcGIS Engine属性查询和空间查询联合查询要素
ArcGIS Engine属性查询和空间查询联合查询要素项目中遇到了需要通过属性查询和空间查询两种查询方式联合,查找要素,主要流程是先通过空间查询,选择到符合条件的要素,添加到选择集中,然后再通过属 ...
[AE] ArcGIS Engine - 属性查询与空间查询 - QueryFilter|SpatialFilter
文章目录 QueryFilter属性查询 SpatialFilter空间查询 Cursor游标 QueryFilter属性查询得到将要查询的图层 IFeatureLayer pFeatureLaye ...
Openlayers5 + Geoserver 实现wfs的属性查询与空间查询
简介:使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询参考官方例子:https://openlayers.org/en/latest/examples/vector-w ...
ArcEngine简单教程——要素的属性查询、空间查询
其他教程请见: ArcEngine简单教程汇总目录 ArcEngine简单教程汇总 1 目的 2 概要空间查询属性查询 3 关键代码 4小结 1 目的实现简单的地 ...
oracle数据类型查询,Oracle 空间查询, 数据类型为 sdo_geometry
数据:通过arcgis直连数据库,导入测试数据,导入时数据类型选择SDO_GEOMETRY. 测试数据包含点线面,点数据MAP_USER_POINT, 线数据MAP_USER_LINE,面数据MAP_ ...
mysql 空间查询_MYSQL空间查询函数
数据写入插入时使用ST_GeomFromText,也可使用GeomFromText INSERT INTOt_customers ( lon_lat_point )VALUES( GeomFromT ...
「Arcgis的」空间查询和属性查询
「Arcgis的」空间查询和属性查询概述目录「Arcgis的」空间查询和属性查询概述流程 FindTask QueryTask IdentifyTask 在ArcGIS API中查询功能是非 ...
ArcGIS API For JS之空间查询和属性查询
说实在真是无聊,虽然很想干一些东西但是悲哀的是没有平台,前几天看到一个关于GIS开发的文章,这一行真的很容易被人取代,知识更新太快了,GIS并不像其他前端开发,不太注重用户体验,因为大多都是政府部分的 ...
OpenLayers 3+Geoserver+PostGIS实现点击查询
WebGIS开发中,点击查询是最经常使用的一种查询方式,在ArcGIS api 中.这样的查询叫IdentifyTask,主要作用是前台提交參数.交ArcServer查询分析返回. 本文从开源框架的角 ...

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

openlayers实现wfs属性查询和空间查询相关推荐

最新文章

热门文章