http://openlayers.org/ol3-cesium/examples/
の例をみていきます。
7 - ol3cesium vectors example
「ol3cesium vectors example (vectors.html)」を参考に地図を表示してみます。
説明に次のようにあります。
Vectors are synchronized from the ol3 map to the Cesium scene.
3D positioning and some styling is supported.
ベクタは ol3 マップからセシウムシーンに同期されます。
3D ポジショニングといくつかのスタイリングがサポートされています。
7-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し vectors.html をダブルクリックして開きます。vectors.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
5 「new HTML ファイル」ダイアログで「ファイル名」を「7-ol3cesium18」と入力して「終了」ボタンをクリックします。
6 「vectors.html」の内容をコピーして「7-ol3cesium18.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「7-ol3cesium18」と入力して「終了」ボタンをクリック。「vectors.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> </body> </html>
「7-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 vectors 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">
<style>
.cesium-credit-textContainer {
display: inline-block;
font-size: 50%;
line-height: 100%;
}
</style>
</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><input type="button" value="Enable/disable Cesium" onclick="javascript:ol3d.setEnabled(!ol3d.getEnabled())" /></div> <div><input type="button" value="Toggle depth test" onclick="javascript:scene.globe.depthTestAgainstTerrain = !scene.globe.depthTestAgainstTerrain" /></div> <div><input type="button" value="Toggle circle style" onclick="javascript:toggleStyle()" /></div> <div><input type="button" value="Add/remove one vector layer" onclick="javascript:addOrRemoveOneVectorLayer()" /></div> <div><input type="button" value="Add/remove one feature" onclick="javascript:addOrRemoveOneFeature()" /></div>
<div>Vectors are synchronized from the ol3 map to the Cesium scene.<br/>3D positioning and some styling is supported.</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="vectors.js"></script> --> <script src="7-ol3cesium18.js"></script> </body> </html>
0 件のコメント:
コメントを投稿