Openlayers-OpenLayers中基于Filter的WFS查询

by · 2019-04-02

打算实现的功能：基于OpenLayers实现对地图中城市POI模糊查询，并且能提 供基于位置的查询（GIS中就是基于圆的查询，通俗的说就是当确定用户位置后，可以查询用户周边一定范围内的POI）和基于多边形的查询（用户自己画出多 边形，实现在多边形范围内的POI查询），设定的界面如下图所示

1.      界面实现

页面的body主体实现如下：

  

  1.  <body onload=“init()”>      
  2.        
  3.      <div id=“searchDiv” style=“position:absolute;top:50px;left:80px;width:300px;height:100px;z-index:99999;border: 1px solid #ccc; padding: 1em;”>  
  4.         <ul id=“controls”>         
  5.         <li>  
  6.         <label for=“pointToggle”>关键字:</label>  
  7.         <input name=“searchkey” id=“searchkey”  type=“text”>             
  8.         <input name=“type” value=“搜索” id=“polygonToggle” onclick=“search()” type=“button”>  
  9.     </li>  
  10.     <li>  
  11.         <input name=“type” value=“point” id=“free” checked=“checked” type=“radio” onclick=“setfree();”>  
  12.         <label for=“pointToggle”>不限</label>                
  13.     </li>           
  14.     <li>  
  15.         <input name=“type” value=“point” id=“nearbySearch” onclick=“drawCircle();” type=“radio”>  
  16.         <label for=“nearbySearch”>周边搜索</label>    
  17.         <select id=“radius” onchange=“setSize(parseFloat(this.value))” style=“width:100px” >  
  18.             <option value=“0.01000”>1000</option>  
  19.             <option value=“0.02000”>2000</option>  
  20.             <option value=“0.03000”>3000</option>  
  21.         </select>  
  22.            <label for=“pointToggle”>以内</label>     
  23.     </li>   
  24.     <li>  
  25.         <input name=“type” value=“polygon” id=“polygonSearch” onclick=“drawPolyon();” type=“radio”>  
  26.         <label for=“polygonSearch”>多边形搜索</label>  
  27.     </li>      
  28. </ul>       
  29.      </div>         
  30.     <div id=“directionDiv” style=“position:absolute;top:200px;left:80px;width:300px;z-index:99999;border: 1px solid #ccc; padding: 1em;”>      
  31.      <table>  
  32.      <tr><td> 起点:</td><td ><input id=“start” type=“text” ></input><input id=“starthidden” type=“text” style=“display:none”></input></td><td rowspan=“2” > <input id=“direction”  style=“width:80px;height:40px” type=“button” value=“搜索路径” onclick=“direction()” ></input></tr>  
  33.      <tr><td> 终点:</td><td><input id=“end”  type=“text” ></input><input id=“endhidden” type=“text” style=“display:none”></input></td></tr>  
  34.        
  35.      </table>  
  36.      </div>   
  37.            <div id=“map”  class=“smallmap”>      
  38.       </div>  
  39.      </body>  

 

