Daily Archives: 05/25/2013

OpenLayersを使ってまずは表示してみる。[Chapter 2]

OpenLayersを使ってみる。[Chapter 2]

さて、手元にOpenLayers 2.10 Beginner's Guideなる書籍があるので、これを使いながらOpenLayersの使い方を学んでいきましょう。
実践的にGeoExtのtutorialを始めていますが、OpenLayerの基本もしっかりと学んでください。OpenLayer3 α版も出ていますが、ここでは、OpenLayer 2.12について学んでいきます。
ただし、本Blog中のsource code等に関しては、あくまでも参考としてください。なにがあっても責任とれませんので。
そこんところ、ヨロシク~~!!

とにかくなんでもいいので使ってみる。

私自身、あまりマニュアルを読む方ではないので、とりあえずが動かしてみて、動作確認しながら作業を進めることが多いです。
したがって、後になって「な~~んだ」と気づくことが多々あります。

ま、そんなことはどうでもいいので、Chapter 1 でms4w-3.0.6がinstallしている事を前提に話を進めていきます。ms4wはXPでも7でも動きます。ただし、7では一部管理モードが必要になります。 そして開発環境は、Aptana studio 3を使います。そして、表示するbrowserはFireFox 21.0現時点で最新版を使います。 それ以外動かない可能性もありますので、その際は自力でなんとかしてね。自力に勝るものなし

超簡単な表示

それでは、超簡単な地図を表示します。
下記codeを入力して、index.htmlとして保存します。
保存先は、どこでも構わないのですが、c:¥ms4w¥apache¥htdocs¥openlayer2_12¥chapter1¥にしておきます。

[html]
<!DOCTYPE html>
<html lang=’ja’>
<head>
<meta charset=’utf-8′ />
<title>My OpenLayers Map</title>
<script type=’text/javascript’ src=’http://localhost/openlayers/OpenLayers.js’></script>
<script type=’text/javascript’>

var map;

function init() {
map = new OpenLayers.Map(‘map_element’, {});
var wms = new OpenLayers.Layer.WMS(
‘WMS Layer Title’,
‘http://vmap0.tiles.osgeo.org/wms/vmap0′,
{layers: ‘basic’},
{}
);

map.addLayer(wms);
if(!map.getCenter()){
map.zoomToMaxExtent();
}
}

</script>
</head>

<body onload=’init();’>
<div id=’map_element’ style=’width: 500px; height: 500px;’>
</div>
</body>
</html>
[/html]

FireFoxを立ち上げて、http://localhost/openlayer2_12/chapter1/index.htmlと入力すると、
chapter1

な感じで、mapが表示されます。

とりあえず、mapを表示しただけなので、味も素っ気のないですが、順にcodeを見ていきます。

1. OpenLayers library filesの読み込み:
Line [6]

  <script type='text/javascript' src='http://localhost/openalayers/OpenLayers.js'></script>

2. map表示のためのHTML elementの作成:
Lines [30] and [31]

  <div id='map_element' style='width: 500px; height: 500px'>
</div>

3. Map classからMap objectの作成:
Line [12]

  map = new OpenLayers.Map('map_element', { });

4. Layer classからLayer Objectの作成:
Lines [13] to [18]

  var wms_layer = new OpenLayers.Layer.WMS(
    'WMS Layer Title',
    'http://vmap0.tiles.osgeo.org/wms/vmap0',
    {layers: 'basic'},
    {}
  );

5. mapにlayerを追加:
Line [20]

  map.addLayer(wms_layer);

6. mapの表示範囲の定義:
Lines [21] to [23]

  if(!map.getCenter()){
    map.zoomToMaxExtent();
  }

となります。
これが、超~~簡単なOpenLayersで表示した地図になり、基本となります。

どうでしょうか? 難しくはないですね。

OpenLayers.Layer.WMSってなに?

ここで、index.htmlの
4. Layer classからLayer Objectの作成:
Lines [13] to [18]

  var wms_layer = new OpenLayers.Layer.WMS(
    'WMS Layer Title',
    'http://vmap0.tiles.osgeo.org/wms/vmap0',
    {layers: 'basic'},
    {}
  );

OpenLayers.Layer.WMSなるものがでてきましたが、これはなにか?
原文より引用
「Here, we create a layer object for the map to use from the WMS subclass of the Layer class.
In OpenLayers, every map needs to have at least one layer. The layer points to the 'back end',
or the server side map server, as we discussed earlier. The layer can be any of a multitude of
different services, but we are using WMS here. WMS, which stands for Web Map Service, is
an international standard defined by the Open Geospatial Consortium (OGC).」
と書かれています。
要するに、Layer classのSub ClassであるWMSを呼び出すことで、とあるServerからmapのサービス利用します。
というようなことですね。また、WMSとはOGCで定義されたものでWeb Map Serviceのことですね。

このWMSを提供しているServerがわかれば、Client sideでOpenLayerを使ってmapを表示できると言うことになります。
では、日本でこのようなWMSを行っているところあるの? 電子国土や農研機構の基盤地図25000などくらいでしょうか?
少ないですよね。
ま、WMSが普及してないことも関係しているのでしょうが。

基本情報を公共機関が提供していただければ、それをつかったサービスなど提供できるのですが、なかなかDataのOpan化は難しいところでしょうか?

今回のまとめ

超~簡単なOpenLayersによるmap表示を行いました。
次回は、もうちょっと機能を付け加えてみます。

ネットを徘徊して、WMS Serverを探して、var wms_layer = new OpenLayers.Layer.WMS(…);を差し替えてみるの良いですね。

また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.