add @dc-modules/themes

modules/themes/compass.scss

@@ -0,0 +1,56 @@
+.dc-compass {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+  pointer-events: auto;
+  user-select: none;
+  width: 55px;
+  height: 55px;
+
+  .out-ring {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 55px;
+    width: 55px;
+    background-repeat: no-repeat;
+    background-size: contain;
+    fill: #3f4854;
+    border-radius: 50%;
+    svg {
+      height: 55px;
+      width: 55px;
+    }
+  }
+
+  .gyro {
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 25px;
+    width: 25px;
+    border-radius: 50%;
+    display: block;
+    margin: 0 auto;
+    padding: 4px;
+    box-sizing: border-box;
+    background: #ffffff;
+  }
+
+  .rotation_marker {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    height: 51px;
+    width: 51px;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+}
+
+.dc-compass .gyro-active,
+.dc-compass .gyro-bg:hover + .gyro {
+  fill: #68adfe;
+}

modules/themes/contextmenu.scss

@@ -0,0 +1,40 @@
+.dc-context-menu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 120px;
+  min-height: 10px;
+  background: rgba(43,44,47,.8);
+  border: 1px solid #2b2c2f;
+  border-radius: 4px;
+  visibility: hidden;
+  z-index: -1;
+  cursor: pointer;
+  .menu-list {
+    width: 100%;
+    color: #fff;
+    .menu-item {
+      font-size: 14px;
+      list-style: none;
+      width: 100%;
+      &:nth-child(n+2)::before{
+        content: "";
+        display: block;
+        height: 1px;
+        width: 100%;
+        background: -webkit-linear-gradient(270deg,transparent,hsla(0,0%,100%,.2),transparent);
+        background: linear-gradient(270deg,transparent,hsla(0,0%,100%,.2),transparent);
+      }
+      a{
+        color: #fff;
+        display:block;
+        padding: 6px 10px;
+        clear: both;
+        text-decoration: none;
+        &:hover{
+          background-color: #444d59;
+        }
+      }
+    }
+  }
+}

modules/themes/distancelegend.scss

@@ -0,0 +1,23 @@
+.dc-distance-legend{
+  position: absolute;
+  left: 120px;
+  bottom: 2px;
+  width: 125px;
+  height: 25px;
+  user-select: none;
+  .label{
+    font-size: 14px;
+    color: rgb(255, 255, 255);
+    text-align: center;
+    width: 100%;
+    font-weight: lighter;
+  }
+  .scale-bar{
+    position: absolute;
+    height: 10px;
+    top: 10px;
+    border-left: 1px solid rgb(255, 255, 255);
+    border-right: 1px solid rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(255, 255, 255);
+  }
+}

modules/themes/hawkeyemap.scss

@@ -0,0 +1,12 @@
+.dc-hawkeye-map {
+  position: absolute;
+  left: 25px;
+  bottom: 30px;
+  user-select: none;
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+  border: 2px solid orange;
+  box-shadow: 2px 2px 3px #2b2b2b;
+}

modules/themes/index.js

@@ -0,0 +1,18 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 10:48:50
+ */
+
+import 'cesium/Widgets/widgets.css'
+import './index.scss'
+import './popup.scss'
+import './tooltip.scss'
+import './contextmenu.scss'
+import './mapswitch.scss'
+import './mapsplit.scss'
+import './hawkeyemap.scss'
+import './compass.scss'
+import './locationbar.scss'
+import './distancelegend.scss'
+import './zoom-controller.scss'
+import './loading-mask.scss'

modules/themes/index.scss

@@ -0,0 +1,35 @@
+@charset "UTF-8";
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.dc-container {
+  overflow: hidden;
+  display: block;
+}
+
+.dc-attribution {
+  img{
+    width: 20px;
+    height: 20px;
+    margin-right: 3px;
+  }
+  a {
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.div-icon {
+  user-select: none;
+  background-color: #fff;
+  padding: 2px 2px;
+  border-radius: 4px;
+  &:hover {
+    cursor: pointer;
+  }
+}

modules/themes/loading-mask.scss

@@ -0,0 +1,63 @@
+.dc-loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.6);
+
+  .loading {
+    width: 150px;
+    height: 15px;
+    margin: 0 auto;
+  }
+
+  .loading span {
+    display: inline-block;
+    width: 15px;
+    height: 100%;
+    margin-right: 5px;
+    border-radius: 50%;
+    background: #b8e9ff;
+    -webkit-animation: load 1.04s ease infinite;
+  }
+
+  .loading span:last-child {
+    margin-right: 0;
+  }
+
+  @-webkit-keyframes load {
+    0% {
+      opacity: 1;
+      -webkit-transform: scale(1.3);
+    }
+
+    100% {
+      opacity: 0.2;
+      -webkit-transform: scale(0.3);
+    }
+  }
+
+  .loading span:nth-child(1) {
+    -webkit-animation-delay: 0.13s;
+  }
+
+  .loading span:nth-child(2) {
+    -webkit-animation-delay: 0.26s;
+  }
+
+  .loading span:nth-child(3) {
+    -webkit-animation-delay: 0.39s;
+  }
+
+  .loading span:nth-child(4) {
+    -webkit-animation-delay: 0.52s;
+  }
+
+  .loading span:nth-child(5) {
+    -webkit-animation-delay: 0.65s;
+  }
+}

