globe-plugin/index_example.html at main · origo-map/globe-plugin · GitHub

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
<!DOCTYPE html>
<html lang="sv">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
  <!-- On production systems a Content-Security-Policy and referrer meta-tag should be added, see below.
	The CSP should be modified with adding specific sources that should be allowed, f.e. connect-src 'self' webanalysis.example.com geospatialdata.example.com; -->
  <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src * data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; connect-src 'self'; style-src 'self' 'unsafe-inline'; style-src-elem 'self' 'unsafe-inline'; base-uri 'self'; form-action 'self';">
	<meta name="referrer" content="same-origin"> -->
  <title>Origo exempel</title>
  <link href="css/style.css" rel="stylesheet">
  <link href="plugins/globe/globe.css" rel="stylesheet">
  <link rel="shortcut icon" href="img/png/logo.png">
</head>

<body>
  <div id="app-wrapper">
  </div>
  <script src="js/origo.js"></script>
  <script src="plugins/globe/globe.min.js"></script>
  <script type="text/javascript">
    window.Origo.layerType.THREEDTILE = window.Globe().threedtiletype();
    //Init origo
    var origo = Origo('index.json');
    origo.on('load', function (viewer) {
      var globe = Globe({
        showGlobe: true,
        globeOnStart: true,
        deactivateControls: ["measure"],
        settings: {
          depthTestAgainstTerrain: true,
          enableAtmosphere: true,
          enableGroundAtmosphere: true,
          enableFog: true,
          shadows: {
            fadingEnabled: true,
            maximumDistance: 5000,
            normalOffset: true,
            size: 2048,
            softShadows: false
          },
          skyBox: {
            url: "plugins/globe/cesiumassets/Assets/Textures/SkyBox/",
            images: {
              pX: "tycho2t3_80_px.jpg",
              nX: "tycho2t3_80_mx.jpg",
              pY: "tycho2t3_80_py.jpg",
              nY: "tycho2t3_80_my.jpg",
              pZ: "tycho2t3_80_pz.jpg",
              nZ: "tycho2t3_80_mz.jpg"
            }
          }
        },
        "cesiumIontoken": "",
        /* Example for GLTF model
        "gltf": [
          {
            "url": "example.gltf",
            "lat": 18.13764,
            "lng": 59.16456,
            "height": 100,
            // This overrides height if not set to NONE, se options @ https://cesium.com/learn/cesiumjs/ref-doc/global.html?classFilter=Height#HeightReference
            "heightReference": "CLAMP_TO_TERRAIN",
            "animation": false
          }
        ],
        */
        "cesiumTerrainProvider": "",
        "cesiumIonassetIdTerrain": ""
      });
      viewer.addComponent(globe);
    });
  </script>

</body>

</html>