説明に次のようにあります。
This example uses a ol.source.Raster to generate data based on another source. The raster source accepts any number of input sources (tile or image based) and runs a pipeline of operations on the input data. The return from the final operation is used as the data for the output source.
この例では、もう一つのソースに基づいてデータを生成する ol.source.Raster を使用しています。ラスタソースは、任意の数の入力ソース（ベースタイルまたは画像）を受け取り、入力データに対する operation のパイプラインを実行します。最後の operation からのリターンは、出力ソースのデータとして使用されます。
In this case, a single tiled source of elevation data is used as input. The shaded relief is calculated in a single "image" operation. By setting operationType: 'image' on the raster source, operations are called with an ImageData object for each of the input sources. Operations are also called with a general purpose data object. In this example, the sun elevation and azimuth data from the inputs above are assigned to this data object and accessed in the shading operation. The shading operation returns an array of ImageData objects. When the raster source is used by an image layer, the first ImageData object returned by the last operation in the pipeline is used for rendering.
この場合には、標高データの単一タイルソースは、入力（データ）として使用されます。陰影起伏は、単一「画像」の operation で計算されます。ラスタソースで operationType: 'image' を設定すると、operation が、それぞれの入力ソースのための ImageData オブジェクトと共に呼び出されます。operation は、汎用データオブジェクトと共に呼び出されます。この例では、上記入力（データ）からの太陽仰角および方位角データは、このデータオブジェクトに割り当てられ、シェーディング operation にアクセスされます。シェーディング operation は ImageData オブジェクトの配列を返します。ラスタソースは、i画像レイヤによって使用されるとき、パイプラインの最後の operation によって返される最初の ImageData オブジェクトがレンダリングに使用されます。
HTML ファイルの作成
同じように「shaded-relief.js」を開きます。
d 「ファイル」ウィンドウで「ol3proj」をクリックして選択し、「ファイル名」を「2127-ol3ex.html」と入力し、「次へ」ボタンをクリックします。
f 「shaded-relief.html」の内容をコピーして「2127-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「2127-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「shaded-relief.js」の内容をコピーして貼り付け、修正します。「shaded-relief-require.js」も「2127-ol3ex-require.js」に貼り付けます。「shaded-relief.css」を同じディレクトリにコピーします。
「2127-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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-combined.min.css" type="text/css"> <link rel="stylesheet" href="shaded-relief.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> 「resources」の位置が変わりました。 --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.8.2/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.8.2/examples/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.8.2/examples/resources/prism/prism.css" type="text/css"> <script src="v3.8.2/examples/resources/zeroclipboard/ZeroClipboard.min.js"></script>
<title>Shaded Relief</title> </head> <body>
<!-- bootstrap-combined.min.css, ol.css, layout.css, CSSファイルで設定されたセレクタを使用。 --> <header class="navbar" role="navigation"> <div class="container" id="navbar-inner-container">
<!--
<a class="navbar-brand" href="./"><img src="./resources/logo-70x70.png"> OpenLayers 3 Examples</a>
-->
<!-- ディレクトリ修正 -->
<a class="navbar-brand" href="v3.8.2/examples/"><img src="v3.8.2/examples/resources/logo-70x70.png"> OpenLayers 3 Examples</a>
</div> </header> <div class="container-fluid"> <div class="row-fluid"> <div class="span12">
<div id="map" class="map"></div>
<table class="controls">
<tr>
<td>vertical exaggeration: <span id="vertOut"></span>x</td>
<td><input id="vert" type="range" min="1" max="5" value="1"/></td>
</tr>
<tr>
<td>sun elevation: <span id="sunElOut"></span>°</td>
<td><input id="sunEl" type="range" min="0" max="90" value="45"/></td>
</tr>
<tr>
<td>sun azimuth: <span id="sunAzOut"></span>°</td>
<td><input id="sunAz" type="range" min="0" max="360" value="45"/></td>
</tr>
</table>
</div>
</div>
<div class="row-fluid"> <div class="span12"> <h4 id="title">Shaded Relief</h4> <p id="shortdesc">Calculate shaded relief from elevation data</p> <div id="docs">
<p>
This example uses a <code>ol.source.Raster</code>
to generate data based on another source. The
raster source accepts any number of input sources
(tile or image based) and runs a pipeline of
operations on the input data. The return from the
final operation is used as the data for the output
source. </p> <p>
In this case, a single tiled source of elevation
data is used as input. The shaded relief is
calculated in a single "image" operation.
By setting <code>operationType: 'image'</code>
on the raster source, operations are called with
an <code>ImageData</code> object for each of the
input sources. Operations are also called with a
general purpose <code>data</code> object. In this
example, the sun elevation and azimuth data from
the inputs above are assigned to this <code>data</code>
object and accessed in the shading operation.
The shading operation returns an array of
<code>ImageData</code> objects. When the raster
source is used by an image layer, the first
<code>ImageData</code> object returned by the last
operation in the pipeline is used for rendering.</p>
<div id="tags">raster, shaded relief</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.8.2/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.8.2/apidoc/ol.View.html" title="API documentation for ol.View">ol.View</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.layer.Image.html" title="API documentation for ol.layer.Image">ol.layer.Image>/a> -->
<a href="v3.8.2/apidoc/ol.layer.Image.html" title="API documentation for ol.layer.Image">ol.layer.Image</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile>/a> -->
<a href="v3.8.2/apidoc/ol.layer.Tile.html" title="API documentation for ol.layer.Tile">ol.layer.Tile</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.Raster.html" title="API documentation for ol.source.Raster">ol.source.Raster>/a> -->
<a href="v3.8.2/apidoc/ol.source.Raster.html" title="API documentation for ol.source.Raster">ol.source.Raster</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.TileJSON.html" title="API documentation for ol.source.TileJSON">ol.source.TileJSON>/a> -->
<a href="v3.8.2/apidoc/ol.source.TileJSON.html" title="API documentation for ol.source.TileJSON">ol.source.TileJSON</a>
</li>,
<li>
<!-- <a href="../apidoc/ol.source.XYZ.html" title="API documentation for ol.source.XYZ">ol.source.XYZ>/a> -->
<a href="v3.8.2/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">
<hr>
<form method="POST" target="_blank" action="http://jsfiddle.net/api/post/jquery/1.11.0/">
<input type="button" class="btn btn-info" id="copy-button" value="Copy example code">
<input type="submit" class="btn btn-primary" id="jsfiddle-button" value="Create JSFiddle">
<textarea class="hidden" name="js">
// --- 省略 --- </html></code></pre>
</div> </div> </div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- <script src="./resources/common.js"></script> <script src="./resources/prism/prism.min.js"></script> --> <!-- ディレクトリ修正 CommonJS と prism.js --> <script src="v3.8.2/examples/resources/common.js"></script> <script src="v3.8.2/examples/resources/prism/prism.min.js"></script>
<!-- <script src="loader.js?id=shaded-relief"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=2127-ol3ex"></script>
</body> </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 件のコメント:
コメントを投稿