説明に次のようにあります。
HERE Map Tile API used with ol.source.XYZ.
Be sure to respect the HERE Service Terms when using their tile API.
ol.source.XYZ を使用した HERE Map Tile API。
tile API を使用するときは、HERE サービスの利用規約を尊重するようにしてください。
HERE Map
HERE Map は、HERE社が運営するマップサイトです。「HERE（https://company.here.com/here/）」に次のようにあります。
An open location platform for all
With the backing of our new investors, AUDI AG, BMW Group and Daimler AG, we aim to accelerate the deployment of real-time maps that can benefit all our customers.
And as an open location platform, we are accessible to all customers who seek to leverage the power of location in their businesses.
We offer world-class location products and services via three business units:
Consumer is enabling smarter urban mobility for people: by combining data from different sources and utilizing location analytics, HERE is delivering beautiful, dynamic maps and relevant information into the hands of millions of people to help them with their journey or discover something new.
新たな投資家、アウディAG、BMWグループとダイムラーAGの支援で、すべてのお客様に利益をもたらすことができるリアルタイムマップの展開を加速することを目指しています。
また、オープンロケーションプラットフォームとして、ビジネスでのロケーションパワーを活用しようとするすべての顧客にアクセス可能です。
3つのビジネスユニットを介して、世界クラスのロケーション製品とサービスを提供しています。
お客様は、人々のスマートアーバンモビリティを可能にされています。異なるソースからデータを結合し、ロケーションの分析を利用することによって、HERE は旅行の支援をしたり、新しいものを発見するために、美しく、ダイナミックマップと関連情報を何百万人もの人々の手に提供しています。
HERE Map の Map Tile API については、「Map Tile API Developer's Guide（https://developer.here.com/rest-apis/documentation/enterprise-map-tile/topics/overview.html）」を参照してください。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.18.1」->「examples」->「here-maps.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「here-maps.js」を開きます。
d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2158-ol3ex.html」と入力し、「次へ」ボタンをクリックします。
f 「here-maps.html」の内容をコピーして「2158-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2158-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「here-maps.js」の内容をコピーして貼り付け、修正します。「here-maps-require.js」も「2158-ol3ex-require.js」に貼り付けます。
「2158-ol3ex.html」
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-combined.min.css" type="text/css">
<!-- <link rel="stylesheet" href="../css/ol.css" type="text/css"> <link rel="stylesheet" href="./resources/layout.css" type="text/css"> <link rel="stylesheet" href="./resources/prism/prism.css" type="text/css"> <script src="./resources/zeroclipboard/ZeroClipboard.min.js"></script> --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.18.1/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.18.1/examples/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.18.1/examples/resources/prism/prism.css" type="text/css"> <script src="v3.18.1/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
<title>HERE Map Tile API</title> </head> <body>
<!--
bootstrap-combined.min.css, ol.css, layout.css,
CSSファイルで設定されたセレクタを使用。
-->
<header class="navbar" role="navigation">
<div class="container">
<div class="display-table pull-left" id="navbar-logo-container">
<!--
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
-->
<!-- ディレクトリ修正 -->
<a class="navbar-brand" href="v3.18.1/examples/"><img src="v3.18.1/examples/resources/logo-70x70.png"> OpenLayers 3 Examples</a>
<!-- menu items that get hidden below 768px width -->
<nav class='collapse navbar-collapse navbar-responsive-collapse'>
<ul class="nav navbar-nav pull-right">
<!-- <li><a href="../doc">Docs</a></li> -->
<li><a href="v3.18.1/doc">Docs</a></li>
<li><a class="active" href="index.html">Examples</a></li>
<!-- <li><a href="../apidoc">Docs</a></li> -->
<li><a href="v3.18.1/apidoc">API</a></li>
<li><a href="https://github.com/openlayers/ol3">Code</a></li>
</ul>
</nav>
</div> </header> <div class="container-fluid">
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
This example uses OpenLayers v<span>3.18.1</span>.
The <a id="latest-link" href="#" class="alert-link">latest</a>
is v<span id="latest-version"></span>.
<div class="row-fluid"> <div class="span12"> <h4 id="title">HERE Map Tile API</h4> <div id="map" class="map"></div>
<select id="layer-select">
<option value="normal.day" selected>Normal Day</option>
<option value="normal.day.transit">Normal Day Transit</option>
<option value="pedestrian.day">Pedestrian Day</option>
<option value="terrain.day">Terrain Day</option>
<option value="satellite.day">Satellite Day</option>
<option value="hybrid.day">Hybrid Day</option>
</select>
</div> </div> <div class="row-fluid"> <div class="span12">
<p id="shortdesc">Example of a map with map tiles
from HERE.</p>
<div id="docs"><p>
<a href="https://developer.here.com/rest-apis/documentation/enterprise-map-tile">
HERE Map Tile API</a> used with <code>ol.source.XYZ</code>.</p>
<p>Be sure to respect the
<a href="https://legal.here.com/en/terms/serviceterms/us/">
HERE Service Terms</a> when using their tile API.</p>
</div>
<div id="api-links">Related API documentation:
<ul class="inline">
<li>
<!-- <a href="../apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a> -->
<a href="v3.18.1/apidoc/ol.Map.html" title="API documentation for ol.Map">ol.Map</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a> -->
<a href="v3.18.1/apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a> -->
<a href="v3.18.1/apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.XYZ.html" title="API documentation for ol.source.XYZ">ol.source.XYZ</a> -->
<a href="v3.18.1/apidoc/ol.source.XYZ.html" title="API documentation for ol.source.XYZ">ol.source.XYZ</a>
</li>
</ui>
</div>
</div>
</div>
<div class="row-fluid">
<div id="source-controls">
<a id="copy-button">
<i class="fa fa-clipboard"></i> Copy
</a>
<a id="jsfiddle-button">
<i class="fa fa-jsfiddle"></i> Edit
</a>
</div>
<form method="POST" id="jsfiddle-form" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<textarea class="hidden" name="js">
// --- 省略 --- </html></code></pre>
</div> </div>
<!-- <script src="./resources/common.js"></script> <script src="./resources/prism/prism.min.js"></script> --> <!-- ディレクトリ修正 CommonJS と prism.js --> <script src="v3.18.1/examples/resources/common.js"></script> <script src="v3.18.1/examples/resources/prism/prism.min.js"></script>
<!-- <script src="loader.js?id=here-maps"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=2158-ol3ex"></script>
</body>
<script> var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
fetch(packageUrl).then(function(response) {
/** GlobalFetch.fetch()(This is an experimental technology)
* The fetch() method of the GlobalFetch interface
* starts the process of fetching a resource. This
* returns a promise that resolves to the Response
* object representing the response to your request.
* GlobalFetch インタフェースの fetch() メソッドは、リソー
* スを取得する処理を開始します。これは要求に対する応答を表す
* Response オブジェクトに解決のプロミス（promise）を返しま
* す。
*（MDN[https://developer.mozilla.org/ja/docs/Web/API/
* FGlobalFetch/fetch]）
*/
return response.json();
/** Response(This is an experimental technology)
* The Response interface of the Fetch API represents
* the response to a request.
* Fetch API の Response インタフェースは、要求に対する応答
* を表します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Response]）
*/
/** Body.json()(This is an experimental technology)
* The json() method of the Body mixin takes a Response
* stream and reads it to completion. It returns a
* promise that resolves with an object literal
* containing the JSON data.
* Body mixin の json() メソッドは、Response ストリームを
* 受け取り、それを完了させるために読み込みます。これは、
* JSON データを含むオブジェクトリテラルで解決する約束
* （promisee）を返します。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Body/json]）
*/
}).then(function(json) {
var latestVersion = json.version;
document.getElementById('latest-version').innerHTML = latestVersion;
var url = window.location.href;
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
/** String.prototype.match()
* 正規表現 に対する 文字列 のマッチングの際に、そのマッチ結
* 果を得るために使われます。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/String/match]）
*/
var cookieText = 'dismissed=-' + latestVersion + '-';
var dismissed = document.cookie.indexOf(cookieText) != -1;
/** String.prototype.indexOf()
* 呼び出す String オブジェクト 中で、指定された値が最初に現
* れたインデックスを返します。fromIndex から検索を始め、値が
* 見つからない場合は -1 を返します。
* （MDN[https://developer.mozilla.org/ja/docs/Web/
* JavaScript/Reference/Global_Objects/String/indexOf]）
*/
if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '3.16.0' != latestVersion) {
var link = url.replace(branchSearch[0], '/latest/examples/');
/** Location.replace()
* The Location.replace() method replaces the current
* resource with the one at the provided URL. The
* difference from the assign() method is that after
* using replace() the current page will not be saved
* in session History, meaning the user won't be able
* to use the back button to navigate to it.
* 指定された URL に現在の文書を置き換えます。 assign() メ
* ソッドとの違いは、replace() を用いた後、現在のページは、
* セッションの履歴には保持されないことです。つまり、ユーザ
* は、置き換え前のページに戻るために、戻るボタンを使うこと
* ができません。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Location/replace]）
*/
fetch(link, {method: 'head'}).then(function(response) {
var a = document.getElementById('latest-link');
a.href = response.status == 200 ? link : '../../latest/examples/';
/** Response.status(This is an experimental technology)
* The status read-only property of the Response
* interface contains the status code of the response
* (e.g., 200 for a success).
* Response インタフェースの status 読み取り専用プロパティ
* は、応答のステータス・コード（例えば、成功のために 200）
* を含みます。
* （MDN[https://developer.mozilla.org/en-US/docs/Web/
* API/Response/status]）
*/
});
var latestCheck = document.getElementById('latest-check');
latestCheck.style.display = '';
document.getElementById('latest-dismiss').onclick = function() {
latestCheck.style.display = 'none';
document.cookie = cookieText;
}
}
});
</script>
</html>
COMMONJS は
COMMONJS
http://webpack.github.io/docs/commonjs.html
に、次のようにあります。
The CommonJS group defined a module format to solve JavaScript scope issues by making sure each module is executed in its own namespace.
This is achieved by forcing modules to explicitly export those variables it wants to expose to the “universe”, and also by defining those other modules required to properly work.
To achieve this CommonJS give you two tools:
the require() function, which allows to import a given module into the current scope.
the module object, which allows to export something from the current scope.
CommonJSグループは、それ自身の名前空間内で実行されている各モジュールを確認することによって、JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しました。
これは、それが「universe（？）」に公開したい変数を明示的にエクスポートするモジュールを強制することによって、同じように、正常に動作するのに必要な他のモジュールを定義することによって、達成されます。
この CommonJS を達成するために2つのツールを与えます：
require()関数、指定したモジュールを現在のスコープにインポートすることができます。
モジュールオブジェクト、現在のスコープからエクスポートすることができます。
Prism は、
Prism
http://prismjs.com/
に、次のようにあります。
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s a spin-off from Dabblet and is tested there daily by thousands.
Prismは、最新のWeb標準に構築されたことを考慮し軽量で拡張可能なシンタックスハイライトです。それは Dabblet からスピンオフで、何千人も日々そこで試験されています。
ZeroClipboard は
ZeroClipboard v2.x
http://zeroclipboard.org/
に、次のようにあります。
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.
ZeroClipboard ライブラリは、見えない Adobe Flash ムービーとJavaScript のインターフェイスを使用してテキストをクリップボードにコピーする簡単な方法を提供します。
Debian 8 では動作しませんでした。ボタンを右クリックしたときに flash のコンテキストメニューが表示されると動作しています。
0 件のコメント:
コメントを投稿