http://openlayers.org/ol3-cesium/examples/
の例をみていきます。
9 - ol3cesium selection example
「ol3cesium selection example (selection.html)」を参考に地図を表示してみます。
説明に次のようにあります。
A country may be highlighted by clicking it on the ol3 map.
It gets automatically selected in Cesium.
If you see flickering in Cesium, please check your graphic card drivers.
国が、ol3 マップ上でクリックすることによって強調表示されます。
これにより、セシウムでも自動的に選択します。
セシウムでちらつきが見られた場合は、使用しているグラフィックカードドライバを確認してください。
9-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し selection.html をダブルクリックして開きます。selection.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「selection.html」の内容をコピーして「9-ol3cesium18.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「9-ol3cesium18」と入力して「終了」ボタンをクリック。「selection.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> </body> </html>
「9-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 selection 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;"></div>
<div>A country may be highlighted by clicking it on the ol3 map. <br/>It gets automatically selected in Cesium. <br/>If you see flickering in Cesium, please check your graphic card drivers.</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="selection.js"></script> --> <script src="9-ol3cesium18.js"></script> </body> </html>
0 件のコメント:
コメントを投稿