Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
Multiple Synced Views.html 4.68 KB
Newer Older
Schaaf's avatar
Initial commit  
Schaaf committed
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Multiple views synced across time and space."
    />
    <meta name="cesium-sandcastle-labels" content="Beginner, Showcases" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
      #cesiumContainer {
        display: flex;
        width: 100%;
        height: 100%;
      }
      #view3D {
        display: inline-block;
        width: 100%;
      }
      #view2D {
        display: inline-block;
        width: 100%;
      }
    </style>
    <div id="cesiumContainer" class="fullSize">
      <div id="view3D"></div>
      <div id="view2D"></div>
    </div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        // We want our two views to be synced across time, so we create
        // a shared clock object that both views share
        var clockViewModel = new Cesium.ClockViewModel();
        var options3D = {
          fullscreenButton: false,
          sceneModePicker: false,
          clockViewModel: clockViewModel,
        };
        var options2D = {
          homeButton: false,
          fullscreenButton: false,
          sceneModePicker: false,
          clockViewModel: clockViewModel,
          infoBox: false,
          geocoder: false,
          sceneMode: Cesium.SceneMode.SCENE2D,
          navigationHelpButton: false,
          animation: false,
        };
        // We create two viewers, a 2D and a 3D one
        // The CSS is set up to place them side by side
        var view3D = new Cesium.Viewer("view3D", options3D);
        var view2D = new Cesium.Viewer("view2D", options2D);

        var worldPosition;
        var distance;

        function sync2DView() {
          // The center of the view is the point that the 3D camera is focusing on
          var viewCenter = new Cesium.Cartesian2(
            Math.floor(view3D.canvas.clientWidth / 2),
            Math.floor(view3D.canvas.clientHeight / 2)
          );
          // Given the pixel in the center, get the world position
          var newWorldPosition = view3D.scene.camera.pickEllipsoid(viewCenter);
          if (Cesium.defined(newWorldPosition)) {
            // Guard against the case where the center of the screen
            // does not fall on a position on the globe
            worldPosition = newWorldPosition;
          }
          // Get the distance between the world position of the point the camera is focusing on, and the camera's world position
          distance = Cesium.Cartesian3.distance(
            worldPosition,
            view3D.scene.camera.positionWC
          );
          // Tell the 2D camera to look at the point of focus. The distance controls how zoomed in the 2D view is
          // (try replacing `distance` in the line below with `1e7`. The view will still sync, but will have a constant zoom)
          view2D.scene.camera.lookAt(
            worldPosition,
            new Cesium.Cartesian3(0.0, 0.0, distance)
          );
        }

        // Apply our sync function every time the 3D camera view changes
        view3D.camera.changed.addEventListener(sync2DView);
        // By default, the `camera.changed` event will trigger when the camera has changed by 50%
        // To make it more sensitive, we can bring down this sensitivity
        view3D.camera.percentageChanged = 0.01;

        // Since the 2D view follows the 3D view, we disable any
        // camera movement on the 2D view
        view2D.scene.screenSpaceCameraController.enableRotate = false;
        view2D.scene.screenSpaceCameraController.enableTranslate = false;
        view2D.scene.screenSpaceCameraController.enableZoom = false;
        view2D.scene.screenSpaceCameraController.enableTilt = false;
        view2D.scene.screenSpaceCameraController.enableLook = false;
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal