http://openlayers.org/ol3-cesium/examples/
の例をみていきます。
6 - ol3cesium raster layer synchronization example
「ol3cesium raster layer synchronization example (rastersync.html)」を参考に地図を表示してみます。
3-1 HTML ファイルの作成
2 「プロジェクト」ペインでツリーを ol3cesiumproj -> サイト・ルート -> js -> libs -> ol3-cesium-v1.8 -> examples とクリックして展開し rastersync.html をダブルクリックして開きます。rastersync.js もダブルクリックして開きます。
3 「新規ファイル」ボタンをクリックします。
6 「rastersync.html」の内容をコピーして「6-ol3cesium18.html」に貼り付け、修正します。
7 同じように、「新規ファイル」ボタンをクリックし、ステップ「1.ファイル・タイプを選択」の「カテゴリ」で「HTML5」、「ファイルタイプ」で「JavaScriptファイル」をクリックして選択し「次>」ボタンをクリック。「ファイル名」を「6-ol3cesium18」と入力して「終了」ボタンをクリック。「rastersync.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> </body> </html>
「6-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 raster layer synchronization 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>
fieldset {display:inline-block;float:left;}
label {display:block;}
body.hideLayerInputs fieldset {display:none;}
</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>
<input type="button" value="Remove all layers" onclick="ol2d.getLayers().clear();document.body.className='hideLayerInputs';" /> <input type="button" value="Add Bing Maps" onclick="addBingMaps();" /> <input type="button" value="Add OSM" onclick="addOSM();" /> <input type="button" value="Add Stamen" onclick="addStamen();" /> <input type="button" value="Add TileWMS" onclick="addTileWMS();" /> <input type="button" value="Add TileJSON" onclick="addTileJSON();" /> <br /><br /> <input type="button" value="TileWMS change" onclick="changeTileWMSParams();" />
<fieldset id="layer0">
<label class="checkbox" for="visible0">
<input id="visible0" class="visible" type="checkbox" onchange="layer0.setVisible(this.checked)" checked/>OpenAerial layer
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01" value="1" oninput="layer0.setOpacity(this.value)"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01" oninput="layer0.setSaturation(this.value)"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01" oninput="layer0.setContrast(this.value)"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01" oninput="layer0.setBrightness(this.value)"/>
</fieldset>
<fieldset id="layer1">
<label class="checkbox" for="visible10">
<input id="visible1" class="visible" type="checkbox" onchange="layer1.setVisible(this.checked)" checked/>Grand Canyon overlay
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01" value="1" oninput="layer1.setOpacity(this.value)"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01" oninput="layer1.setSaturation(this.value)"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01" oninput="layer1.setContrast(this.value)"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01" oninput="layer1.setBrightness(this.value)"/>
</fieldset>
<fieldset id="layer2">
<label class="checkbox" for="visible10">
<input id="visible1" class="visible" type="checkbox" onchange="layer2.setVisible(this.checked)" checked/>World borders
</label>
<label>opacity</label>
<input class="opacity" type="range" min="0" max="1" step="0.01" value="1" oninput="layer2.setOpacity(this.value)"/>
<label>saturation</label>
<input class="saturation" type="range" min="0" max="5" step="0.01" oninput="layer2.setSaturation(this.value)"/>
<label>contrast</label>
<input class="contrast" type="range" min="0" max="2" step="0.01" oninput="layer2.setContrast(this.value)"/>
<label>brightness</label>
<input class="brightness" type="range" min="-1" max="1" step="0.01" oninput="layer2.setBrightness(this.value)"/>
</fieldset>
<!-- ディレクトリ修正 <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="rastersync.js"></script> --> <script src="6-ol3cesium18.js"></script> </body> </html>
0 件のコメント:
コメントを投稿