I've a small GIS app, displaying stations on a map. Very simple. At start, none of the stations are displayed, even if its layer is enabled. What I want, when I click on a div, is to display one the station according to the OpenLayers.Filter.Logical method. I plan to use jQuery to do that. Problem : I don't master jQuery enough. I'll provide you some codes I made. If you need mor to know, tell me. My HTML code (extract)
</head>
<body onload="init()">
<div id='banner' style='width: 51%; height: 50px; background-color: #A52A2A; border-top-left-radius: 9px; border-top-right-radius: 9px; text-align: center; font-size: 25px; '>
<div id="text" style='color: white; font-family: tahoma; line-height:50px;'> Projet</div>
</div>
<div id='map' style='width: 51%; height: 500px; float: bottom;'>
</div>
<div id='button1' style='display: inline-block; margin-top: 1%; width: 10%; height: 50px; background-color: #32CD32; border-radius: 15px;'>
<div id='txt1' style='text-align: center; font-family: tahoma; color: white; font-size: 25px; line-height: 49px;'>Station 1</div>
</div>
<script>
$( "#button1" ).click(function() {
//Put the logical filter there
});
</script>
</body>
JS code (extract)
station = new OpenLayers.Layer.Vector("station", {
strategies: [new OpenLayers.Strategy.BBOX()],
protocol: new OpenLayers.Protocol.WFS({
version: "1.0.0",
url: "http://585.182.555.82/sig/geoserver/wfs",
featureType: "station",
srsName:"EPSG:2154",
featureNS: "http://www.obx.com/zodb",
geometryName: "geom"
}),
Example of a logical filter I already made directly into the station item (working) :
filter: new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "id_station",
value: "2"
}),
]
}),
You've understood it, my aim is to use the OpenLayers.Filter.Logical into the jQuery function. I think I have to use something like this : station.filter = new OpenLayers.Filter.Logical({ But I'm not sure how.
If I do
<script> // Go jQuery Go !
$( "#button1" ).click(function() {
alert(station.filter.filters[0].value);
});
</script>
It's working (it's returning me "2", as according the logical filter)
1 Answer 1
When using vector layers in OpenLayers, it is always best to use the filter startegy instead of the filter parameter in the layer:
var filterStrategy = new OpenLayers.Strategy.Filter({filter: your_filter_here});
var station = new OpenLayers.Layer.Vector("station", {
strategies: [ filterStrategy ]
});
and:
$("#button1").click(function () {
var filter = new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.OR,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "id_station",
value: 2
})]
});
filterStrategy.setFilter(filter);
});
I've built a working example available here:
-
Ok thanks, I'll check it out and I'll make a feedback.Stranded Kid– Stranded Kid2013年11月07日 09:36:35 +00:00Commented Nov 7, 2013 at 9:36
-
I deleted my previous comment because it's working ! Thanks. And by the way, your example is really nice :-). Anyway, I can't vote up for yoour answer because I don't have enough reputation on the website ;(.Stranded Kid– Stranded Kid2013年11月07日 10:47:19 +00:00Commented Nov 7, 2013 at 10:47
-
Thanks for the example. Had some broken external script refs, so I updated it: jsfiddle.net/d8f7120x/2abettermap– abettermap2016年03月16日 19:33:50 +00:00Commented Mar 16, 2016 at 19:33