1. ベクタレイヤに建物の水平投影を表示する演習例から始めます。テキストエディタを開き、ワークショップディレクトリのルートに map.html として次のように保存します。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
background-color: gray;
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers 3 example</title> <script src="ol3/ol.js" type="text/javascript"></script> </head>
<body> <h1>My Map</h1> <div id="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
renderer: 'canvas',
layers: [
new ol.layer.Vector({
title: 'Buildings',
source: new ol.source.KML({
url: 'data/layers/buildings.kml'
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: 'red', width: 2})
})
})
],
view: new ol.View2D({
projection: 'EPSG:4326',
center: [-122.791859392, 42.3099154789],
zoom: 16
})
});
</script>
</body>
</html>
2. ブラウザでこの map.html ファイルを開き、赤いアウトラインの建物を見ます。：http://localhost:8080/ol_workshop/map.html（訳注：Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。）
3. OpenLayers のスタイリングを基本的に理解した上で、水平投影のサイズに基づいた異なる色の建物を表示するスタイルの関数を作成することができます。マップの初期化コードでは、次のように建物のレイヤのスタイル設定オプションを置き換えます。
style: (function() {
var defaultStyle = [new ol.style.Style({
fill: new ol.style.Fill({color: 'navy'}),
stroke: ol.style.Stroke({color: 'black', width: 1})
})];
var ruleStyle = [new ol.style.Style({
fill: new ol.style.Fill({color: 'olive'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
})];
return function(feature, resolution) {
if (feature.get('shape_area') < 3000) {
return ruleStyle;
} else {
return defaultStyle;
}
};
})()
4. 変更lを保存し、map.htm をブラウザで開きます。：http://localhost:8080/ol_workshop/map.html
水平投影領域に塗りつぶされた建物。
5. 今、最後のステップとして、建物にラベルを追加してみます。簡単にするために、我々はスタイルとしてラベルと黒のアウトラインだけ使用しています。
style: (function() {
var stroke = new ol.style.Stroke({
color: 'black'
});
var textStroke = new ol.style.Stroke({
color: '#fff',
width: 3
});
var textFill = new ol.style.Fill({
color: '#000'
});
return function(feature, resolution) {
return [new ol.style.Style({
stroke: stroke,
text: new ol.style.Text({
font: '12px Calibri,sans-serif',
text: feature.get('key'),
fill: textFill,
stroke: textStroke
})
})];
};
})()
6. 変更lを保存し、map.htm をブラウザで開きます。：http://localhost:8080/ol_workshop/map.html
キーフィールドによってラベルが付けられた建物。
