1. ベクタレイヤに建物の水平投影を表示する演習例から始めます。テキストエディタを開き、ワークショップディレクトリのルートに map.html として次のように保存します。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="/ol.css" type="text/css">
<style>
#map {
height: 256px;
width: 512px;
}
</style>
<title>OpenLayers example</title> <script src="/loader.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',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
title: 'Buildings',
source: new ol.source.Vector({
url: '/data/layers/buildings.kml',
format: new ol.format.KML({
extractStyles: false
})
}),
style: new ol.style.Style({
stroke: new ol.style.Stroke({color: 'red', width: 2})
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat[-122.79264450073244, 42.30975194250527],
zoom: 16
})
});
</script>
</body>
</html>
3. OpenLayers のスタイリングを基本的に理解した上で、水平投影のサイズに基づいた異なる色の建物を表示するスタイル関数を作成することができます。マップの初期化コードで、次の2つのスタイルの配列を追加し、「Buildings」レイヤの style オプションを以下のスタイル関数に置き換えます。
var defaultStyles = [
new ol.style.Style({
fill: new ol.style.Fill({color: 'navy'}),
stroke: ol.style.Stroke({color: 'black', width: 1})
})
];
var smallStyles = [
new ol.style.Style({
fill: new ol.style.Fill({color: 'olive'}),
stroke: new ol.style.Stroke({color: 'black', width: 1})
})
];
function style(feature, resolution) {
if (feature.get('shape_area') < 3000) {
return smallStyles;
} else {
return defaultStyles;
}
}
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
})
})];
};
})()
キーフィールドによってラベルが付けられた建物。
0 件のコメント:
コメントを投稿