2014年6月18日水曜日

2 - ol3-beta.5ex 1b - Tiled WMS example 2

「loader.js」は、examples のファイルが地図を表示するのに必要なファイルを読み込むために使用されます。

最初にファイルを Web ブラウザで読み込んだときや、表示された地図の選択リストで「Production」を選んだときは、Google Closure Tools で開発される前のファイル(wms-tiled.js など)が使用されます。表示された地図の選択リストで「Develpment」を選んだときは、Google Closure Tools で開発されたファイル(wms-tiled-require.js や ol-deps.js など)が使用されます。
(Google Closure Tools に関しては、関連サイトを参照してください。)

このまま使用すると、ファイルの位置関係が合わないので、「201-ol3ex.html」と同じディレクトリにコピーして内容を修正します。

「loader.js」
/**
 * Loader to add ol.css, ol.js and the example-specific js file to the documents.
 * loader は、ol.css、ol.js、例に必要な js ファイルをドキュメントに追加します。
 *
 * This loader is used for the hosted examples. It is used in place of the development loader (examples/loader.js).
 * この loader は、提供されている例に使用します。開発 loader の場所(examples/loader.js)で使用します。
 *
 * ol.js, ol-simple.js, ol-whitespace.js, and ol-deps.js are built by OL3's build.py script. They are located in the ../build/ directory,relatively to this script.
 * ol.js、ol-simple.js、ol-whitespace.js、ol-deps.js は、OpenLayers3 の build.py スクリプトで構築されています。これらは、この loader.js の相対パスで、../build/ デレクトリに配置されています。
 * ol.js: Google Compiler で simple モードでコンパイル
 * (もしかしたら修正が加えられているかもしれません。)
 * ol-whitespace.js: Google Library で書きなおしたものを whitespace モードでコンパイル
 * ol-simple.js:: Google Library で書きなおしたものを simple モードでコンパイル
 * The script must be named loader.js.
 * このファイル名は、loader.js でなければなりません。
 * 
 * Usage:
 *     <script src="../loader.js?id=my-demo"></script>
 */
---
http://127.0.0.1:8020/ol3proj/201-ol3ex.html
212a-ol3ex.png 「Production」時のアドレス
http://127.0.0.1:8020/ol3proj/201-ol3ex.html?mode=advanced

212b-ol3ex.png 「Development」時のアドレス
http://127.0.0.1:8020/ol3proj/201-ol3ex.html?mode=raw
(advanced と raw 名前をつけ間違えたのかな?)
---
(function() {

 var i, pair;
// モード(mode: "raw","advancd" [選択リストでは、"Development","Production"]切替)
 var href = window.location.href, start, end, paramsString, pairs,pageParams = {};
 if (href.indexOf('?') > 0) {
  start = href.indexOf('?') + 1;
  end = href.indexOf('#') > 0 ? href.indexOf('#') : href.length;
  paramsString = href.substring(start, end);
  pairs = paramsString.split(/[&;]/);
  for (i = 0; i < pairs.length; ++i) {
   pair = pairs[i].split('=');
   if (pair[0]) {
    pageParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
   }
  }
 }
// カスタムスクリプトの読込("loader.js?id=" の後の文字列取得)
 var scripts = document.getElementsByTagName('script');
 var src, index, search, chunks, scriptParams = {};
 for (i = scripts.length - 1; i >= 0; --i) {
  src = scripts[i].getAttribute('src');
  if (~(index = src.indexOf('loader.js?'))) {
   search = src.substr(index + 10);
   chunks = search ? search.split('&') : [];
   for (i = chunks.length - 1; i >= 0; --i) {
    pair = chunks[i].split('=');
    if (pair[0]) {
     scriptParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
    }
   }
   break;
  }
 }
// OpenLyaers3 の読込(mode が 'advanced' か 'raw' なので、'ol.js' を読込)
 var oljs = 'ol.js', mode;
 if ('mode' in pageParams) {
  mode = pageParams.mode.toLowerCase();
  if (mode == 'debug') {
   mode = 'raw';
  }
  if (mode != 'advanced' && mode != 'raw') {
   oljs = 'ol-' + mode + '.js';
  }
 }
 var scriptId = encodeURIComponent(scriptParams.id);
 if (mode != 'raw') {
 // document.write('<scr' + 'ipt type="text/javascript" src="../build/' + oljs + '"></scr' + 'ipt>');
 // ディレクトリ修正
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/build/' + oljs + '"></scr' + 'ipt>');
 } else {
  window.CLOSURE_NO_DEPS = true;
 // we've got our own deps file('ol-deps.js' のこと)
 // document.write('<scr' + 'ipt type="text/javascript" src="../closure-library/closure/goog/base.js"></scr' + 'ipt>');
 // document.write('<scr' + 'ipt type="text/javascript" src="../build/ol-deps.js"></scr' + 'ipt>');
 // ディレクトリ修正
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/closure-library/closure/goog/base.js"></scr' + 'ipt>');
  document.write('<scr' + 'ipt type="text/javascript" src="v3.0.0-beta.5/build/ol-deps.js"></scr' + 'ipt>');
  document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '-require.js"></scr' + 'ipt>');
 }
 document.write('<scr' + 'ipt type="text/javascript" src="' + scriptId + '.js"></scr' + 'ipt>');
}());


「201-ol3ex.html」の「loader.js」のディレクトリを修正します。
<!--
  <script src="loader.js?id=wms-tiled" type="text/javascript"></script>
  <script src="v3.0.0-beta.5/examples/loader.js?id=201-ol3ex" type="text/javascript"></script>
-->
  <!-- ファイル修正 -->  <!-- ディレクトリ修正 -->
  <script src="loader.js?id=201-ol3ex" type="text/javascript"></script>

 </body>
</html>

0 件のコメント: