http://openlayers.org/ol3-cesium/examples/
の例をみていきます。
15 - ol3cesium tracking example
「ol3cesium tracking example (tracking.html)」を参考に地図を表示してみます。
An OpenLayers point moves randomly. It is tracked in 3D.
OpenLayers のポイントが不規則に移動します。それは、3D で追跡されます。
14-1 HTML ファイルの作成
1 NetBeans を起動します。2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.23 -> examples とクリックして展開し tracking.html をダブルクリックして開きます。tracking.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
5 「new HTML ファイル」ダイアログで「ファイル名」を「15-ol3cesium123」と入力して「終了」ボタンをクリックします。
保存フォルダを変更するときは、「フォルダ」右の「参照」ボタンをクリックして「フォルダを参照」で「ol3cesiumproj-サイト・ルート」をクリックして選択し「フォルダを選択」ボタンをクリックします。6 「tracking.html」の内容をコピーして「15-ol3cesium123.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「15-ol3cesium123」と入力して「終了」ボタンをクリック。「tracking.js」の内容をコピーして貼り付け、修正します。
「index.html」
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
<body> <div>TODO write content</div> <div><a href="./3-ol3cesium17.html">3-ol3cesium17.html</a></div> <div><a href="./4-ol3cesium17.html">4-ol3cesium17.html</a></div> <div><a href="./5-ol3cesium17.html">5-ol3cesium17.html</a></div> <div><a href="./6-ol3cesium17.html">6-ol3cesium17.html</a></div> <div><a href="./7-ol3cesium17.html">7-ol3cesium17.html</a></div> <div><a href="./8-ol3cesium17.html">8-ol3cesium17.html</a></div> <div><a href="./9-ol3cesium17.html">9-ol3cesium17.html</a></div> <div><a href="./10-ol3cesium17.html">10-ol3cesium17.html</a></div> <div><a href="./11-ol3cesium17.html">11-ol3cesium17.html</a></div> <div><a href="./12-ol3cesium17.html">12-ol3cesium17.html</a></div> <div><a href="./13-ol3cesium18.html">13-ol3cesium18.html</a></div> <div><a href="./14-ol3cesium19.html">14-ol3cesium19.html</a></div> <div><a href="./15-ol3cesium123.html">15-ol3cesium123.html</a></div> </body> </html>
「15-ol3cesium123.html」
<?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, all" /> <title>ol3cesium tracking example</title>
<!-- ディレクトリ修正 <link rel="stylesheet" href="../ol.css" type="text/css"> --> <link rel="stylesheet" href="./js/libs/ol3-cesium-v1.23ol.css" type="text/css">
<style>
.cesium-credit-textContainer {
display: inline-block;
font-size: 50%;
line-height: 100%;
}
</style>
</head> <body>
<div id="map2d" style="width:600px;height:400px;"></div>
<div> <input type="button" value="Track" onclick="javascript:toggleTracking()" /> </div>
<div> An OpenLayers point moves randomly. It is tracked in 3D. </div>
<!-- <script src="inject_ol3_cesium.js"></script> --> <script src="inject_ol3_cesium123.js"></script> <!-- <script src="tracking.js"></script> --> <script src="15-ol3cesium123.js"></script>
</body> </html>
0 件のコメント:
コメントを投稿