OpenLayers では、マップは、レイヤのコレクション、および、ユーザとの対話を処理するための様々なインタラクションとコントロールです。マップは、3つの基本的な部分：マークアップ、スタイル宣言、初期化コードで作成されます。
1.1.1. 演習例
それでは OpenLayers マップの完全な演習例をみてみましょう。
<!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({
title: "Global Imagery",
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {LAYERS: 'nasa:bluemarble', TILED: true}
})
})
],
view: new ol.View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 0,
maxResolution: 0.703125
})
});
</script>
</body>
</html>
1.依存関係をインストールしデバッグサーバを動作させるために、セットアップ（Setup）指示が完了していることを確認します。
2. 新しいファイル map.html に上記のテキストをコピーして、ワークショップディレクトリのルートに保存します。
3. Webブラウザで次の演習マップを開きます：http://localhost:4000/map.html
世界画像を表示する演習地図
最初の地図を作成できたので、続けて各部をより詳しくみていくことにします。
0 件のコメント:
コメントを投稿