「Put a map on a page」のコードを新しいファイル（例えば、Eclipse の HTML ファイル）にコピーします。
<!doctype html> <html lang="en"> <head> <link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://openLayers.org/en/v4.1.1/build/ol.js" type="text/javascript"></script>
<title>OpenLayers example</title> </head> <body> <h2>My Map</h2> <div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.sourceOSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
</script>
</body> </html>
どうなっているか理解する
地図をWebページに表示するにはあなたは3つのことが必要になります：
1 OpenLayers を読み込む。
2 <div>マップコンテナ。
3 単純なマップを作成するための JavaScript.
OpenLayers を読み込む
<script src="https://openlayers.org/en/v4.1.1/build/ol.js" type="text/javascript"></script>
最初の部分は、JavaScriptライブラリを読み込んでいます。このチュートリアルのために、ここでは簡単にライブラリ全体を取得するための openlayers.org ウェブサイトを設定しています。本番環境では、我々のアプリケーションに必要なモジュールのみを含むライブラリのカスタムバージョンを構築しています。
オプション: アプリケーションを Internet Explorer や Android 4.x などの古いプラットフォームで実行する場合は、OpenLayers の前に別のスクリプトを組み込む必要があります。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
map を含む <div>
<div id="map" class="map"></div>
アプリケーション内の map（マップオブジェクト）は <div> HTML 要素に入れます。この <div> により、幅、高さ、および境界線のような map のプロパティは、CSSで制御できます。ここに示したのは、400ピクセルの高さとブラウザウィンドウと同じ幅の地図を作るために使用されるCSS要素です。
<style>
.map {
height: 400px;
width: 100%;
}
</style>
単純なマップを作成するための JavaScript
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
この JavaScript コードを使用すると、map オブジェクトは、東アフリカの海岸にズームされた OSM レイヤで作成されます。それでは、これを詳しくみてみましょう。
次の行は、OpenLayers の Map オブジェクトを作成します。レイヤやそれに接続した対話がないなら、これは、それ自体だけでは、何もしません。
var map = new ol.Map({ ... });
map オブジェクトを <div> タグに配置するには、map オブジェクトの引数に、target を入れます。<div> タグの id 属性の（属性）値になります。
target: 'map'
layers：[...] 配列は、マップで使用可能なレイヤのリストを定義するために使用されてます。最初で唯一のレイヤは今のところタイル（画像）レイヤです。
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
]
OpenLayers のレイヤは、ソースを含む形式（画像やタイル、ベクタ）で定義されています。 ソースは、マップタイルを取得するために使用されるプロトコルです。あなたはここから入手層ソースのリストを参照することもできます。
Map オブジェクトの次の部分は、View です。view は、地図の中心、解像度、回転を指定することができます。view を定義する最も簡単な方法は、中心点とズームレベルを定義することです。ズームレベル0はズームアウトされていることに注意してください。
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
指定された中心は、緯度/経度の座標（EPSG：4326）であることがわかります。 使用する唯一のレイヤが球状メルカトル図法（EPSG：3857）なので、即座に正しい座標にマップをズームする（焦点を合わす）ことができるように、それらを再投影することができます。
0 件のコメント:
コメントを投稿