最初にファイルを 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 件のコメント:
コメントを投稿