OpenLayers 3 Workshop
OpenLayers 3 ワークショップへようこそ。
このワークショップは、Webマッピングソリューションとして ol3 の全体的な概要を説明するように設計されています。演習は、ローカルの HTTP(Web) サーバを設定していて、テキストファイルを編集できることを前提としています。
このワークショップは、履修単位を一式にして提供されています。各単位において、読者は、その単位の特定の目標を達成するように設計された課題一式を履修します。各単位は、前の単位で学んだレッスンに基づいて構築され、読者の知識ベースを反復して構築するために設計されています。
以下の単位が、このワークショップで説明されています：
基礎
◆基本
ol3 で Webページに地図を追加する方法（を学習）。
◆レイヤとソース
ラスタとベクタレイヤについて（を学習）。
◆コントロールとインターラクション
マップコントロールの使用について（を学習）。
高度なトピックス
◆ベクタスタイリング
ベクタレイヤを詳細に探る。
1.1. 地図の作成
OpenLayers では、マップは、レイヤのコレクション、および、ユーザとの対話を処理するための様々なインタラクションとコントロールです。マップは、3つの基本的な部分：マークアップ、スタイル宣言、初期化コードで作成されます。
1.1.1. 演習例
それでは OpenLayers 3 マップの完全な演習例をみてみましょう。
<!doctype html> <html lang="en"> <head>
<link rel="stylesheet" href="ol3/ol.css" type="text/css">
<style>
#map {
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',
layers: [
new ol.layer.Tile({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'http://maps.opengeo.org/geowebcache/service/wms',
params: {LAYERS: 'bluemarble', VERSION: '1.1.1'}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
タスク
1. https://github.com/openlayers/ol3-workshop/archive/resources.zip をダウンロードして、Webサーバのルートにあるフォルダに保存します。（訳注：Webサーバが動作しているフォルダで OK です。）
2. 新しいファイル map.html に上記のテキストをコピーして、ダウンロードしたフォルダのルート（訳注：または、1 のフォルダ。）に保存します。
3. Webブラウザで次の演習マップを開きます：http://localhost:8000/ol_workshop/map.html（訳注：1 に対応するアドレス。以降、これに準じます。）
世界画像を表示する演習地図
最初の地図を作成できたので、続けて各部をより詳しくみていくことにします。
0 件のコメント:
コメントを投稿