2.      周边检索时画圆和画多边形方法方法的实现

  1. /**  
  2.  * 画圆和画多边形方法实现  
  3.  */  
  4. var drawPolygnControl;  
  5. var polyOptions;  
  6. function drawCircle() {  
  7.     //drawPolygnControl.deactivate();  
  8.     //删除之前画的圆或多边形  
  9.     setfree();  
  10.     //if(markslayer!=null)  
  11.     //markslayer.removeAllFeatures();  
  12.     if (document.getElementById(“nearbySearch”).checked) {  
  13.         //polyOptions = {sides: 4};  
  14.         drawPolygnControl = new OpenLayers.Control.DrawFeature(polygonLayer,  
  15.                 OpenLayers.Handler.RegularPolygon, {  
  16.                     handlerOptions : polyOptions  
  17.                 });  
  18.   
  19.         setOptions({  
  20.             sides : parseInt(“40”)  
  21.         });  
  22.         setSize(parseFloat(“0.01000”));  
  23.   
  24.         map.addControl(drawPolygnControl);  
  25.   
  26.         drawPolygnControl.activate();  
  27.     } else {  
  28.         //drawControls.deactivate();  
  29.         // marks.clearMarkers();  
  30.         // polygonLayer.removeAllFeatures();  
  31.         //drawPolygnControl.deactivate();  
  32.         //ap.removeControl(drawPolygnControl);  
  33.         //alert(“操你妹的”);  
  34.         setfree();  
  35.     }  
  36. }  
  37. function drawPolyon() {  
  38.     //click.deactivate();  
  39.     //polygonLayer.removeAllFeatures();  
  40.     setfree();  
  41.     //if(markslayer!=null)  
  42.     //markslayer.removeAllFeatures();  
  43.     if (document.getElementById(“polygonSearch”).checked) {  
  44.         drawPolygnControl = new OpenLayers.Control.DrawFeature(polygonLayer,  
  45.                 OpenLayers.Handler.Polygon);  
  46.         map.addControl(drawPolygnControl);  
  47.   
  48.         drawPolygnControl.activate();  
  49.     } else {  
  50.         //drawControls.deactivate();  
  51.         // marks.clearMarkers();  
  52.         // polygonLayer.removeAllFeatures();  
  53.         //drawPolygnControl.deactivate();  
  54.         //ap.removeControl(drawPolygnControl);  
  55.         setfree();  
  56.     }  
  57. }  
  58.   
  59. function setfree() {  
  60.     if (drawPolygnControl instanceof OpenLayers.Control.DrawFeature  
  61.             && drawPolygnControl != null) {  
  62.         drawPolygnControl.deactivate();  
  63.         map.removeControl(drawPolygnControl);  
  64.     }  
  65.     click.deactivate();  
  66.     if (polygonLayer != null) {  
  67.         polygonLayer.removeAllFeatures();  
  68.     }  
  69.   
  70.     if (markslayer != null)  
  71.         markslayer.removeAllFeatures();  
  72.   
  73. }  
  74.   
  75. function setOptions(options) {  
  76.     drawPolygnControl.handler.setOptions(options);  
  77. }  
  78. function setSize(fraction) {  
  79.     var radius = fraction * map.getExtent().getHeight();  
  80.     drawPolygnControl.handler.setOptions({  
  81.         radius : radius,  
  82.         angle : 0  
  83.     });  
  84. }  

在上述代码中drawCircle函数中有一个polyOptions，需要在init()函数中对其进行如下设置：

polyOptions = {sides: 4};

3.      检索功能的实现，这里把周边位置检索和多边形检索统称为基于范围的查找，把界面中直接基于关键字的查找称为普通查找。这里普通查找用一种方法实现，基于范围的查找用一种方法实现。基于范围的查找中无论是基于圆的查找还是基于多边形的查找其实现原理都是先基于关键字查找，然后再查找的结果再跟圆或者多边形进行叠加，如果相交则该POI点符合条件。

