<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style id="owaParaStyle" type="text/css">P {margin-top:0;margin-bottom:0;}</style>
</head>
<body ocsi="0" fpstyle="1">
<div style="direction: ltr;font-family: Tahoma;color: #000000;font-size: 10pt;"><br>
<div><font size="2" color="black" face="Tahoma"><span style="font-size: 10pt;" dir="ltr">Hi All,
<br>
<br>
I am working with openlayers , mapserver, postgis. <br>
<br>
I have google map as a base map and overlayed few point layers. Now, i want to do filtering with respect to the path that's drew on the map. For this path , i am using draw feature with OpenLayers.Handler.Path. Upto here it is working fine. I can draw a line.
Now using the line geometry , i am giving a spatial filter DWITHIN with a distance of 2000 and also mentioned distanceUnits as 'm'. After i draw a line , the spatial filter for DWITHIN gets activated and the layer to be filtered is completely disappearing.
Now what i found is, it is throwing a WFS <font color="red">exception </font>as below -<br>
<br>
<font color="red">msWFSGetFeature(): WFS server error. Invalid or Unsupported FILTER in GetFeature :</font><br>
<font color="red">(&lt;ogc:Filter xmlns:ogc=&quot;http://www.opengis.net/ogc&quot;&gt;&lt;ogc:And&gt;&lt;ogc:DWithin&gt;&lt;ogc:PropertyName&gt;the_geom&lt;/ogc:PropertyName&gt;&lt;gml:MultiLineString xmlns:gml=&quot;http://www.opengis.net/gml&quot; srsName=&quot;EPSG:900913&quot;&gt;&lt;gml:lineStringMember&gt;&lt;gml:LineString&gt;&lt;gml:coordinates
decimal=&quot;.&quot; cs=&quot;,&quot; ts=&quot; &quot;&gt;-79.205932617188,32.309033345029 -79.458618164063,32.267239420261 -79.851379394531,32.144067753448 -78.255615234375,33.130344611623&lt;/gml:coordinates&gt;&lt;/gml:LineString&gt;&lt;/gml:lineStringMember&gt;&lt;/gml:MultiLineString&gt;&lt;ogc:Distance
units=&quot;m&quot;&gt;200000&lt;/ogc:Distance&gt;&lt;/ogc:DWithin&gt;&lt;ogc:BBOX&gt;&lt;ogc:PropertyName&gt;the_geom&lt;/ogc:PropertyName&gt;&lt;gml:Box xmlns:gml=&quot;http://www.opengis.net/gml&quot; srsName=&quot;EPSG:4326&quot;&gt;&lt;gml:coordinates
decimal=&quot;.&quot; cs=&quot;,&quot; ts=&quot; &quot;&gt;-84.100341796875,29.910254</font><br>
<font color="red"> </font><br>
<font color="red"> 244941 -73.114013671875,34.556260876457&lt;/gml:coordinates&gt;&lt;/gml:Box&gt;&lt;/ogc:BBOX&gt;&lt;/ogc:And&gt;&lt;/ogc:Filter&gt;</font><br>
<br>
And then I checked with get Capabilities , It is spatial filter DWITHIN capable. After that I checked by copying my
<font color="blue">WFS layer url</font> along with filter properties as below -<br>
<br>
<font color="blue">http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/openlayers-2.10/examples/us1gc09m-addline.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=us1gc09m&Filter=%3CFilter%3E%3CDWithin%3E%3CPropertyName%3Ethe_geom%3C/PropertyName%3E%3Cgml:Point%3E%3Cgml:coordinates%3E-80.22217%2031.07991%3C/gml:coordinates%3E%3C/gml:Point%3E%3CDistance%20units=%27m%27%3E100%3C/Distance%3E%3C/DWithin%3E%3C/Filter%3E</font><br>
<br>
into a browser. With this, It works well. No exception is thrown and the query is done properly. So, now, i do not understand where is the problem lies.
<br>
<br>
Can any one tell me how to solve this. How to do Spatial filter DWITHIN. And is my approach right?<br>
Below is my<font color="maroon"> JS code</font> ---<br>
<br>
<font color="maroon">var map;</font><font color="maroon"><br>
var spatialfilter;</font><font color="maroon"><br>
</font><font color="maroon"><br>
function init() {</font><font color="maroon"><br>
map = new OpenLayers.Map("map");</font><font color="maroon"><br>
</font><font color="maroon"><br>
//GOOGLE MAP</font><font color="maroon"><br>
var base = new OpenLayers.Layer.Google("Google Hybrid", {'type': G_HYBRID_MAP});
</font><font color="maroon"><br>
map.addLayer(base); </font><font color="maroon"><br>
//CREATE WMS LAYER</font><font color="maroon"><br>
var wms = new OpenLayers.Layer.WMS("wms", "http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/openlayers-2.10/examples/xyz.map",</font><font color="maroon"><br>
{layers: 'xyz'}, {isBaseLayer: false, visibility: false, opacity: 0.5, singleTile: true});
</font><font color="maroon"><br>
map.addLayer(wms);</font><font color="maroon"><br>
</font><font color="maroon"><br>
//VECTOR LAYER FOR PANEL</font><font color="maroon"><br>
var vlayer = new OpenLayers.Layer.Vector("vlayer");</font><font color="maroon"><br>
map.addLayer(vlayer);</font><font color="maroon"><br>
</font><font color="maroon"><br>
</font><font color="maroon"><br>
// CREATE WFSLAYERS</font><font color="maroon"><br>
</font><font color="maroon"><br>
//style map for points</font><font color="maroon"><br>
var styleMap = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({fillColor: "CYAN", fillOpacity: 1, strokeColor: "black"},</font><font color="maroon"><br>
OpenLayers.Feature.Vector.style["default"]));</font><font color="maroon"><br>
</font><font color="maroon"><br>
// mock up a protocol for synchronous and successful commits</font><font color="maroon"><br>
var wfs_protocol = new OpenLayers.Protocol.WFS({url:"http://localhost/cgi-bin/mapserv.exe?map=C:/ms4w/apps/openlayers-2.10/examples/xyz.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=xyz",
</font><font color="maroon"><br>
featureType: "xyz", </font><font color="maroon"><br>
srsName: "EPSG:900913"});
</font><font color="maroon"><br>
</font><font color="maroon"><br>
var wfslayer = new OpenLayers.Layer.Vector("WFS", {styleMap: styleMap,</font><font color="maroon"><br>
strategies: [new OpenLayers.Strategy.BBOX()],</font><font color="maroon"><br>
protocol: wfs_protocol</font><font color="maroon"><br>
});</font><font color="maroon"><br>
</font><font color="maroon"><br>
map.addLayer(wfslayer);</font><font color="maroon"><br>
</font><font color="maroon"><br>
map.addControl(new OpenLayers.Control.MousePosition());</font><font color="maroon"><br>
map.addControl(new OpenLayers.Control.LayerSwitcher()); </font><font color="maroon"><br>
//MAP CONTROLS</font><font color="maroon"><br>
var defStyle = {strokeColor: "red", strokeOpacity: "0.7", strokeWidth: 1, fillColor: "red", pointRadius: 3, cursor: "pointer"};</font><font color="maroon"><br>
var sty = OpenLayers.Util.applyDefaults(defStyle, OpenLayers.Feature.Vector.style["default"]);</font><font color="maroon"><br>
</font><font color="maroon"><br>
</font><font color="maroon"><br>
var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {</font><font color="maroon"><br>
initialize: function(layer, options) {</font><font color="maroon"><br>
OpenLayers.Control.prototype.initialize.apply(this, [options]);</font><font color="maroon"><br>
this.layer = layer;</font><font color="maroon"><br>
this.handler = new OpenLayers.Handler.Feature(</font><font color="maroon"><br>
this, layer, {click: this.clickFeature}</font><font color="maroon"><br>
);</font><font color="maroon"><br>
},</font><font color="maroon"><br>
clickFeature: function(feature) {</font><font color="maroon"><br>
// if feature doesn't have a fid, destroy it</font><font color="maroon"><br>
if(feature.fid == undefined) {</font><font color="maroon"><br>
this.layer.destroyFeatures([feature]);</font><font color="maroon"><br>
} else {</font><font color="maroon"><br>
feature.state = OpenLayers.State.DELETE;</font><font color="maroon"><br>
this.layer.events.triggerEvent("afterfeaturemodified", {feature: feature});</font><font color="maroon"><br>
feature.renderIntent = "select";</font><font color="maroon"><br>
this.layer.drawFeature(feature);</font><font color="maroon"><br>
}</font><font color="maroon"><br>
},</font><font color="maroon"><br>
setMap: function(map) {</font><font color="maroon"><br>
this.handler.setMap(map);</font><font color="maroon"><br>
OpenLayers.Control.prototype.setMap.apply(this, arguments);</font><font color="maroon"><br>
},</font><font color="maroon"><br>
CLASS_NAME: "OpenLayers.Control.DeleteFeature"</font><font color="maroon"><br>
});</font><font color="maroon"><br>
</font><font color="maroon"><br>
</font><font color="maroon"><br>
</font><font color="maroon"><br>
var panel = new OpenLayers.Control.Panel(</font><font color="maroon"><br>
{'displayClass': 'customEditingToolbar'}</font><font color="maroon"><br>
);</font><font color="maroon"><br>
</font><font color="maroon"><br>
var navigate = new OpenLayers.Control.Navigation({</font><font color="maroon"><br>
title: "Pan Map"</font><font color="maroon"><br>
});</font><font color="maroon"><br>
</font><font color="maroon"><br>
var drawpath = new OpenLayers.Control.DrawFeature(</font><font color="maroon"><br>
vlayer, OpenLayers.Handler.Path,</font><font color="maroon"><br>
{</font><font color="maroon"><br>
title: "Draw Path",</font><font color="maroon"><br>
displayClass: "olControlDrawFeaturePath",</font><font color="maroon"><br>
multi: true</font><font color="maroon"><br>
}</font><font color="maroon"><br>
);</font><font color="maroon"><br>
</font><font color="maroon"><br>
var drawpoint = new OpenLayers.Control.DrawFeature(</font><font color="maroon"><br>
vlayer, OpenLayers.Handler.Point,</font><font color="maroon"><br>
{</font><font color="maroon"><br>
title: "Add Point",</font><font color="maroon"><br>
displayClass: "olControlDrawFeaturePoint",</font><font color="maroon"><br>
multi: true</font><font color="maroon"><br>
}</font><font color="maroon"><br>
); </font><font color="maroon"><br>
</font><font color="maroon"><br>
var box = new OpenLayers.Control.DrawFeature(vlayer,</font><font color="maroon"><br>
OpenLayers.Handler.RegularPolygon, {</font><font color="maroon"><br>
handlerOptions: {</font><font color="maroon"><br>
sides: 4,</font><font color="maroon"><br>
irregular: true</font><font color="maroon"><br>
} , </font><font color="maroon"><br>
title: "Box Feature Select",</font><font color="maroon"><br>
displayClass: "olControlDrawFeatureBox"});</font><font color="maroon"><br>
</font><font color="maroon"><br>
var edit = new OpenLayers.Control.ModifyFeature(vlayer, {</font><font color="maroon"><br>
title: "Modify Feature",</font><font color="maroon"><br>
displayClass: "olControlModifyFeature"</font><font color="maroon"><br>
});</font><font color="maroon"><br>
</font><font color="maroon"><br>
var del = new DeleteFeature(vlayer, {title: "Delete Feature"});</font><font color="maroon"><br>
</font><font color="maroon"><br>
panel.addControls([navigate,del, edit, box, drawpoint, drawpath]); </font>
<font color="maroon"><br>
</font><font color="maroon"><br>
panel.defaultControl = navigate;</font><font color="maroon"><br>
map.addControl(panel);</font><font color="maroon"><br>
panel.activate();</font><font color="maroon"><br>
map.zoomToMaxExtent();</font><font color="maroon"><br>
map.setCenter(new OpenLayers.LonLat(-82, 28),5);</font><font color="maroon"><br>
</font><font color="maroon"><br>
vlayer.events.on({</font><font color="maroon"><br>
beforefeatureadded: function(event) { //here also tried with featureadded</font><font color="maroon"><br>
var geometry = event.feature.geometry;</font><font color="maroon"><br>
alert(geometry);</font><font color="maroon"><br>
wfslayer.filter = new OpenLayers.Filter.Spatial({</font><font color="maroon"><br>
type: OpenLayers.Filter.Spatial.DWITHIN,</font><font color="maroon"><br>
property: "the_geom",</font><font color="maroon"><br>
value: event.feature.geometry, </font><font color="maroon"><br>
distance: 200000,</font><font color="maroon"><br>
distanceUnits: 'm'</font><font color="maroon"><br>
}); </font><font color="maroon"><br>
wfslayer.refresh({force: true});</font><font color="maroon"><br>
var style_green =</font><font color="maroon"><br>
{</font><font color="maroon"><br>
strokeColor: "#00FF00",</font><font color="maroon"><br>
strokeOpacity: 0.7,</font><font color="maroon"><br>
strokeWidth: 4,</font><font color="maroon"><br>
graphicName: 'square',</font><font color="maroon"><br>
fillColor: '#FF0000',</font><font color="maroon"><br>
pointRadius: 5</font><font color="maroon"><br>
};</font><font color="maroon"><br>
vlayer.drawFeature(event.feature, style_green);</font><font color="maroon"><br>
alert(wfslayer.filter.evaluate(event.feature));</font><font color="maroon"><br>
return false;</font><font color="maroon"><br>
}</font><font color="maroon"><br>
});</font><font color="maroon"><br>
</font><font color="maroon"><br>
}</font></span></font>
<div style="font-family: Tahoma; font-size: 13px;">With Regards,<br>
Neelima Emmani<br>
</div>
</div>
</div>
</body>
</html>