2009年11月2日月曜日

OpenLayers 22b Flickr の画像を表示2 - Paging Strategy

Paging Strategy Example(strategy-paging.html) を参考に、大量のフィーチャを限定した枚数ごとに順次表示します。

trigpoints レイヤ部分のコードを次の様に修正します。

---
var map, layer1, layer2, paging; // paging を追加

function init() {
---
paging = new OpenLayers.Strategy.Paging();

var trigpoints = new OpenLayers.Layer.Vector("Flickr Trigpoint Photos", {
protocol: new OpenLayers.Protocol.HTTP({
url: "/featureserver112/featureserver.cgi/flickr/all.gml",
params: {
format: "WFS",
sort: "interestingness-desc",
service: "WFS",
request: "GetFeatures",
srs: "EPSG:4326",
maxfeatures: 100,
bbox: [138.31229577194503, 35.227550723802125, 140.54908672504484, 36.17489902852169] // Strategy.Fixed のため必要
},
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed(), paging],
projection: new OpenLayers.Projection("EPSG:4326"),
styleMap: new OpenLayers.StyleMap(style)
});
map.addLayer(trigpoints);

} // End of function init()

function updateButtons() {
document.getElementById("prev").disabled = (paging.pageNum() < 1);
document.getElementById("next").disabled = (paging.pageNum() >= paging.pageCount() - 1);
document.getElementById("num").innerHTML = paging.pageNum() + 1;
document.getElementById("count").innerHTML = paging.pageCount();
}

</script>

<!-- body タグ部分の追加 -->

<body onload="init()">
---
<div id="map" class="smallmap"></div>
Displaying page <span id="num">0</span> of <span id="count">...</span>
<button id="prev" disabled="disabled" onclick="paging.pagePrevious();">previous</button>
<button id="next" disabled="disabled" onclick="paging.pageNext();">next</button>
<br /><br />
<div id="docs">
---

0 件のコメント: