Add navigation tools to 3d view (#1828)

* Add navigation tools to 3d view * add zoom buttons for 3d mode
geosolutions-it · May 15, 2017 · 54458a4 · 54458a4
1 parent 1aa2e46
commit 54458a4
Show file tree

Hide file tree

Showing 8 changed files with 12,798 additions and 1 deletion.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 web/client/dist/
 web/client/libs/Cesium
+web/client/libs/cesium-navigation
diff --git a/web/client/components/map/cesium/Map.jsx b/web/client/components/map/cesium/Map.jsx
@@ -87,6 +87,16 @@ let CesiumMap = React.createClass({
 
         this.map = map;
         this.forceUpdate();
+        if (this.props.mapOptions.navigationTools) {
+            this.cesiumNavigation = window.CesiumNavigation;
+            if (this.cesiumNavigation) {
+                this.cesiumNavigation.navigationInitialization(this.props.id, map, {
+                    enableZoomControls: false,
+                    enableDistanceLegend: false,
+                    enableCompassOuterRing: false
+                });
+            }
+        }
     },
     componentWillReceiveProps(newProps) {
         if (newProps.mousePointer !== this.props.mousePointer) {

diff --git a/web/client/index.html b/web/client/index.html
@@ -19,6 +19,8 @@
         <!--<script src="https://www.mapquestapi.com/sdk/leaflet/v2.2/mq-map.js?key=__API_KEY_MAPQUEST__"></script>-->
         <script src="libs/Cesium/Build/Cesium/Cesium.js"></script>
         <link rel="stylesheet" href="libs/Cesium/Build/Cesium/Widgets/widgets.css" />
+        <script src="libs/cesium-navigation/cesium-navigation.js"></script>
+        <link rel="stylesheet" href="libs/cesium-navigation/cesium-navigation.css" />
     </head>
     <body>
         <div id="container"></div>

diff --git a/web/client/libs/cesium-navigation/cesium-navigation.css b/web/client/libs/cesium-navigation/cesium-navigation.css
@@ -0,0 +1,158 @@
+
+#distanceLegendDiv .distance-legend {
+    border-radius: 15px;
+    padding-left: 5px;
+    padding-right: 5px;
+    position: absolute;
+    pointer-events: auto;
+    background-color: rgba(47, 53, 60, .8)
+}
+#distanceLegendDiv .distance-legend {
+    right: 25px;
+    bottom: 30px;
+    height: 30px;
+    width: 125px;
+    border: 1px solid rgba(255, 255, 255, .1);
+    display: none;
+}
+#distanceLegendDiv .distance-legend-label {
+    display: inline-block;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: lighter;
+    line-height: 30px;
+    color: #FFF;
+    width: 125px;
+    text-align: center
+}
+#distanceLegendDiv .distance-legend-scale-bar {
+    border-left: 1px solid #FFF;
+    border-right: 1px solid #FFF;
+    border-bottom: 1px solid #FFF;
+    position: absolute;
+    height: 10px;
+    top: 15px
+}
+#distanceLegendDiv .navigation-controls {
+    position: absolute;
+    right: 30px;
+    top: 210px;
+    width: 32px;
+    border: 1px solid rgba(255, 255, 255, .1);
+    background-color: rgba(0, 0, 0, .6);
+    border-radius: 5px;
+    font-weight: 300;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none
+}
+#distanceLegendDiv .navigation-control,
+#distanceLegendDiv .navigation-control-last {
+    cursor: pointer;
+    border-bottom: 1px solid #555
+}
+#distanceLegendDiv .naviagation-control:active {
+    color: #FFF;
+}
+#distanceLegendDiv .navigation-control-last {
+    border-bottom: 0;
+}
+#distanceLegendDiv .navigation-control-icon-zoom-in {
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    color: #FFF;
+    padding-bottom: 4px;
+}
+#distanceLegendDiv .navigation-control-icon-zoom-out {
+    position: relative;
+    text-align: center;
+    font-size: 20px;
+    color: #FFF;
+}
+#distanceLegendDiv .navigation-control-icon-reset {
+    position: relative;
+    left: 10px;
+    width: 10px;
+    height: 10px;
+    fill: rgba(255, 255, 255, .8);
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+#distanceLegendDiv .compass,
+.compass-outer-ring {
+    width: 95px;
+    height: 95px;
+    position: absolute;
+}
+#distanceLegendDiv .compass {
+    pointer-events: auto;
+    right: 0;
+    top: 100px;
+}
+#distanceLegendDiv .compass-outer-ring {
+    top: 0;
+    fill: rgba(255, 255, 255, .5);
+    border-radius: 45px;
+}
+#distanceLegendDiv .compass-outer-ring-background {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+    width: 44px;
+    height: 44px;
+    border-radius: 44px;
+    border: 12px solid rgba(47, 53, 60, .8);
+    box-sizing: content-box;
+}
+#distanceLegendDiv .compass-gyro {
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 95px;
+    height: 95px;
+    fill: #CCC;
+}
+#distanceLegendDiv .compass-gyro-active,
+#distanceLegendDiv .compass-gyro-background:hover+.compass-gyro {
+    fill: #68ADFE;
+}
+#distanceLegendDiv  .compass-gyro-background {
+    position: absolute;
+    top: 31px;
+    left: 31px;
+    width: 33px;
+    height: 33px;
+    border-radius: 33px;
+    background-color: rgba(47, 53, 60, .8);
+    border: 1px solid rgba(255, 255, 255, .2);
+}
+#distanceLegendDiv > .compass-rotation-marker {
+    position: absolute;
+    top: 0;
+    width: 95px;
+    height: 95px;
+    fill: #68ADFE;
+}
+#distanceLegendDiv > .navigation-controls > div:nth-child(2) {
+    display: none;
+}
+
+@media screen and (max-width: 700px),
+screen and (max-height: 420px) {
+    #distanceLegendDiv .compass,
+    #distanceLegendDiv .distance-legend,
+    #distanceLegendDiv .navigation-controls {
+        display: none;
+    }
+}
+@media print {
+    #distanceLegendDiv .compass,
+    #distanceLegendDiv .distance-legend,
+    #distanceLegendDiv .navigation-controls {
+        display: none;
+    }
+}