HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_filter.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
filter.html をすべて選択し、コピーしたら openlayers_filter.html に貼り付けます。
コードを次のようにします。ちょっと修正と解説。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenLayers48 Filter Encoding</title>
<!-- style.css ディレクトリを修正 -->
<link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="./examples/style.css" type="text/css" />
<!-- テキストエリアのスタイル -->
<style>
#in {
width: 90%;
height: 250px;
}
#out0, #out1 {
height: 100px;
width: 90%;
overflow: auto;
}
</style>
<!-- OpenLayers ライブラリ ディレクトリを修正-->
<script src="./lib/Firebug/firebug.js"></script>
<script src="./lib/OpenLayers.js"></script>
<!-- Filter コード -->
<script type="text/javascript">
// ogc:Filter の（読み）書き
var filter_1_0 = new OpenLayers.Format.Filter({version: "1.0.0"});
var filter_1_1 = new OpenLayers.Format.Filter({version: "1.1.0"});
var xml = new OpenLayers.Format.XML();
var filter;
function write() {
var code = input.value; // <textarea id="in"> の内容
try {
eval(code); // "code" を数値化
} catch(err) { // エラーのとき
out0.value = err.message; // テキストエリア id="out0" にエラーメッセージ
out1.value = ""; // テキストエリア id="out1" は空欄
}
try {
out0.value = xml.write(filter_1_0.write(filter));
// テキストエリア id="out0" にバージョン 1.0.0 で書き出し
} catch(err) { // エラーのときメッセージ出力
out0.value = err.message;
if(err.lineNumber != undefined) {
out0.value += " (line " + err.lineNumber + " " + err.fileName + ")";
}
}
try {
out1.value = xml.write(filter_1_1.write(filter));
// テキストエリア id="out1" にバージョン 1.1.0 で書き出し
} catch(err) {
out1.value = err.message;
if(err.lineNumber != undefined) {
out1.value += " (line " + err.lineNumber + " " + err.fileName + ")";
}
}
}
var input, out0;
window.onload = function() {
input = document.getElementById("in");
out0 = document.getElementById("out0");
out1 = document.getElementById("out1");
out0.value = "";
out1.value = "";
document.getElementById("write").onclick = write;
};
</script>
</head>
<!-- body 部分 -->
<body>
<h1 id="title">Filter Encoding</h1>
<p id="shortdesc">
Using the filter format write out filter objects.
</p>
<textarea id="in">
filter = new OpenLayers.Filter.Logical({
type: OpenLayers.Filter.Logical.AND,
filters: [
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.LIKE,
property: "person",
value: "me"
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.NOT_EQUAL_TO,
property: "mean",
value: "yes"
}),
new OpenLayers.Filter.Spatial({
type: OpenLayers.Filter.Spatial.BBOX,
value: new OpenLayers.Bounds(-180, -90, 180, 90),
projection: "EPSG:4326"
})
]
});
</textarea>
<button id="write">write</button><br />
Filter Encoding 1.0
<textarea id="out0"></textarea><br />
Filter Encoding 1.1
<textarea id="out1"></textarea><br />
<p id="docs"></p>
</body>
</html>
テキストエリアに入力してあるコードの説明
filter = new OpenLayers.Filter.Logical({
// 複数のフィルタの "&&"（論理積）、"||"（論理和）、"!"（論理否定）を設定
type: OpenLayers.Filter.Logical.AND, // ="&&", OR(="||"), NOT(="!")
filters: [
new OpenLayers.Filter.Comparison({ // 条件の比較
type: OpenLayers.Filter.Comparison.LIKE, // パターンマッチ比較
property: "person",
value: "me" // "me" で始まる文字
}),
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.NOT_EQUAL_TO, // ="!="
property: "mean",
value: "yes" // "yes" 完全一致
}),
new OpenLayers.Filter.Spatial({ // 空間フィルタ
type: OpenLayers.Filter.Spatial.BBOX,
value: new OpenLayers.Bounds(-180, -90, 180, 90),
projection: "EPSG:4326"
})
]
});
出力されたフィルタエンコーディング
Filte Encoding 1.0
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
<ogc:And>
<ogc:PropertyIsLike wildCard="*" singleChar="." escape="!">
<ogc:PropertyName>person</ogc:PropertyName>
<ogc:Literal>me</ogc:Literal>
</ogc:PropertyIsLike>
<ogc:PropertyIsNotEqualTo>
<ogc:PropertyName>mean</ogc:PropertyName>
<ogc:Literal>yes</ogc:Literal>
</ogc:PropertyIsNotEqualTo>
<ogc:BBOX>
<ogc:PropertyName/>
<gml:Box xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326">
<gml:coordinates decimal="." cs="," ts=" ">-180,-90 180,90</gml:coordinates>
</gml:Box>
</ogc:BBOX>
</ogc:And>
</ogc:Filter>
Filter Encoding 1.1
<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc">
<ogc:And>
<ogc:PropertyIsLike wildCard="*" singleChar="." escape="!">
<ogc:PropertyName>person</ogc:PropertyName>
<ogc:Literal>me</ogc:Literal>
</ogc:PropertyIsLike>
<ogc:PropertyIsNotEqualTo matchCase="true">
<ogc:PropertyName>mean</ogc:PropertyName>
<ogc:Literal>yes</ogc:Literal>
</ogc:PropertyIsNotEqualTo>
<ogc:BBOX>
<ogc:PropertyName/>
<gml:Envelope xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326">
<gml:lowerCorner>-180 -90</gml:lowerCorner>
<gml:upperCorner>180 90</gml:upperCorner>
</gml:Envelope>
</ogc:BBOX>
</ogc:And>
</ogc:Filter>
0 件のコメント:
コメントを投稿