OpenLayers 3は地図表示機能を実現します。
5233 ワード
本論文の例では、OpenLayers 3の地図表示を実現するための具体的なコードを共有します。
1.開発環境の配置
OpenLayers 3を使ってWebGISアプリケーションを開発するには、まず開発環境を配置する必要があります。まず、OpenLayers 3の開発庫をOpenLayers 3のウェブサイトで取得する必要があります。ダウンロードリンク：公式サイト。開くと図のようになります。
注意したいのは、ここでは二つのバージョンがダウンロードされています。①：開発ライブラリ（開発と調整のJSライブラリとCSSファイル）のみを含み、②：開発倉庫、開発庫のソースコード、例、APIなどすべての開発資源を含みます。
ここで最初のバージョンをダウンロードしました。
2.OMM瓦の地図を表示する
ここではOpenLayers 3 APIに基づいてOSMM瓦の地図（すなわちOpenStreeMapの瓦の地図）を表示することを紹介します。
方法1
構想を実現します：地図の表示に対して、まず地図の容器の対象（oL.Map種類）を創立して、それから容器の中でレイヤーをロードして実現します。
実装ステップ:
1.ウェブページを作成し、フォルダ内にjsフォルダを新規作成し、cssフォルダを作成し、まず前にダウンロードしたOpenLayers 3の開発ライブラリと様式ファイル（ol.js、ol.css）をjsフォルダにコピーします。
2.フォルダにHTMLページを新規作成し、ホームページのheadタグにol.jsとol.cssを紹介します。
3.Web bodyに地図容器としてdivを新設し、idを「map」に設定し、css設定で容器の様式を設定する。
4.コードを作成し、地図コンテナオブジェクト（ol.Map）を作成し、ターゲットコンテナ（idは「map」のdiv）にtargetパラメータで関連付け、viewパラメータで地図ビュー（ol.View）を設定します。
実現コードは以下の通りです。
1.ol.Map：地図容器類は、OpenLayers 3の核心部品であり、地図を表示するために、さまざまな種類のレイヤーをロードし、地図コントロール（スケール、イーグル・アイ、地図のズームなど）をロードしたり、地図と対話する機能コントロールなどがあります。地図コンテナオブジェクトを実例化してロードし、target、layers、viewパラメータを設定します。これは地図ロードの必須三つの要素です。
2.ol.layer.Tile：瓦のレイヤー類は、主に瓦のレイヤーをロードするために使われています。瓦のレイヤーのオブジェクトを実用化することにより、データソースをバインディングして対応する瓦のレイヤーをロードすることができます。
3.ol.source.OSNM：パッケージされたOpenStreetMapオンライン瓦サービスデータのデータソースクラスは、このデータソースオブジェクトを作成し、瓦レイヤーにロードします。
ol.View：地図ビュー類は、主に地図と人の相互作用を制御するもので、例えばズーム、地図表示解像度の調整、回転地図などがあります。地図ビューオブジェクトを実例化することにより、地図の中心点、初試表示センターなどのパラメータを設定します。
レイヤーをロードするには、Layersパラメータによって地図を設定するという方法以外に、Mapはレイヤーオブジェクトを動的にロードするaddLayer方法を提供します。例えば、レイヤーを読み込むコードは以下の通りです。
第一の方法はHTMLページのbodyタグに直接地図をロードする方法であり、ブラウザ解析時に順次ロードして実行する方法であり、第二の方法は現在のhtmlページのheadのラベルにjavascriptコードを作成するということであり、OSI地図をロードするinit関数を書くということである。その後、ウェブページのbodyタグからonload方法で地図をロードするinit関数を呼び出します。このロード方法はブラウザの解析時に、まずjavascriptをロードして、ページの内容をロードする時に呼び出し先で、相応のjavascriptを実行して、ページのロードが完了したらすぐに地図データを載せる機能を実現します。
コードは以下の通りです
1.開発環境の配置
OpenLayers 3を使ってWebGISアプリケーションを開発するには、まず開発環境を配置する必要があります。まず、OpenLayers 3の開発庫をOpenLayers 3のウェブサイトで取得する必要があります。ダウンロードリンク：公式サイト。開くと図のようになります。
注意したいのは、ここでは二つのバージョンがダウンロードされています。①：開発ライブラリ（開発と調整のJSライブラリとCSSファイル）のみを含み、②：開発倉庫、開発庫のソースコード、例、APIなどすべての開発資源を含みます。
ここで最初のバージョンをダウンロードしました。
2.OMM瓦の地図を表示する
ここではOpenLayers 3 APIに基づいてOSMM瓦の地図（すなわちOpenStreeMapの瓦の地図）を表示することを紹介します。
方法1
構想を実現します：地図の表示に対して、まず地図の容器の対象（oL.Map種類）を創立して、それから容器の中でレイヤーをロードして実現します。
実装ステップ:
1.ウェブページを作成し、フォルダ内にjsフォルダを新規作成し、cssフォルダを作成し、まず前にダウンロードしたOpenLayers 3の開発ライブラリと様式ファイル（ol.js、ol.css）をjsフォルダにコピーします。
2.フォルダにHTMLページを新規作成し、ホームページのheadタグにol.jsとol.cssを紹介します。
3.Web bodyに地図容器としてdivを新設し、idを「map」に設定し、css設定で容器の様式を設定する。
4.コードを作成し、地図コンテナオブジェクト（ol.Map）を作成し、ターゲットコンテナ（idは「map」のdiv）にtargetパラメータで関連付け、viewパラメータで地図ビュー（ol.View）を設定します。
実現コードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> OSM </title>
<!-- ol.css， ol.css -->
<link rel="stylesheet" href="css/ol.css" >
<script src="js/ol.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [
//
new ol.layer.Tile({
// ， OpenStreetMap
source: new ol.source.OSM()
})
],
//
view: new ol.View({
center: [32, 113], //
zoom: 2 //
})
});
</script>
</body>
</html>1.ol.Map：地図容器類は、OpenLayers 3の核心部品であり、地図を表示するために、さまざまな種類のレイヤーをロードし、地図コントロール（スケール、イーグル・アイ、地図のズームなど）をロードしたり、地図と対話する機能コントロールなどがあります。地図コンテナオブジェクトを実例化してロードし、target、layers、viewパラメータを設定します。これは地図ロードの必須三つの要素です。
2.ol.layer.Tile：瓦のレイヤー類は、主に瓦のレイヤーをロードするために使われています。瓦のレイヤーのオブジェクトを実用化することにより、データソースをバインディングして対応する瓦のレイヤーをロードすることができます。
3.ol.source.OSNM：パッケージされたOpenStreetMapオンライン瓦サービスデータのデータソースクラスは、このデータソースオブジェクトを作成し、瓦レイヤーにロードします。
ol.View：地図ビュー類は、主に地図と人の相互作用を制御するもので、例えばズーム、地図表示解像度の調整、回転地図などがあります。地図ビューオブジェクトを実例化することにより、地図の中心点、初試表示センターなどのパラメータを設定します。
レイヤーをロードするには、Layersパラメータによって地図を設定するという方法以外に、Mapはレイヤーオブジェクトを動的にロードするaddLayer方法を提供します。例えば、レイヤーを読み込むコードは以下の通りです。
<div id="map"></div>
<script type="text/javascript">
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [],
//
view: new ol.View({
center: [32, 113], //
zoom: 2 //
})
});
// OSM
var tileLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
//
map.addLayer(tileLayer);
</script>第一の方法はHTMLページのbodyタグに直接地図をロードする方法であり、ブラウザ解析時に順次ロードして実行する方法であり、第二の方法は現在のhtmlページのheadのラベルにjavascriptコードを作成するということであり、OSI地図をロードするinit関数を書くということである。その後、ウェブページのbodyタグからonload方法で地図をロードするinit関数を呼び出します。このロード方法はブラウザの解析時に、まずjavascriptをロードして、ページの内容をロードする時に呼び出し先で、相応のjavascriptを実行して、ページのロードが完了したらすぐに地図データを載せる機能を実現します。
コードは以下の通りです
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title> OSM </title>
<!-- ol.css， ol.css -->
<link rel="stylesheet" href="css/ol.css" >
<script src="js/ol.js"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<script>
function init() {
// Map ，
var map = new ol.Map({
target: 'map', // div id
//
layers: [
//
new ol.layer.Tile({
source: new ol.source.OSM() // osm
})
],
//
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>