Example サイト
http://www.geoext.org/examples.html
「Feature Renderer」リンクをクリックすると GeoExt.FeatureRenderer が表示されます。
renderer.js. を参考にします。
説明を意訳すると、FeatureRenderer は symbolizers のリストが与えられた OpenLayers.Feature.Vector オブジェクトを描画します。
以前表示されなかった graphicName: "star" が表示されました。理由は不明です。
// スタイル設定
var blue = {
fillColor: "blue",
fillOpacity: 0.25,
strokeColor: "blue",
strokeWidth: 2,
pointRadius: 5
};
var custom = {
point: {
graphicName: "star",
pointRadius: 8,
fillColor: "yellow",
strokeColor: "red",
strokeWidth: 1
},
line: {
strokeColor: "#669900",
strokeWidth: 3
},
poly: {
fillColor: "olive",
fillOpacity: 0.25,
strokeColor: "#666666",
strokeWidth: 2,
strokeDashstyle: "dot"
}
};
var stacked = {
point: [{
pointRadius: 8,
fillColor: "white",
strokeColor: "red",
strokeWidth: 2
}, {
graphicName: "star",
pointRadius: 5,
fillColor: "red"
}],
line: [{
strokeColor: "red",
strokeWidth: 5
}, {
strokeColor: "#ff9933",
strokeWidth: 2
}],
poly: [{
strokeWidth: 3,
fillColor: "white",
strokeColor: "#669900"
}, {
strokeWidth: 2,
fillOpacity: 0,
strokeColor: "red",
strokeDashstyle: "dot"
}]
};
var configs = [{
symbolType: "Point", // 初期値のスタイル
renderTo: "point_default"
}, {
symbolType: "Line",
renderTo: "line_default"
}, {
symbolType: "Polygon",
renderTo: "poly_default"
}, {
symbolType: "Point",
symbolizers: [blue], // "blue" スタイル
renderTo: "point_blue"
}, {
symbolType: "Line",
symbolizers: [blue],
renderTo: "line_blue"
}, {
symbolType: "Polygon",
symbolizers: [blue],
renderTo: "poly_blue"
}, {
symbolType: "Point",
symbolizers: [custom.point], // "custom" スタイル
renderTo: "point_custom"
}, {
symbolType: "Line",
symbolizers: [custom.line],
renderTo: "line_custom"
}, {
symbolType: "Polygon",
symbolizers: [custom.poly],
renderTo: "poly_custom"
}, {
symbolType: "Point",
symbolizers: stacked.point, // "stacked" スタイル
renderTo: "point_stacked"
}, {
symbolType: "Line",
symbolizers: stacked.line,
renderTo: "line_stacked"
}, {
symbolType: "Polygon",
symbolizers: stacked.poly,
renderTo: "poly_stacked"
}];
// フィーチャの描画
Ext.onReady(function() {
for(var i=0; i<configs.length; ++i) {
new GeoExt.FeatureRenderer(configs[i]);
}
$("render").onclick = render;
});
var format = new OpenLayers.Format.WKT();
var renderer, win;
function render() {
var wkt = $("wkt").value;
var feature;
try {
feature = format.read(wkt)
} catch(err) {
$("wkt").value = "Bad WKT: " + err;
}
var symbolizers;
try {
var value = $("symbolizers").value;
symbolizers = eval("(" + value + ")");
if (!symbolizers || symbolizers.constructor !== Array) {
throw "Must be an array literal";
}
} catch(err) {
$("symbolizers").value = "Bad symbolizers: " + err + "\n\n" + value;
symbolizers = null;
}
if(feature && symbolizers) {
if(!win) {
renderer = new GeoExt.FeatureRenderer({
feature: feature,
symbolizers: symbolizers,
width: 150,
style: {margin: 4}
});
win = new Ext.Window({
closeAction: "hide",
layout: "fit",
width: 175,
items: [renderer]
});
} else {
renderer.update({
feature: feature,
symbolizers: symbolizers
});
}
win.show();
}
}
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext28_renderer.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext27_print-form.html をコピーし、外部 JavaScript 読み込みファイルを修正しスタイルシートを設定し body タグ内にターゲット id を設定します。
---
<title>GeoExt28 Feature Renderer</title>
---
<!-- renderer.js 追加 -->
<script type="text/javascript" src="./renderer.js"></script>
<!-- スタイルシート設定 -->
<style type="text/css">
.x-window-body {
background-color: white;
}
#swatches {
padding: 1em;
}
#swatches td {
border: 1px solid #ccc;
text-align: center;
margin: 0 auto;
padding: 0.5em;
}
#swatches td div div {
text-align: left; /* IE centers VML in root otherwise */
}
#wkt {
width: 400px;
height: 100px;
}
#symbolizers {
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<div id="panel"></div>
<h1>GeoExt.FeatureRenderer</h1>
<p>The FeatureRenderer renderers arbitrary OpenLayers.Feature.Vector
objects given a list of symbolizers. The FeatureRenderer
component can be used anywhere a box component is used.</p>
<p>FeatureRenderer は symbolizers のリストが与えられた OpenLayers.Feature.Vector
オブジェクトを任意に描画します。 FeatureRenderer コンポーネントは
ボックスのコンポーネントが使用されている任意の場所で使用することができます。</p>
<h2>Symbol Types</h2>
<p>If the feature renderer is not given a feature, it can be
configured to render a default feature based on geometry type
alone.</p>
<p>フィーチャレンダラがフィーチャを与えられていない場合は、単独での
ジオメトリタイプに基づいたデフォルトのフィーチャを描画するために
設定することができます。</p>
<table id="swatches">
<tbody>
<tr><td> </td><td>point</td><td>line</td><td>polygon</td></tr>
<tr>
<td>default</td>
<td id="point_default"></td>
<td id="line_default"></td>
<td id="poly_default"></td>
</tr>
<tr>
<td>blue</td>
<td id="point_blue"></td>
<td id="line_blue"></td>
<td id="poly_blue"></td>
</tr>
<tr>
<td>custom</td>
<td id="point_custom"></td>
<td id="line_custom"></td>
<td id="poly_custom"></td>
</tr>
</tr>
<tr>
<td>stacked</td>
<td id="point_stacked"></td>
<td id="line_stacked"></td>
<td id="poly_stacked"></td>
</tr>
</tbody>
</table>
<h2>Custom Feature Rendering</h2>
<p>You can render any OpenLayers.Feature.Vector object with a
FeatureRenderer.
Use the inputs below to modify the well-known text and
symbolizer. These will be used to render a feature in a new
window.</p>
<p>FeatureRenderer で任意の OpenLayers.Feature.Vector オブジェクトを
描画することができます。 well - known テキストと symbolizer を
変更するために下の入力欄を使用します。これらは、新しいウィンドウの
フィーチャを描画するために使用されます。</p><br>
<label for="wkt">Geometry Well-Known Text</label><br>
<textarea id="wkt">
POLYGON((1 30, -33 10, -39 -21, 1 -41, 23 -22, 27 15, 1 30), (0 10, -14 0, -4 -24, 12 -8, 0 10))
</textarea><br><br>
<label for="symbolizers">Feature Symbolizers</label><br>
<textarea id="symbolizers">
[{
fillColor: "yellow",
fillOpacity: 1,
strokeColor: "blue",
strokeWidth: 1,
pointRadius: 5
}]
</textarea><br>
<button id="render">render</button>
</body>
</html>
