DataSource Ordering.html 3.79 KB
Newer Older
Manggar Mahardhika's avatar
Manggar Mahardhika 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 130 131 132 133 134 135 136 137 138 139
<!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="Change the order in which DataSources draw ground primitives"
    />
    <meta name="cesium-sandcastle-labels" content="DataSources" />
    <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);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin
        var czml1 = [
          {
            id: "document",
            name: "CZML Geometries: Rectangle",
            version: "1.0",
          },
          {
            rectangle: {
              coordinates: {
                wsenDegrees: [-120, 40, -110, 50],
              },
              fill: true,
              material: {
                solidColor: {
                  color: {
                    rgba: [255, 0, 0, 255],
                  },
                },
              },
            },
          },
          {
            rectangle: {
              coordinates: {
                wsenDegrees: [-110, 40, -100, 50],
              },
              fill: true,
              material: {
                solidColor: {
                  color: {
                    rgba: [0, 0, 255, 255],
                  },
                },
              },
            },
          },
        ];

        var czml2 = [
          {
            id: "document",
            name: "CZML Geometries: Rectangle",
            version: "1.0",
          },
          {
            rectangle: {
              coordinates: {
                wsenDegrees: [-120, 45, -110, 55],
              },
              fill: true,
              material: {
                solidColor: {
                  color: {
                    rgba: [255, 255, 0, 255],
                  },
                },
              },
            },
          },
          {
            rectangle: {
              coordinates: {
                wsenDegrees: [-110, 45, -100, 55],
              },
              fill: true,
              material: {
                solidColor: {
                  color: {
                    rgba: [0, 255, 255, 255],
                  },
                },
              },
            },
          },
        ];

        var viewer = new Cesium.Viewer("cesiumContainer");
        var promise1 = Cesium.CzmlDataSource.load(czml1);
        viewer.dataSources.add(promise1);
        var promise2 = Cesium.CzmlDataSource.load(czml2);
        viewer.dataSources.add(promise2);

        Sandcastle.addToolbarButton("Swap", function () {
          Cesium.when.all([promise1, promise2]).then(function (results) {
            var ds1 = results[0];
            var ds2 = results[1];
            if (viewer.dataSources.indexOf(ds1) === 0) {
              viewer.dataSources.raise(ds1);
            } else {
              viewer.dataSources.lower(ds1);
            }
          });
        }); //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>