http://openlayers.org/ol3-cesium/examples/
の例をみていきます。
3 - ol3cesium dragbox example
「ol3cesium dragbox example (dragbox.html)」を参考に地図を表示してみます。
説明に次のようにあります。
A zone may be selected in ol3 or Cesium map using maj+drag and trigger an event.
Then application code may react to the event by zooming, selecting features, ...
範囲は、maj（実際は shift）+ ドラッグを使用して ol3 や セシウムマップで選択し、イベントをトリガすることができます。
次に、アプリケーション・コードは、ズーム、フィーチャ選択によってイベントに反応します、...
3-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し dragbox.html をダブルクリックして開きます。dragbox.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「dragbox.html」の内容をコピーして「5-ol3cesium18.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「5-ol3cesium18」と入力して「終了」ボタンをクリック。「dragbox.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> </body> </html>
「5-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 dragbox 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="map2d" style="width:600px;height:400px;float:left;"></div> <div id="map3d" style="width:600px;height:400px;float:left;position:relative;"></div>
<div>A zone may be selected in ol3 or Cesium map using maj+drag and trigger an event. <br/>Then application code may react to the event by zooming, selecting features, ...</div>
<!-- ディレクトリ修正 <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="dragbox.js"></script> --> <script src="5-ol3cesium18.js"></script> </body> </html>
0 件のコメント:
コメントを投稿