Adding a filter strategy for limiting features that are included in a layer's collection. The strategy takes a filter and caches features that don't pass the filter. Call setFilter on the strategy to update the cache and collection on the layer. r=ahocevar (closes #2790)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@10655 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
48
examples/filter-strategy.html
Normal file
48
examples/filter-strategy.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OpenLayers Filter Strategy Example</title>
|
||||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="../theme/default/google.css" type="text/css">
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="../lib/OpenLayers.js"></script>
|
||||
<script>OpenLayers.ImgPath = "../img/";</script>
|
||||
<script src="filter-strategy.js"></script>
|
||||
<style>
|
||||
.olControlAttribution {
|
||||
font-size: 9px;
|
||||
bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<h1 id="title">Filter Strategy</h1>
|
||||
<p id="shortdesc">
|
||||
Demonstrates the filter strategy for limiting features passed to the layer.
|
||||
</p>
|
||||
<div id="map" class="smallmap"></div>
|
||||
<label for="span">time span (seconds)</label>
|
||||
<select id="span" name="span">
|
||||
<option value="15">15</option>
|
||||
<option value="30">30</option>
|
||||
<option value="60" selected>60</option>
|
||||
<option value="120">120</option>
|
||||
<option value="240">240</option>
|
||||
</select>
|
||||
<input type="button" id="start" value="start">
|
||||
<input type="button" id="stop" value="stop"><br><br>
|
||||
<div id="docs">
|
||||
<p>
|
||||
This example uses a filter strategy to limit the features that are passed
|
||||
to a layer. Features bound for this layer have a <code>when</code> attribute
|
||||
with date values. A filter strategy is constructed with a between filter
|
||||
that limits the span of dates shown. A simple animation cycles through
|
||||
the domain of the <code>when</code> values, calling <code>setFilter</code>
|
||||
on the strategy with an updated filter.
|
||||
</p><p>
|
||||
View the <a href="filter-strategy.js" target="_blank">filter-strategy.js</a>
|
||||
source to see how this is done
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
89
examples/filter-strategy.js
Normal file
89
examples/filter-strategy.js
Normal file
@@ -0,0 +1,89 @@
|
||||
var map, filter, filterStrategy;
|
||||
|
||||
var startDate = new Date(1272736800000); // lower bound of when values
|
||||
var endDate = new Date(1272737100000); // upper value of when values
|
||||
var step = 8; // sencods to advance each interval
|
||||
var interval = 0.125; // seconds between each step in the animation
|
||||
|
||||
function init() {
|
||||
|
||||
// add behavior to elements
|
||||
document.getElementById("start").onclick = startAnimation;
|
||||
document.getElementById("stop").onclick = stopAnimation;
|
||||
var spanEl = document.getElementById("span");
|
||||
|
||||
var mercator = new OpenLayers.Projection("EPSG:900913");
|
||||
var geographic = new OpenLayers.Projection("EPSG:4326");
|
||||
map = new OpenLayers.Map("map");
|
||||
|
||||
var osm = new OpenLayers.Layer.OSM();
|
||||
|
||||
filter = new OpenLayers.Filter.Comparison({
|
||||
type: OpenLayers.Filter.Comparison.BETWEEN,
|
||||
property: "when",
|
||||
lowerBoundary: startDate,
|
||||
upperBoundary: new Date(startDate.getTime() + (parseInt(spanEl.value, 10) * 1000))
|
||||
});
|
||||
|
||||
filterStrategy = new OpenLayers.Strategy.Filter({filter: filter});
|
||||
|
||||
var flights = new OpenLayers.Layer.Vector("Aircraft Locations", {
|
||||
projection: geographic,
|
||||
strategies: [new OpenLayers.Strategy.Fixed(), filterStrategy],
|
||||
protocol: new OpenLayers.Protocol.HTTP({
|
||||
url: "kml-track.kml",
|
||||
format: new OpenLayers.Format.KML({
|
||||
extractTracks: true
|
||||
//,extractStyles: true // use style from KML instead of styleMap below
|
||||
})
|
||||
}),
|
||||
styleMap: new OpenLayers.StyleMap({
|
||||
"default": new OpenLayers.Style({
|
||||
graphicName: "circle",
|
||||
pointRadius: 3,
|
||||
fillOpacity: 0.25,
|
||||
fillColor: "#ffcc66",
|
||||
strokeColor: "#ff9933",
|
||||
strokeWidth: 1
|
||||
})
|
||||
}),
|
||||
renderers: ["Canvas", "SVG", "VML"]
|
||||
});
|
||||
|
||||
map.addLayers([osm, flights]);
|
||||
map.setCenter(new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator), 8);
|
||||
|
||||
};
|
||||
|
||||
var animationTimer;
|
||||
var currentDate;
|
||||
function startAnimation() {
|
||||
if (animationTimer) {
|
||||
stopAnimation(true);
|
||||
}
|
||||
if (!currentDate) {
|
||||
currentDate = startDate;
|
||||
}
|
||||
var spanEl = document.getElementById("span");
|
||||
var next = function() {
|
||||
var span = parseInt(spanEl.value, 10);
|
||||
if (currentDate < endDate) {
|
||||
filter.lowerBoundary = currentDate;
|
||||
filter.upperBoundary = new Date(currentDate.getTime() + (span * 1000));
|
||||
filterStrategy.setFilter(filter);
|
||||
currentDate = new Date(currentDate.getTime() + (step * 1000))
|
||||
} else {
|
||||
stopAnimation(true);
|
||||
}
|
||||
}
|
||||
animationTimer = window.setInterval(next, interval * 1000);
|
||||
}
|
||||
|
||||
function stopAnimation(reset) {
|
||||
window.clearInterval(animationTimer);
|
||||
animationTimer = null;
|
||||
if (reset === true) {
|
||||
currentDate = null;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user