modules/themes/locationbar.scss

@@ -0,0 +1,22 @@
+.dc-location-bar {
+  position: absolute;
+  left: 270px;
+  bottom: 2px;
+  font-size: 14px;
+  color: rgb(255, 255, 255);
+  background: rgba(0, 0, 0, 0.6);
+  padding: 2px 5px;
+  border-radius: 2px;
+  user-select: none;
+  display: flex;
+  span {
+    margin: 0 8px;
+    display: inline-block;
+  }
+  .mouse-location{
+    span{
+      min-width: 100px;
+    }
+  }
+
+}

modules/themes/mapsplit.scss

@@ -0,0 +1,25 @@
+.dc-slider {
+  position: absolute;
+  left: 50%;
+  top: 0px;
+  background-color: #d3d3d3;
+  width: 5px;
+  height: 100%;
+  z-index: 9999;
+  .splitter {
+    position: absolute;
+    left: -21px;
+    top: calc(50% - 21px);
+    width: 42px;
+    height: 42px;
+    background: #fff;
+    border-radius: 50%;
+    text-align: center;
+    line-height: 58px;
+    padding: 2px;
+    border: 1px solid lightgrey;
+    &:hover {
+      cursor: ew-resize;
+    }
+  }
+}

modules/themes/mapswitch.scss

@@ -0,0 +1,43 @@
+.dc-map-switch {
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+  width: 80px;
+  height: 60px;
+  background: #fff;
+  transition: width 2s;
+  -moz-transition: width 2s; /* Firefox 4 */
+  -webkit-transition: width 2s; /* Safari and Chrome */
+  -o-transition: width 2s; /* Opera */
+  padding: 5px 5px;
+  box-shadow: 2px 2px 3px #888888;
+  cursor: pointer;
+  overflow: hidden;
+  visibility: hidden;
+  .map-item {
+    position: relative;
+    display: inline-block;
+    margin-right: 5px;
+    width: 80px;
+    height: 60px;
+    overflow: hidden;
+    span {
+      color: #fff;
+      font-size: 14px;
+      position: absolute;
+      right: 2px;
+      bottom: 2px;
+      user-select: none;
+      padding: 1px 3px;
+      pointer-events: none;
+    }
+    &.active {
+      span {
+        background-color: rgba(8, 101, 186, 0.8);
+      }
+    }
+    &:last-child {
+      margin-right: 0px !important;
+    }
+  }
+}

modules/themes/popup.scss

@@ -0,0 +1,13 @@
+.dc-popup {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 120px;
+  min-height: 10px;
+  padding: 10px 10px;
+  background: rgba(255, 255, 255, 1);
+  border-radius: 4px;
+  visibility: hidden;
+  z-index: -1;
+  cursor: pointer;
+}

modules/themes/tooltip.scss

@@ -0,0 +1,26 @@
+.dc-tool-tip {
+  position: absolute;
+  left: 0;
+  top: 0;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  padding: 0 10px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: -1;
+  &:before {
+    content: '';
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    left: -10px;
+    top: 5px;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid rgba(0, 0, 0, 0.6);
+  }
+}

modules/themes/zoom-controller.scss

@@ -0,0 +1,23 @@
+.dc-zoom-controller{
+  position: absolute;
+  top: 90px;
+  right: 36.5px;
+  pointer-events: auto;
+  user-select: none;
+  background: #3f4854;
+  border-radius: 100px;
+  border: solid 1px rgba(255,255,255,0.2);
+  text-align: center;
+  box-sizing: border-box;
+  line-height: 1.2rem;
+  width: 24px;
+  height: 60px;
+  .zoom-in ,.refresh,.zoom-out{
+    cursor: pointer;
+    svg{
+      width: 10px;
+      height: 10px;
+      fill: #fff;
+    }
+  }
+}