2015年10月18日日曜日

OL3-Cesium 10 - ol3cesium exported methods example 1

OL3-Cesium Examples
http://openlayers.org/ol3-cesium/examples/

の例をみていきます。

10 - ol3cesium exported methods example
「ol3cesium exported methods example (exports.html)」を参考に地図を表示してみます。

10-1 HTML ファイルの作成
1 NetBeans を起動します。









2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し exports.html をダブルクリックして開きます。exports.js もダブルクリックして開きます。



3 「新規ファイル」ボタンをクリックします。

4 ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「HTMLファイル」を選択して「次>」ボタンをクリックします。






5 「new HTML ファイル」ダイアログで「ファイル名」を「10-ol3cesium18」と入力して「終了」ボタンをクリックします。







保存フォルダを変更するときは、「フォルダ」右の「参照」ボタンをクリックして「フォルダを参照」で「ol3cesiumproj-サイト・ルート」をクリックして選択し「フォルダを選択」ボタンをクリックします。









6 「exports.html」の内容をコピーして「10-ol3cesium18.html」に貼り付け、修正します。

7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「10-ol3cesium18」と入力して「終了」ボタンをクリック。「exports.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-ol3cesium18.html">3-ol3cesium18.html</a></div>
  <div><a href="./4-ol3cesium18.html">4-ol3cesium18.html</a></div>
  <div><a href="./5-ol3cesium18.html">5-ol3cesium18.html</a></div>
  <div><a href="./6-ol3cesium18.html">6-ol3cesium18.html</a></div>
  <div><a href="./7-ol3cesium18.html">7-ol3cesium18.html</a></div>
  <div><a href="./8-ol3cesium18.html">8-ol3cesium18.html</a></div>
  <div><a href="./9-ol3cesium18.html">9-ol3cesium18.html</a></div>
  <div><a href="./10-ol3cesium18.html">10-ol3cesium18.html</a></div>
 </body>
</html>


「10-ol3cesium18.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 exported methods example</title>
  <!-- ディレクトリ修正
  <link rel="stylesheet" href="../ol3/css/ol.css" type="text/css">
  -->
  <link rel="stylesheet" href="./js/libs/ol3-cesium-v1.8/ol3/css/ol.css" type="text/css">
 </head>
 <body>
  <div id="map" style="width:600px;height:400px;float:left;"></div>
  <div id="infoDiv"></div>
  <input type="button" value="Enable/disable" onclick="javascript:ol3d.setEnabled(!ol3d.getEnabled())" />
  <br />
  <input type="button" value="setHeading(Math.PI / 6)" onclick="javascript:camera.setHeading(Math.PI / 6)" />
  <input type="button" value="setTilt(Math.PI / 8)" onclick="javascript:camera.setTilt(Math.PI / 8)" />
  <input type="button" value="setDistance(10 000 000)" onclick="javascript:camera.setDistance(10000000)" />
  <input type="button" value="setAltitude(10 000 000)" onclick="javascript:camera.setAltitude(10000000)" />
  <br />
  <input type="button" value="lookAt([35, 40])" onclick="javascript:camera.lookAt(ol.proj.transform([35, 40], 'EPSG:4326', 'EPSG:3857'))" />
  <input type="button" value="setCenter([40, 45])" onclick="javascript:camera.setCenter(ol.proj.transform([40, 45], 'EPSG:4326', 'EPSG:3857'))" />
  <input type="button" value="setPosition([45, 50])" onclick="javascript:camera.setPosition(ol.proj.transform([45, 50], 'EPSG:4326', 'EPSG:3857'))" />
  <!-- ディレクトリ修正
  <script src="../ol3/ol-debug.js"></script>
  <script src="../Cesium/Cesium.js"></script>
  <script src="../ol3cesium.js"></script>
  -->
  <script src="./js/libs/ol3-cesium-v1.8/ol3/ol-debug.js"></script>
  <script src="./js/libs/ol3-cesium-v1.8/Cesium/Cesium.js"></script>
  <script src="./js/libs/ol3-cesium-v1.8/ol3cesium.js"></script>
  <!-- <script src="exports.js"></script> -->
  <script src="10-ol3cesium18.js"></script>
 </body>
</html>

0 件のコメント: