Debianでka-MapのメモプラスOpenLayers とGeoExt: teleportation

2015年2月22日日曜日

2 - ol3.2ex 69a - Teleport example 1

「Teleport example (teleport.html)」を参考に地図を表示してみます。
説明に次のようにあります。

Example of moving a map from one target to another.
Click on the Teleport button below the map to move the map from one target to another.

一つのターゲットから別のターゲットへマップを移動する例。
マップの下の「Teleport」ボタンをクリックすると、一つのターゲットから別のターゲットへマップが移動します。

HTML ファイルの作成

a Eclipse のメニューの「ファイル」->「ファイルを開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.2.1」->「examples」->「teleport.html」をクリックして選択し、「OK」ボタンをクリックします。
同じように「teleport.js」を開きます。

c メニューの「ファイル」->「新規」 -> 「ファイル」をクリックします。

d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「269-ol3ex.html」と入力し、「次へ」ボタンをクリックします。

e 「File Template」ウィンドウで「HTML 5 Template」をクリックして選択し、「OK」ボタンをクリックします。

f 「teleport.html」の内容をコピーして「269-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「269-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「teleport.js」の内容をコピーして貼り付け、修正します。「teleport-require.js」も「269-ol3ex-require.js」に貼り付けます。

「269-ol3ex.html」

<!doctype html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<!--
  <link rel="stylesheet" href="../css/ol.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="../resources/layout.css" type="text/css">
  <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
-->
  <!-- ディレクトリ修正 -->
  <link rel="stylesheet" href="v3.2.1/css/ol.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/bootstrap/css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/layout.css" type="text/css">
  <link rel="stylesheet" href="v3.2.1/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">

  <title>Teleport example</title>

 </head>
 <body>

  <!-- 
  bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。
  -->
  <div class="navbar navbar-inverse navbar-fixed-top">
   <div class="navbar-inner">
    <div class="container">

     <!--
     <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
     -->
     <!-- ディレクトリ修正 -->
     <a class="brand" href="v3.2.1/examples/"><img src="v3.2.1/resources/logo.png"> OpenLayers 3 Examples</a>

    </div>
   </div>
  </div>
  <div class="container-fluid">
   <div class="row-fluid">
    <div class="span8">
     <div id="map1" class="map"></div>
    </div>
    <div class="span4">
     <div id="map2" class="map"></div>
    </div>
   </div>

   <div class="row-fluid">
    <div class="span12">
     <a id="teleport" href="#" class="btn">Teleport</a>
    </div>
   </div>

   <div class="row-fluid">
    <div class="span12">
     <h4 id="title">Teleport example </h4>

     <p id="shortdesc">Example of moving a map from one 
      target to another.</p>

     <div id="docs">
      <p>Click on the Teleport button below the map to 
       move the map from one target to another.</p>
      <!--
      <p>See the <a href="teleport.js" target="_blank">teleport.js source</a> to see how this is done.</p>
      -->
      <!-- ファイル修正 -->
      <p>See the <a href="269-ol3ex.js" target="_blank">269-ol3ex.js source</a> to see how this is done.</p>

     </div>
     <div id="tags">teleport, openstreetmap</div>

    </div>
   </div>
  </div>

  <!--
  <script src="../resources/jquery.min.js" type="text/javascript"></script>
  <script src="../resources/example-behaviour.js" type="text/javascript"></script>
  -->
  <!-- ディレクトリ修正
   jQuery Minified版と
   example-behaviour.js（Examples用 JSコード[文字コードなど]）
  -->
  <script src="v3.2.1/resources/jquery.min.js" type="text/javascript"></script>
  <script src="v3.2.1/resources/example-behaviour.js" type="text/javascript"></script>

  <!--
  <script src="loader.js?id=teleport" type="text/javascript"></script>
  -->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=269-ol3ex" type="text/javascript"></script>

 </body>
</html>

2009年12月5日土曜日

OpenLayers 38 Map Teleportation - 地図の瞬間移動

Map "Teleportation" and Rendering(teleportation.html)を参考に地図の瞬間移動を試してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_teleportation.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「teleportation.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。


<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers38 Map Teleportation</title>
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- OpenLayers ライブラリ -->
  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>


  <style type="text/css">
   #wrapper {
    position: relative;
   }
   .spot1 {
    width: 250px;
   }
   .spot2 {
    width: 300px;
    position: absolute;
    left: 300px;
    top: 0;
   }
  </style>


  <script type="text/javascript">
   var map, layer1, layer2, spot=1; // 修正
   function init(){
// 東京都用 map の設定
    mapOptions = {
     div: "spot1", 
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 183.593750,
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    };
    map = new OpenLayers.Map(mapOptions);
// 東京都区画レイヤ
    layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img.map',
      layers: 'height',
      format: 'image/png'
     });
    layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
     "http://192.168.1.6/cgi-bin/mapserv?",
     {
      map: '/home/user/mapfile/tokyo_bmi_pgis_img2.map', 
      layers: 'kukaku',
      transparent: true,
      format: 'image/png'
     });

    map.addLayers([layer1, layer2]);
    map.zoomToMaxExtent();

// unit がメータのときの Overview の設定


    var controlOptions = {
     mapOptions: mapOptions
    };
    var overview = new OpenLayers.Control.OverviewMap(controlOptions);
    map.addControl(overview);
    overview.maximizeControl();

    map.addControl(new OpenLayers.Control.LayerSwitcher()); // 追加
    map.addControl(new OpenLayers.Control.MousePosition()); // 追加
    map.addControl(new OpenLayers.Control.ScaleLine());     // 追加
// ここまで
   } // End of function init()

// テレポートのコード


   function teleport() {
    if (spot == 1) {
     spot = 2;
    } else {
     spot = 1;
    }
   map.render("spot" + spot);
   }

  </script>
 </head>


 <body onload="init()">
  <h1 id="title">Map "Teleportation" and Rendering</h1>
  <div id="tags"></div>
  <p id="shortdesc">Call the map's render method to change its container.</p>
  <div id="wrapper">
   <div id="spot1" class="smallmap spot1"></div>
   <div id="spot2" class="smallmap spot2"></div>
<!-- スタイルシートを２つ設定 -->
  </div>
  <input type="button" onclick="teleport()" value="Teleport!"></input>
  <div id="docs">
    This example demonstrates how a map can be rendered initially in one
   container and then moved to a new container.  At any point after map
   construction, the map's render method can be called with the id of
   an empty container, moving the map to the new container.
  </div>
 </body>
</html>

説明を訳してみました。

地図のコンテナを変更する render メソッドを呼び出します。
この例では、地図がどのように最初に1つのコンテナにレンダリングすることができ、それから新しいコンテナに移動するかを示します。地図の構築後、すべてのポイントで、マップのレンダリング方法が空のコンテナのidで呼び出すことができ、マップを新しいコンテナに移動します。

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2015年2月22日日曜日

2 - ol3.2ex 69a - Teleport example 1

2009年12月5日土曜日

OpenLayers 38 Map Teleportation - 地図の瞬間移動

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ

自己紹介

2015年2月22日日曜日

2 - ol3.2ex 69a - Teleport example 1

2009年12月5日土曜日

OpenLayers 38 Map Teleportation - 地図の瞬間移動

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