实现代码为：

  1. /** 
  2.  * POI检索服务 
  3.  * 支持普通检索，周边检索和多边形检索 
  4.  *  
  5.  */  
  6.   
  7. var geometry;  
  8. var markslayer;//存放选择出的POI  
  9. function search() {  
  10.     if (drawPolygnControl instanceof OpenLayers.Control.DrawFeature  
  11.             && drawPolygnControl != null) {  
  12.         drawPolygnControl.deactivate();  
  13.         map.removeControl(drawPolygnControl);  
  14.     }  
  15.     if (markslayer != null) {  
  16.         markslayer.removeAllFeatures();  
  17.         map.removeLayer(markslayer);  
  18.     }  
  19.   
  20.     var searchstr = document.getElementById(“searchkey”).value;  
  21.     if (searchstr == null || searchstr == “”) {  
  22.   
  23.         alert(“请输入搜索关键字！”);  
  24.         return;  
  25.     }  
  26.   
  27.     if (marks != null)  
  28.         marks.clearMarkers();  
  29.   
  30.     if (routeLayer != null)  
  31.         routeLayer.removeAllFeatures();  
  32.     if (stopLayer != null)  
  33.         stopLayer.removeAllFeatures();  
  34.   
  35.     //基于位置查找和基于多边形查找功能实现  
  36.     if (document.getElementById(“nearbySearch”).checked  
  37.             || document.getElementById(“polygonSearch”).checked) {  
  38.         geometry = polygonLayer.features[0].geometry;  
  39.         markslayer = new OpenLayers.Layer.Vector(“WFS”, {  
  40.             strategies : [ new OpenLayers.Strategy.BBOX() ],  
  41.             protocol : new OpenLayers.Protocol.WFS({  
  42.                 url : “http://192.168.1.50:8080/geoserver/wfs?”,  
  43.                 featureType : “res2_4m”,  
  44.                 featureNS : “http://www.cxzx.com”  
  45.             }),  
  46.             styleMap : new OpenLayers.StyleMap({  
  47.                 externalGraphic : ‘img/marker-target.png’,  
  48.                 graphicWidth : 20,  
  49.                 graphicHeight : 24,  
  50.                 graphicYOffset : -24,  
  51.             }),  
  52.             filter : new OpenLayers.Filter.Logical({  
  53.                 type : OpenLayers.Filter.Logical.AND,  
  54.                 filters : [ new OpenLayers.Filter.Comparison({  
  55.                     type : OpenLayers.Filter.Comparison.LIKE,  
  56.                     property : “NAME”,  
  57.                     value : “*” + searchstr + “*”  
  58.                 }), new OpenLayers.Filter.Spatial({  
  59.                     type : OpenLayers.Filter.Spatial.INTERSECTS,  
  60.                     value : geometry,//                   
  61.                     projection : ‘EPSG:4326’  
  62.                 }) ]  
  63.             })  
  64.         });  
  65.         map.addLayer(markslayer);  
  66.         addPop();  
  67.     }  
  68.     //普通检索功能实现  
  69.     else {  
  70.         markslayer = new OpenLayers.Layer.Vector(“WFS”, {  
  71.             strategies : [ new OpenLayers.Strategy.BBOX() ],  
  72.             protocol : new OpenLayers.Protocol.WFS({  
  73.                 url : “http://192.168.1.50:8080/geoserver/wfs?”,  
  74.                 featureType : “res2_4m”,  
  75.                 featureNS : “http://www.cxzx.com”  
  76.             }),  
  77.             styleMap : new OpenLayers.StyleMap({  
  78.                 externalGraphic : ‘img/marker-target.png’,  
  79.                 graphicWidth : 20,  
  80.                 graphicHeight : 24,  
  81.                 graphicYOffset : -24,  
  82.             }),//                       
  83.             filter : new OpenLayers.Filter.Comparison({  
  84.                 type : OpenLayers.Filter.Comparison.LIKE,  
  85.                 property : “NAME”,  
  86.                 value : “*” + searchstr + “*”  
  87.             })  
  88.         });  
  89.         map.addLayer(markslayer);  
  90.         addPop();  
  91.     }  
  92.   
  93. }//end function search  

上述代码中，featureType :“res2_4m”,为城市POI所在图层，featureNS :
“http://www.cxzx.com”为地图数据所在工作区的URI，如下图所示：


4.      实现的功能

普通查询中，输入“州”检索结果如下：


周边检索中，设定要用户所在位置和圆半径后，检索结果如下：


多边形检索中，画好多边形，设置好关键字后，检索结果如下：

转载自：https://blog.csdn.net/xiaohan2826/article/details/53859843

相关推荐

Tags:

You may also like...

公众号

微信群

人数过多只能拉人进群;

加我好友yu389741

微信小程序