openlayers24_s_cluster.html を参考に、次のようにコマンドにパラメータを追加して Flickr のデータを取得します。
nob61@debian:~$ wget -O jugl_flickr0.xml "http://localhost/featureserver112/featureserver.cgi/flickr/all.gml?sort= interestingness-desc&maxfeatures=2&bbox=138.31229577194503, 35.227550723802125, 140.54908672504484, 36.17489902852169"
maxfeatures=2 で取得する画像データを２個にしてテストしてみます。
jugl_flickr.xml を Eclipse にインポートします。
jugl_test.html にコードを追加します。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Jugl Test</title>
<script src="./trunk/build/jugl.js"></script>
<!-- OpenLayers ライブラリの追加 -->
<script src="./lib/Firebug/firebug.js" type="text/javascript"></script>
<script src="./lib/OpenLayers.js"></script>
<style type="text/css">
td.oddrow {
background-color: #ffcccc;
}
p.foo {
background-color: #ffcccc;
}
</style>
</head>
---
OpenLayers GML Parser（GMLParse.html）を参考に jugl_flickr.xml を読み込みフォーマットします。
この OpenLayers GML Parser の例では、XML ファイルを読み込んだ後、OpenLayers.Format.GML でフォーマットし、features の属性（GML のタグ名とデータ）をルーチン処理しています。
ここでは、同じような処理を Jugl テンプレートでやってみます。
jugl:repeat="feature features" は features オブジェクトのすべての要素をコピーして feature に格納します。
jugl:content="feature.attributes.title は feature のすべての要素のうち属性のタグ名が title のデータが表示されます。
Cluster Straegy の例の jugl:attributes="" は タグ内に記述する属性のことで別のものです。
<!-- jugl:attributes を使うマークアップ4 -->
<h2>Flickr</h2>
<!-- Flickr Example のマークアップ4 -->
<div id="loadStatus">loading..</div>
<br />
<div id="template_id4">
<div jugl:repeat="feature features">
<div jugl:content="feature.attributes.title"></div>
</div>
</div>
次の処理コードは、ファイル jugl_flickr.xml を読み込みが成功したらメッセージ
loaded を表示し、GML にフォーマットして、テンプレート処理をします。
<!-- 処理コード4 -->
<script type="text/javascript">
var format = new OpenLayers.Format.GML();
var features;
window.onload = function () {
var url = "./jugl_flickr.xml"
OpenLayers.loadURL(url, null, null, loadSuccess, loadFailure);
}
function loadSuccess(request){
updateStatus("loaded");
features = format.read(request.responseText);
(new jugl.Template("template_id4")).process();
}
function loadFailure(request){
updateStatus("failed to load");
}
function updateStatus(msg) {
document.getElementById("loadStatus").firstChild.nodeValue = msg;
}
</script>
<title> の内容（データ）が表示されます。
0 件のコメント:
コメントを投稿