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