forked from openlayers/ol-cesium
/
exports.html
74 lines (66 loc) · 3.11 KB
/
exports.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<?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">
<script src="../ol3/build/ol.js"></script>
<script src="../cesium/Build/Cesium/Cesium.js"></script>
<script src="http://localhost:9810/compile?id=ol3cesium-debug"></script>
<script>
var ol2d, ol3d;
var camera;
function start() {
init2d();
ol3d = new olcs.OLCesium(ol2d);
var scene = ol3d.getCesiumScene();
var terrainProvider = new Cesium.CesiumTerrainProvider({
url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
});
scene.terrainProvider = terrainProvider;
ol3d.setEnabled(true);
camera = ol3d.getCamera();
var infoDiv = document.getElementById('infoDiv');
var printInfo = function() {
infoDiv.innerHTML = 'Center: ' + camera.getCenter() + '<br />' +
'Distance: ' + camera.getDistance() + '<br />' +
'Heading: ' + camera.getHeading() + '<br />' +
'Tilt: ' + camera.getTilt() + '<br />' +
'<i>Position:</i> ' + camera.getPosition() + '<br />' +
'<i>Altitude:</i> ' + camera.getAltitude() + '<br />';
};
setInterval(printInfo, 100);
}
function init2d() {
ol2d = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([25, 20], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
}
</script>
</head>
<body onload="javascript:start();">
<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'))" />
</body>
</html>