説明に次のようにあります。
When using symbol styles with WebGL, OpenLayers would render the symbol on a temporary image and would create a WebGL texture for each image. For a better performance, it is recommended to use atlas images (similar to image sprites with CSS), so that the number of textures is reduced. OpenLayers provides an AtlasManager, which when passed to the constructor of a symbol style, will create atlases for the symbols.
WebGL のシンボルのスタイルを使用する場合は、OpenLayers は、一時的な画像上にシンボルを描画し、各画像のWebGLのテクスチャを作成します。パフォーマンスを向上させるためには、テクスチャの数が減少するように、（CSSの画像スプライトと同様）アトラスイメージを使用することを推奨します。 OpenLayers は、シンボルスタイルのコンストラクタに渡されたときに、シンボルのアトラスを作成する AtlasManager を提供します。
HTML ファイルの作成
b 「ファイルを開く」ウィンドウで、「user」->「mapsite」->「ol3proj」->「v3.3.0」->「examples」->「symbol-atlas-webgl.html」をクリックして選択し、「OK」ボタンをクリックします。同じように「symbol-atlas-webgl.js」を開きます。
f 「symbol-atlas-webgl.html」の内容をコピーして「290-ol3ex.html」に貼り付け、修正します。
g 同じように、新規に「290-ol3ex.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「symbol-atlas-webgl.js」の内容をコピーして貼り付け、修正します。「symbol-atlas-webgl-require.js」も「290-ol3ex-require.js」に貼り付けます。
「290-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="../css/ol.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="../resources/layout.css" type="text/css"> <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css"> --> <!-- ディレクトリ修正 --> <link rel="stylesheet" href="v3.3.0/css/ol.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/bootstrap/css/bootstrap.min.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/layout.css" type="text/css"> <link rel="stylesheet" href="v3.3.0/resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Symbols with WebGL example</title>
</head> <body>
<!-- bootstrap.min.css, bootstrap-responsive.min.css で設定されたセレクタを使用。 --> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container">
<!--
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
-->
<!-- ディレクトリ修正 -->
<a class="brand" href="v3.3.0/examples/"><img src="v3.3.0/resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Symbols with WebGL example</h4> <p id="shortdesc">Using symbols in an atlas with WebGL.</p>
<div id="docs">
<p>When using symbol styles with WebGL, OpenLayers
would render the symbol on a temporary image and would
create a WebGL texture for each image. For a better
performance, it is recommended to use atlas images
(similar to image sprites with CSS), so that the
number of textures is reduced. OpenLayers provides an
<code>AtlasManager</code>, which when
passed to the constructor of a symbol style, will
create atlases for the symbols.</p>
<!-- <p>See the <a href="symbol-atlas-webgl.js" target="_blank">symbol-atlas-webgl.js source</a> to see how this is done.</p> --> <!-- ファイル修正 --> <p>See the <a href="290-ol3ex.js" target="_blank">290-ol3ex.js source</a> to see how this is done.</p>
</div> <div id="tags">webgl, symbol, atlas, vector, point</div>
</div> </div> </div>
<!-- <script src="../resources/jquery.min.js" type="text/javascript"></script> <script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="../resources/example-behaviour.js" type="text/javascript"></script> --> <!-- ディレクトリ修正 jQuery Minified版と bootstrap.min.js（tooltip など） example-behaviour.js（Examples用 JSコード[文字コードなど]） --> <script src="v3.3.0/resources/jquery.min.js" type="text/javascript"></script> <script src="v3.3.0/resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script> <script src="v3.3.0/resources/example-behaviour.js" type="text/javascript"></script>
<!-- <script src="loader.js?id=symbol-atlas-webgl" type="text/javascript"></script> --> <!-- ファイル修正 --> <!-- ディレクトリ修正 --> <script src="loader.js?id=290-ol3ex" type="text/javascript"></script>
</body> </html>
0 件のコメント:
コメントを投稿