Skip to content

O
OKU-GIS
Switch branch/tag
Find file Normal viewHistoryPermalink
Polyline.html 4.09 KB
Newer Older
Manggar Mahardhika's avatar
3d cesium offline
6f034801
 
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 140 141 
<!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="Draw polylines with various widths and materials."
    />
    <meta name="cesium-sandcastle-labels" content="Geometries" />
    <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 viewer = new Cesium.Viewer("cesiumContainer");

        var redLine = viewer.entities.add({
          name: "Red line on terrain",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
            width: 5,
            material: Cesium.Color.RED,
            clampToGround: true,
          },
        });

        var greenRhumbLine = viewer.entities.add({
          name: "Green rhumb line",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
            width: 5,
            arcType: Cesium.ArcType.RHUMB,
            material: Cesium.Color.GREEN,
          },
        });

        var glowingLine = viewer.entities.add({
          name: "Glowing blue line on the surface",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
            width: 10,
            material: new Cesium.PolylineGlowMaterialProperty({
              glowPower: 0.2,
              taperPower: 0.5,
              color: Cesium.Color.CORNFLOWERBLUE,
            }),
          },
        });

        var orangeOutlined = viewer.entities.add({
          name:
            "Orange line with black outline at height and following the surface",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              -75,
              39,
              250000,
              -125,
              39,
              250000,
            ]),
            width: 5,
            material: new Cesium.PolylineOutlineMaterialProperty({
              color: Cesium.Color.ORANGE,
              outlineWidth: 2,
              outlineColor: Cesium.Color.BLACK,
            }),
          },
        });

        var purpleArrow = viewer.entities.add({
          name: "Purple straight arrow at height",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              -75,
              43,
              500000,
              -125,
              43,
              500000,
            ]),
            width: 10,
            arcType: Cesium.ArcType.NONE,
            material: new Cesium.PolylineArrowMaterialProperty(
              Cesium.Color.PURPLE
            ),
          },
        });

        var dashedLine = viewer.entities.add({
          name: "Blue dashed line",
          polyline: {
            positions: Cesium.Cartesian3.fromDegreesArrayHeights([
              -75,
              45,
              500000,
              -125,
              45,
              500000,
            ]),
            width: 4,
            material: new Cesium.PolylineDashMaterialProperty({
              color: Cesium.Color.CYAN,
            }),
          },
        });

        viewer.zoomTo(viewer.entities);
        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>