代码提交

package.json

@@ -57,6 +57,7 @@
         "url-loader": "^0.5.8",
         "vue-loader": "^13.3.0",
         "vue-style-loader": "^3.0.1",
+        "vue-router": "3.4.9",
         "vue-template-compiler": "^2.6.12",
         "webpack": "^3.6.0",
         "webpack-bundle-analyzer": "2.13.1",
@@ -72,4 +73,4 @@
         "last 2 versions",
         "not ie <= 8"
     ]
-}
+}

src/App.vue

@@ -1,12 +1,11 @@
 <template>
   <div id="app">
-    <sm-viewer> </sm-viewer>
+    <router-view />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'app',
-}
+  name: "app",
+};
 </script>
-

src/common/js/webServeConfig.js

@@ -122,7 +122,8 @@ define(function() {
         hostconfig: "127.0.0.1",
         //默认影像地址，空则为不加载默认影像
         //baseImgLayer: "http://127.0.0.1:8090/iserver/services/map-sanyadsm/rest/maps/%E6%B5%B7%E5%8D%97%E5%B2%9B%E5%BD%B1%E5%83%8F15%E7%BA%A7_Level_15%40DataSource",
-        baseImgLayer: "http://192.168.100.238:8090/iserver/services/map-WorkSpace/rest/maps/%E6%B5%B7%E5%8D%97%E5%B2%9B%E5%BD%B1%E5%83%8F15%E7%BA%A7_Level_15%40DataSource"
+        baseImgLayer: "http://192.168.100.238:8090/iserver/services/map-WorkSpace/rest/maps/%E6%B5%B7%E5%8D%97%E5%B2%9B%E5%BD%B1%E5%83%8F15%E7%BA%A7_Level_15%40DataSource",
+        mapview: [110.0353, 16.3, 300000.0],
     };
     return Config;
 });

src/common/scss/globe.scss

@@ -1,481 +1,451 @@
 @import 'cover';
-
 // 取消拖动时的选中
 div {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
 }
 
 .sm-btn {
-  display: inline-block;
-  color: #2ec5ad;
-  background-color: rgba(38, 38, 38, 0.75);
-  margin-bottom: 0;
-  text-align: center;
-  white-space: nowrap;
-  touch-action: manipulation;
-  cursor: pointer;
-  -webkit-user-select: none;
-  padding: 10px 12px;
-  font-size: 17px;
-  border: none;
-  vertical-align: middle;
-  transition: border .25s linear, color .25s linear, background-color .25s linear;
-  -webkit-font-smoothing: subpixel-antialiased;
-  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-
-  &:hover {
-    background: rgba(38, 38, 38, 0.9);
-    color: #fff;
-  }
+    display: inline-block;
+    color: #2ec5ad;
+    background-color: rgba(38, 38, 38, 0.75);
+    margin-bottom: 0;
+    text-align: center;
+    white-space: nowrap;
+    touch-action: manipulation;
+    cursor: pointer;
+    -webkit-user-select: none;
+    padding: 10px 12px;
+    font-size: 17px;
+    border: none;
+    vertical-align: middle;
+    transition: border .25s linear, color .25s linear, background-color .25s linear;
+    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
+    &:hover {
+        background: rgba(38, 38, 38, 0.9);
+        color: #fff;
+    }
 }
 
 .sm-panel {
-  // margin-top: 2rem;
-  // margin-left: 2rem;
-  max-width: 340px;
-  min-width: 280px;
-  display: inline-block;
-  position: absolute;
-  left: 10%;
-  top: 10vh;
-  z-index: 99;
-  cursor: pointer;
-  border: 1px solid #526f82;
-
-  //overflow: hidden;
-  @media (max-width: 750px) {
-    margin-top: 2px;
-    margin-left: 2px;
-    max-width: 280px;
-  }
-
-  @media (max-height: 480px) {
-    margin-top: 2px;
-    margin-left: 2px;
-    max-height: 440px;
-  }
-
-  @media (max-height: 300px) {
-    max-height: 290px;
-  }
-
-  @media (max-height: 250px) {
-    max-height: 240px;
-  }
+    // margin-top: 2rem;
+    // margin-left: 2rem;
+    max-width: 340px;
+    min-width: 280px;
+    display: inline-block;
+    position: absolute;
+    left: 10%;
+    top: 10vh;
+    z-index: 99;
+    cursor: pointer;
+    border: 1px solid #526f82;
+    //overflow: hidden;
+    @media (max-width: 750px) {
+        margin-top: 2px;
+        margin-left: 2px;
+        max-width: 280px;
+    }
+    @media (max-height: 480px) {
+        margin-top: 2px;
+        margin-left: 2px;
+        max-height: 440px;
+    }
+    @media (max-height: 300px) {
+        max-height: 290px;
+    }
+    @media (max-height: 250px) {
+        max-height: 240px;
+    }
 }
 
 .sm-toggle-btn {
-  @extend .sm-btn;
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  box-sizing: border-box;
-  // border-radius: 4px;
-  background: transparent;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media (max-width: 750px) {
-    width: 35px;
-    height: 35px;
-  }
-
-  @media (max-height: 480px) {
-    width: 35px;
-    height: 35px;
-  }
-
-  @media (max-height: 300px) {
-    width: 30px;
-    height: 30px;
-  }
+    @extend .sm-btn;
+    position: absolute;
+    width: 40px;
+    height: 40px;
+    box-sizing: border-box;
+    // border-radius: 4px;
+    background: transparent;
+    z-index: 100;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    @media (max-width: 750px) {
+        width: 35px;
+        height: 35px;
+    }
+    @media (max-height: 480px) {
+        width: 35px;
+        height: 35px;
+    }
+    @media (max-height: 300px) {
+        width: 30px;
+        height: 30px;
+    }
 }
 
 .sm-toggle-btn-only {
-  background-color: rgba(38, 38, 38, 0.75);
+    background-color: rgba(38, 38, 38, 0.75);
 }
 
 .sm-content {
-  overflow: hidden;
-  transform-origin: top left;
-  background-color: rgba(38, 38, 38, 0.75);
-  transition: transform 0.6s ease;
+    overflow: hidden;
+    transform-origin: top left;
+    background-color: rgba(38, 38, 38, 0.75);
+    transition: transform 0.6s ease;
 }
 
 .sm-content-hidden {
-  transform: scale(0, 0);
+    transform: scale(0, 0);
 }
 
 // 关闭按钮
 .closeBtn {
-  // float: right;
-  position: absolute;
-  top: 0;
-  right: 0;
-  color: #ffffff;
-  border: none;
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  line-height: 20px;
-  background-color: rgba(34, 67, 70, 0.75);
-  padding: 0px;
-  // display: inline-block;
-  text-align: center;
+    // float: right;
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: #ffffff;
+    border: none;
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
+    background-color: rgba(34, 67, 70, 0.75);
+    padding: 0px;
+    // display: inline-block;
+    text-align: center;
 }
 
 .closeBtn:hover {
-  background-color: #336968
+    background-color: #336968
 }
 
 .sm-panel-header {
-  // height: 40px;
-  line-height: 40px;
-  padding-left: 15px;
-  font-size: 15px;
-  border-bottom: 1px solid rgba(38, 38, 38, 0.6);
-
-  @media (max-width: 750px) {
-    // height: 35px;
-    line-height: 35px;
-    padding-left: 10px;
-    font-size: 13px;
-  }
-
-  @media (max-height: 480px) {
-    // height: 35px;
-    line-height: 35px;
-    padding-left: 5px;
-    font-size: 13px;
-  }
-
-  @media (max-height: 300px) {
-    // height: 30px;
-    line-height: 30px;
-    padding-left: 0px;
-    font-size: 12px;
-  }
+    // height: 40px;
+    line-height: 40px;
+    padding-left: 15px;
+    font-size: 15px;
+    border-bottom: 1px solid rgba(38, 38, 38, 0.6);
+    @media (max-width: 750px) {
+        // height: 35px;
+        line-height: 35px;
+        padding-left: 10px;
+        font-size: 13px;
+    }
+    @media (max-height: 480px) {
+        // height: 35px;
+        line-height: 35px;
+        padding-left: 5px;
+        font-size: 13px;
+    }
+    @media (max-height: 300px) {
+        // height: 30px;
+        line-height: 30px;
+        padding-left: 0px;
+        font-size: 12px;
+    }
 }
 
 .sm-function-module-content {
-  margin: 0.5rem 1rem 1rem 1rem;
-  padding: 5px 10px;
-  overflow: auto;
-  max-height: 528px;
-  background-color: rgba(23, 23, 23, 0.5);
-  scrollbar-width: none;
-  /* firefox */
-  -ms-overflow-style: none;
-
-  /* IE 10+ */
-  @media (max-width: 1000px) {
-    margin: 0.8rem 0;
-    padding: 0 15px;
-  }
-
-  @media (max-width: 750px) {
-    margin: 0.5rem 0;
-    padding: 0 10px;
-    max-height: 410px;
-  }
-
-  @media (max-height: 480px) {
-    margin: 0.5rem 0;
-    padding: 0 15px;
-    max-height: 420px;
-    max-width: 280px;
-  }
-
-  @media (max-height: 300px) {
-    margin: 0.5rem 0;
-    padding: 0 10px;
-    max-height: 280px;
-    max-width: 250px;
-  }
-
-  @media (max-height: 250px) {
-    max-height: 240px;
-  }
+    margin: 0.5rem 1rem 1rem 1rem;
+    padding: 5px 10px;
+    overflow: auto;
+    max-height: 528px;
+    background-color: rgba(23, 23, 23, 0.5);
+    scrollbar-width: none;
+    /* firefox */
+    -ms-overflow-style: none;
+    /* IE 10+ */
+    @media (max-width: 1000px) {
+        margin: 0.8rem 0;
+        padding: 0 15px;
+    }
+    @media (max-width: 750px) {
+        margin: 0.5rem 0;
+        padding: 0 10px;
+        max-height: 410px;
+    }
+    @media (max-height: 480px) {
+        margin: 0.5rem 0;
+        padding: 0 15px;
+        max-height: 420px;
+        max-width: 280px;
+    }
+    @media (max-height: 300px) {
+        margin: 0.5rem 0;
+        padding: 0 10px;
+        max-height: 280px;
+        max-width: 250px;
+    }
+    @media (max-height: 250px) {
+        max-height: 240px;
+    }
 }
+
 .sm-function-module-content::-webkit-scrollbar {
-  display: none;
-  /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
 
 .sm-function-module-sub-section {
-  margin-bottom: 18px;
-  overflow: hidden;
-
-  @media (max-width: 1000px) {
-    margin-bottom: 1px;
-  }
-
-  @media (max-height: 480px) {
-    margin-bottom: 1px;
-  }
-
-  @media (max-height: 300px) {
-    margin-bottom: 0px;
-  }
+    margin-bottom: 18px;
+    overflow: hidden;
+    @media (max-width: 1000px) {
+        margin-bottom: 1px;
+    }
+    @media (max-height: 480px) {
+        margin-bottom: 1px;
+    }
+    @media (max-height: 300px) {
+        margin-bottom: 0px;
+    }
 }
 
 .sm-function-module-sub-section-setting {
-  // font-size: 13px;
-  margin: 0 0 8px 0;
-  padding: 0;
+    // font-size: 13px;
+    margin: 0 0 8px 0;
+    padding: 0;
 }
 
 .sm-function-module-sub-section-caption {
-  margin: 0 0 8px 0;
-  padding: 0;
-
-  @media (max-height: 480px) {
-    margin: 0 0 2px 0;
-  }
+    margin: 0 0 8px 0;
+    padding: 0;
+    @media (max-height: 480px) {
+        margin: 0 0 2px 0;
+    }
 }
 
 .sm-function-module-btn-highlight {
-  color: #009c95;
-  border: 1px solid #009c95;
+    color: #009c95;
+    border: 1px solid #009c95;
 }
 
-
 label {
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.8;
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-
-  @media (max-width: 1000px) {
-    font-size: 12px;
-  }
-
-  @media (max-width: 750px) {
-    font-size: 10px;
-  }
-
-  @media (max-height: 480px) {
-    font-size: 12px;
-  }
-
-  @media (max-height: 300px) {
-    font-size: 10px;
-  }
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1.8;
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    @media (max-width: 1000px) {
+        font-size: 12px;
+    }
+    @media (max-width: 750px) {
+        font-size: 10px;
+    }
+    @media (max-height: 480px) {
+        font-size: 12px;
+    }
+    @media (max-height: 300px) {
+        font-size: 10px;
+    }
 }
 
 .sm-half {
-  /* 用于功能面板一行放两个控件 */
-  width: 50%;
-  float: left;
-  margin: 0;
-  padding: 0;
-  border: none;
+    /* 用于功能面板一行放两个控件 */
+    width: 50%;
+    float: left;
+    margin: 0;
+    padding: 0;
+    border: none;
 }
 
 .sm-input {
-  height: 25px;
-  color: lightgray;
-  background-color: #333;
-  border: 1px solid #686363;
-  padding: 0px 3px;
+    height: 25px;
+    color: lightgray;
+    background-color: #333;
+    border: 1px solid #686363;
+    padding: 0px 3px;
 }
 
 .sm-input-right {
-  @extend .sm-input;
-  float: right;
-  width: 50%;
+    @extend .sm-input;
+    float: right;
+    width: 50%;
 }
 
 .sm-solider-input-box {
-  float: right;
-  width: 65%;
-
-  @media (max-width: 750px) {
-    width: 61%;
-  }
-
-  @media (max-height: 480px) {
-    width: 61%;
-  }
+    float: right;
+    width: 65%;
+    @media (max-width: 750px) {
+        width: 61%;
+    }
+    @media (max-height: 480px) {
+        width: 61%;
+    }
 }
 
 .sm-solider-input-box:after {
-  /*伪元素是行内元素 正常浏览器清除浮动方法*/
-  content: "";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
+    /*伪元素是行内元素 正常浏览器清除浮动方法*/
+    content: "";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }
 
 .sm-input-long {
-  @extend .sm-input;
-  float: right;
-  width: 40%;
+    @extend .sm-input;
+    float: right;
+    width: 40%;
 }
 
 .sm-point {
-  width: 5px;
-  height: 5px;
-  display: inline-block;
-  background-color: #3C8DBC;
-  border-radius: 50%;
-  margin-bottom: 2px;
+    width: 5px;
+    height: 5px;
+    display: inline-block;
+    background-color: #3C8DBC;
+    border-radius: 50%;
+    margin-bottom: 2px;
 }
 
-
 .sm-colorpicker {
-  float: right;
-  height: 12px;
-  width: 50%;
+    float: right;
+    height: 12px;
+    width: 50%;
 }
 
-
 .sm-select {
-  width: 50%;
-  height: 25px;
-  color: lightgray;
-  background-color: #333;
-  border: 1px solid #686363;
-  padding: 0 3px;
-  font-size: 12px;
-  float: right;
-
-  @media (max-width: 750px) {
-    font-size: 12px;
-    height: 21px;
-  }
-
-  @media (max-height: 480px) {
-    height: 21px;
+    width: 50%;
+    height: 25px;
+    color: lightgray;
+    background-color: #333;
+    border: 1px solid #686363;
+    padding: 0 3px;
     font-size: 12px;
-  }
+    float: right;
+    @media (max-width: 750px) {
+        font-size: 12px;
+        height: 21px;
+    }
+    @media (max-height: 480px) {
+        height: 21px;
+        font-size: 12px;
+    }
 }
 
 .sm-select-s {
-  width: 65%;
-
-  @media (max-width: 750px) {
-    width: 64%;
-  }
-
-  @media (max-height: 480px) {
-    width: 61%;
-  }
+    width: 65%;
+    @media (max-width: 750px) {
+        width: 64%;
+    }
+    @media (max-height: 480px) {
+        width: 61%;
+    }
 }
 
 .sm-select:after {
-  content: '';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-top: 6px solid #ffffff;
-  position: relative;
-  top: 4px;
-  left: 80px;
-  @media (max-width: 750px) {
-    display:none
-  }
-
-  @media (max-height: 480px) {
-    display:none
-  }
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border: 5px solid transparent;
+    border-top: 6px solid #ffffff;
+    position: relative;
+    top: 4px;
+    left: 80px;
+    @media (max-width: 750px) {
+        display: none
+    }
+    @media (max-height: 480px) {
+        display: none
+    }
 }
 
 .sm-select-color {
-  width: 66%;
-  position: relative;
-
-
-  @media (max-width: 1000px) {
-    width: 65%;
-  }
-  @media (max-width: 750px) {
-    width: 60%;
-  }
-  @media (max-height: 480px) {
-    width: 60%;
-  }
- 
+    width: 66%;
+    position: relative;
+    @media (max-width: 1000px) {
+        width: 65%;
+    }
+    @media (max-width: 750px) {
+        width: 60%;
+    }
+    @media (max-height: 480px) {
+        width: 60%;
+    }
 }
 
 html,
 body,
 #app {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  color: #eee;
-  position: absolute;
-  top: 0;
-  left: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    color: #eee;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
+
 /*--------tooltip----------------*/
+
 .twipsy {
-  display: block;
-  position: absolute;
-  visibility: visible;
-  max-width: 300px;
-  min-width: 100px;
-  padding: 5px;
-  font-size: 11px;
-  z-index: 1000;
-  opacity: 0.8;
-  -khtml-opacity: 0.8;
-  -moz-opacity: 0.8;
-  filter: alpha(opacity=80);
+    display: block;
+    position: absolute;
+    visibility: visible;
+    max-width: 300px;
+    min-width: 100px;
+    padding: 5px;
+    font-size: 11px;
+    z-index: 1000;
+    opacity: 0.8;
+    -khtml-opacity: 0.8;
+    -moz-opacity: 0.8;
+    filter: alpha(opacity=80);
 }
 
 .twipsy.left .twipsy-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-left: 5px solid #000000;
+    top: 50%;
+    right: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 5px solid #000000;
 }
 
 .twipsy.right .twipsy-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-top: 5px solid transparent;
-  border-bottom: 5px solid transparent;
-  border-right: 5px solid #000000;
+    top: 50%;
+    left: 0;
+    margin-top: -5px;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-right: 5px solid #000000;
 }
 
 .twipsy-inner {
-  padding: 3px 8px;
-  background-color: #000000;
-  color: white;
-  text-align: center;
-  max-width: 300px;
-  text-decoration: none;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+    padding: 3px 8px;
+    background-color: #000000;
+    color: white;
+    text-align: center;
+    max-width: 300px;
+    text-decoration: none;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
 }
 
 .twipsy-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
 }
 
+
 /*--------tooltip end------------*/
 
+
 /*--------地形裁剪补充 str-----------*/
+
+
 /*小标题*/
+
 //.label-container{
 //  display: flex;
 //  flex-direction: row;
@@ -483,379 +453,383 @@ body,
 //  margin-bottom: 7px;
 //}
 input:focus {
-  outline: none;
+    outline: none;
 }
 
 ;
-
 select:focus {
-  outline: none;
+    outline: none;
 }
 
 ;
-
 button:focus {
-  // border: none;
-  background-color: rgba(121, 120, 120, 0.5);
-  outline: none; //消除默认点击蓝色边框效果
+    // border: none;
+    background-color: rgba(121, 120, 120, 0.5);
+    outline: none; //消除默认点击蓝色边框效果
 }
 
 input[type="checkbox"] {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  display: inline-block;
-  text-align: center;
-  vertical-align: middle;
-  line-height: 12px;
-  border-radius: 2px;
-  /*color: #3C8DBC;*/
-  border: 1px solid #3C8DBC;
-  margin: 0;
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 12px;
+    border-radius: 2px;
+    /*color: #3C8DBC;*/
+    border: 1px solid #3C8DBC;
+    margin: 0;
 }
 
 input[type="checkbox"]:checked::before {
-  content: "\2713";
-  border-color: #3C8DBC;
-  color: #3C8DBC;
+    content: "\2713";
+    border-color: #3C8DBC;
+    color: #3C8DBC;
 }
 
 .min-input {
-  width: 110px;
-  height: 26px;
-  background: rgba(51, 51, 51, 1);
-  border: 1px solid rgba(60, 141, 188, 1);
-  border-radius: 4px;
-  color: #ffffff;
-  padding-left: 10px;
-  opacity: 0.8;
-
-  @media (max-width: 750px) {
-    width: 102px;
-  }
-
-  @media (max-height: 480px) {
-    width: 102px;
-  }
-
-  @media (max-height: 300px) {
-    width: 75px;
-  }
+    width: 110px;
+    height: 26px;
+    background: rgba(51, 51, 51, 1);
+    border: 1px solid rgba(60, 141, 188, 1);
+    border-radius: 4px;
+    color: #ffffff;
+    padding-left: 10px;
+    opacity: 0.8;
+    @media (max-width: 750px) {
+        width: 102px;
+    }
+    @media (max-height: 480px) {
+        width: 102px;
+    }
+    @media (max-height: 300px) {
+        width: 75px;
+    }
 }
 
 //分析按钮盒子
 .boxchild {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
-  padding: 5px 0 5px 10px;
-
-  @media (max-width: 750px) {
-    margin-top: 5px;
-    padding: 3px 0 3px 5px;
-    font-size: 12px;
-  }
-
-  @media (max-height: 480px) {
-    margin-top: 5px;
-    padding: 3px 0 3px 5px;
-    font-size: 12px;
-  }
-
-  @media (max-height: 300px) {
-    margin-top: 2px;
-    padding: 2px 0 2px 4px;
-    font-size: 10px;
-  }
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    padding: 5px 0 5px 10px;
+    @media (max-width: 750px) {
+        margin-top: 5px;
+        padding: 3px 0 3px 5px;
+        font-size: 12px;
+    }
+    @media (max-height: 480px) {
+        margin-top: 5px;
+        padding: 3px 0 3px 5px;
+        font-size: 12px;
+    }
+    @media (max-height: 300px) {
+        margin-top: 2px;
+        padding: 2px 0 2px 4px;
+        font-size: 10px;
+    }
 }
 
 //切换组件选中颜色和标题
 .titleColor {
-  color: #009c95;
-  cursor: default;
-  border-bottom: 1px solid #009c95;
-  font-weight: bold;
+    color: #009c95;
+    cursor: default;
+    border-bottom: 1px solid #009c95;
+    font-weight: bold;
 }
 
 .title-txt {
-  display: inline-block;
-  font-size: 15px;
-  padding: 2px;
-  margin-right: 5px;
-
-  @media (max-width: 1000px) {
-    font-size: 14px;
-  }
-
-  @media (max-width: 750px) {
-    font-size: 12px;
-  }
-
-  @media (max-height: 480px) {
-    font-size: 12px;
-  }
-
-  @media (max-height: 300px) {
-    font-size: 11px;
-  }
+    display: inline-block;
+    font-size: 15px;
+    padding: 2px;
+    margin-right: 5px;
+    @media (max-width: 1000px) {
+        font-size: 14px;
+    }
+    @media (max-width: 750px) {
+        font-size: 12px;
+    }
+    @media (max-height: 480px) {
+        font-size: 12px;
+    }
+    @media (max-height: 300px) {
+        font-size: 11px;
+    }
 }
 
 //滑块
-
-input[type = "range" ]::-webkit-slider-thumb {
-  -webkit-appearance: none;
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
 }
 
-input[type = "range" ]::-moz-range-thumb {
-  -webkit-appearance: none;
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
 }
 
 .min-solider {
-  background: rgba(51, 51, 51, 1);
-  border: 1px solid rgba(60, 141, 188, 1);
-  color: #ffffff;
-  opacity: 0.6;
-  vertical-align: middle;
-
-  @media (max-width: 750px) {
-    width: 63%
-  }
-
-  @media (max-height: 480px) {
-    width: 63%;
-  }
-
-  @media (max-height: 300px) {
-    width: 62%;
-  }
+    background: rgba(51, 51, 51, 1);
+    border: 1px solid rgba(60, 141, 188, 1);
+    color: #ffffff;
+    opacity: 0.6;
+    vertical-align: middle;
+    @media (max-width: 750px) {
+        width: 63%
+    }
+    @media (max-height: 480px) {
+        width: 63%;
+    }
+    @media (max-height: 300px) {
+        width: 62%;
+    }
 }
 
 //坡度坡向颜色带
 .color-select {
-  display: flex;
-  flex-wrap: wrap;
-  position: absolute;
-  justify-content: center;
-  width: 48%;
-  background-color: rgba(42, 42, 42, 1);
-  right: 53px;
-  z-index: 1000;
-  border: 1px solid rgba(60, 141, 188, 1);
-  @media (max-width: 1000px) {
-    right: 43px;
-    width: 50%;
-  }
-  @media (max-width: 750px) {
-    right: 10px;
-    width: 56%;
-  }
-
-  @media (max-height: 480px) {
-    right: 10px;
-    width: 56%;
-  }
+    display: flex;
+    flex-wrap: wrap;
+    position: absolute;
+    justify-content: center;
+    width: 48%;
+    background-color: rgba(42, 42, 42, 1);
+    right: 53px;
+    z-index: 1000;
+    border: 1px solid rgba(60, 141, 188, 1);
+    @media (max-width: 1000px) {
+        right: 43px;
+        width: 50%;
+    }
+    @media (max-width: 750px) {
+        right: 10px;
+        width: 56%;
+    }
+    @media (max-height: 480px) {
+        right: 10px;
+        width: 56%;
+    }
 }
 
 .ban {
-  margin-bottom: 3px;
+    margin-bottom: 3px;
 }
 
 .ban:hover {
-  border: 1px solid red;
+    border: 1px solid red;
 }
 
 .band1 {
-  background: -webkit-linear-gradient(left, #95e8f9, #002794) !important;
+    background: -webkit-linear-gradient(left, #95e8f9, #002794) !important;
 }
 
 .band2 {
-  background: -webkit-linear-gradient(left, #a2fbc2, #ff6767) !important;
+    background: -webkit-linear-gradient(left, #a2fbc2, #ff6767) !important;
 }
 
 .band3 {
-  background: -webkit-linear-gradient(left, #e6c6ff, #9d00ff) !important;
+    background: -webkit-linear-gradient(left, #e6c6ff, #9d00ff) !important;
 }
 
 .band4 {
-  background: -webkit-linear-gradient(left, #0909d4, #00a1ff 20%, #14bb12 40%, #dde007 60%, #d20f0f) !important;
+    background: -webkit-linear-gradient(left, #0909d4, #00a1ff 20%, #14bb12 40%, #dde007 60%, #d20f0f) !important;
 }
 
 .band5 {
-  background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
+    background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
 }
 
 .band5 {
-  background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
+    background: -webkit-linear-gradient(left, #baffe5, #1ab99c) !important;
 }
 
 .band6 {
-  background: -webkit-linear-gradient(left, #93f602, #2fac01, #74cb01, #d0ef01, #e1ce01, #e16a01, #f70701) !important;
+    background: -webkit-linear-gradient(left, #93f602, #2fac01, #74cb01, #d0ef01, #e1ce01, #e16a01, #f70701) !important;
 }
 
 .label {
-  display: inline;
-  padding: 0.4em 4em .01em 6em;
-  font-size: 110%;
-  color: #fff;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-  line-height: 1.1;
-  @media (max-width: 750px) {
-    padding: 0.4em 5.6em .01em 4em;
-  }
-
-  @media (max-height: 480px) {
-    padding: 0.4em 5.6em .01em 4em;
-  }
-  @media (max-height: 300px) {
-    padding: 0.4em 4.6em .01em 4em;
-  }
+    display: inline;
+    padding: 0.4em 4em .01em 6em;
+    font-size: 110%;
+    color: #fff;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25em;
+    line-height: 1.1;
+    @media (max-width: 750px) {
+        padding: 0.4em 5.6em .01em 4em;
+    }
+    @media (max-height: 480px) {
+        padding: 0.4em 5.6em .01em 4em;
+    }
+    @media (max-height: 300px) {
+        padding: 0.4em 4.6em .01em 4em;
+    }
 }
 
 //分析清除按钮
-
 .tbtn {
-  font-weight: 400;
-  background-color: rgba(42, 42, 42, 1);
-  margin-left: 5px;
-  border-radius: 4px;
-  color: darkgrey;
-  border: 1px solid #686363;
-  height: 26px;
-  width: 56px;
-  font-size: 13px;
-  overflow: hidden;
-  @media (max-width: 750px) {
-    height: 22px;
-    width: 50px;
-  }
-
-  @media (max-height: 480px) {
-    height: 20px;
-    width: 50px;
-  }
-
-  @media (max-height: 300px) {
-    height: 20px;
-    width: 45px;
-  }
+    font-weight: 400;
+    background-color: rgba(42, 42, 42, 1);
+    margin-left: 5px;
+    border-radius: 4px;
+    color: darkgrey;
+    border: 1px solid #686363;
+    height: 26px;
+    width: 56px;
+    font-size: 13px;
+    overflow: hidden;
+    @media (max-width: 750px) {
+        height: 22px;
+        width: 50px;
+    }
+    @media (max-height: 480px) {
+        height: 20px;
+        width: 50px;
+    }
+    @media (max-height: 300px) {
+        height: 20px;
+        width: 45px;
+    }
 }
 
 .tbn1 {
-  color: #009c95;
-  border: 1px solid #009c95;
+    color: #009c95;
+    border: 1px solid #009c95;
 }
 
 .media-hidden {
-
-  //缩小屏幕时隐藏
-  @media (max-width: 750px) {
-    display: none;
-  }
-
-  @media (max-height: 480px) {
-    display: none;
-  }
+    //缩小屏幕时隐藏
+    @media (max-width: 750px) {
+        display: none;
+    }
+    @media (max-height: 480px) {
+        display: none;
+    }
 }
 
 // 卷帘
 #verticalSlider {
-  position: absolute;
-  left: 50%;
-  top: 0;
-  background-color: #D3D3D3;
-  width: 5px;
-  height: 100%;
-  cursor: ew-resize;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    background-color: #D3D3D3;
+    width: 5px;
+    height: 100%;
+    cursor: ew-resize;
 }
 
 #horizontalSlider {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  background-color: #D3D3D3;
-  width: 100%;
-  height: 5px;
-  cursor: ns-resize;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    background-color: #D3D3D3;
+    width: 100%;
+    height: 5px;
+    cursor: ns-resize;
 }
 
 //@at-root
 .symbolicLibrary {
-  display: flex;
-  justify-content: flex-start;
-  // background-color: rgba(37, 33, 33,0.8);
-  padding: 5px;
-  border: 1px solid rgb(58, 150, 78);
-  margin-bottom: 18px;
-  flex-wrap: wrap;
-  .Thematicbox {
-      width: 40px;
-      height: 45px;
-      // background-color: #fff;
-      margin-right: 2rem;
-      font-size: 12px;
-      // color: cl;
-      text-align: center;
-      .minbox {
-          width: 30px;
-          height: 30px;
-          margin: 0 auto;
-          line-height: 29px;
-      }
-      .iconfont {
-          font-size: 24px;
-      }
-  }
-  .lightSelected {
-      color: rgb(58, 150, 78);
-  }
+    display: flex;
+    justify-content: flex-start;
+    // background-color: rgba(37, 33, 33,0.8);
+    padding: 5px;
+    border: 1px solid rgb(58, 150, 78);
+    margin-bottom: 18px;
+    flex-wrap: wrap;
+    .Thematicbox {
+        width: 40px;
+        height: 45px;
+        // background-color: #fff;
+        margin-right: 2rem;
+        font-size: 12px;
+        // color: cl;
+        text-align: center;
+        .minbox {
+            width: 30px;
+            height: 30px;
+            margin: 0 auto;
+            line-height: 29px;
+        }
+        .iconfont {
+            font-size: 24px;
+        }
+    }
+    .lightSelected {
+        color: rgb(58, 150, 78);
+    }
 }
+
 .symbolicLibrary::-webkit-scrollbar {
-  display: none;
-  /* Chrome Safari */
+    display: none;
+    /* Chrome Safari */
 }
 
 .ParticleSystem {
-  .sm-function-module-sub-section {
-      margin-bottom: 0;
-      .sm-solider-input-box,
-      .sm-select {
-          width: 68%;
-      }
-  }
+    .sm-function-module-sub-section {
+        margin-bottom: 0;
+        .sm-solider-input-box,
+        .sm-select {
+            width: 68%;
+        }
+    }
 }
+
 .flexbox {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  margin-bottom: 10px;
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    margin-bottom: 10px;
     @media (max-width: 750px) {
-      margin-bottom: 2px;
+        margin-bottom: 2px;
     }
-  
     @media (max-height: 480px) {
-      margin-bottom: 2px;
+        margin-bottom: 2px;
+    }
+    button {
+        background-color: #333;
+        color: white;
     }
-  button {
-      background-color: #333;
-      color: white;
-  }
 }
 
 .flybox {
-  display: flex;
-  justify-content: space-between;
-  // background-color: rgba(37, 33, 33,0.8);
-  padding: 5px;
-  // border: 1px solid rgb(58, 150, 78);
-  margin: 10px 0;
-  .imgbox {
-      width: 40px;
-      height: 40px;
-  }
-  .imgbox:hover {
-      background-color: #127bab;
-  }
+    display: flex;
+    justify-content: space-between;
+    // background-color: rgba(37, 33, 33,0.8);
+    padding: 5px;
+    // border: 1px solid rgb(58, 150, 78);
+    margin: 10px 0;
+    .imgbox {
+        width: 40px;
+        height: 40px;
+    }
+    .imgbox:hover {
+        background-color: #127bab;
+    }
+}
+
+
+/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
+
+body::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+
+/* 滚动条里面小方块 */
+
+body::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(85, 229, 38, 0.71);
+}
+
+
+/* 滚动条里面轨道 */
+
+body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #2a4fd1b3;
 }

src/components/Cockpit/index.js

@@ -0,0 +1,2 @@
+import smCockpit from './smCockpit.vue';
+export default smCockpit;

src/components/Cockpit/smCockpit.scss

@@ -0,0 +1,23 @@
+#cesiumContainer {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.cesium-viewer-timelineContainer {
+    position: absolute;
+    bottom: 0;
+    left: 169px;
+    right: 29px;
+    height: 27px;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-size: 14px;
+}
+
+.cesium-credit-logoContainer {
+    display: none !important;
+}

src/components/Cockpit/smCockpit.vue

@@ -0,0 +1,179 @@
+<template>
+  <div id="cesiumContainer" ref="viewer">
+    <tool-bar></tool-bar>
+    <compass></compass>
+    <china-epidemic-map></china-epidemic-map>
+    <world-epidemic-map></world-epidemic-map>
+  </div>
+</template>
+
+<script>
+import Config from "@/common/js/webServeConfig.js";
+export default {
+  name: "sm-cockpit",
+  props: {
+    combination: {
+      //组合接口
+      type: Boolean,
+    },
+    sceneUrl: {
+      //场景接口
+      type: String,
+    },
+    s3mScps: {
+      //s3m图层接口
+      type: Array,
+    },
+    collapsed: {
+      //是否折叠
+      type: Boolean,
+    },
+  },
+  data() {
+    return {
+      sharedState: store.state,
+    };
+  },
+  computed: {
+    isInitViewer: function () {
+      return this.sharedState.isInitViewer;
+    },
+  },
+  methods: {
+    init() {
+      //初始化viewer
+      if (window.viewer) {
+        return;
+      }
+      let viewer;
+      let isPCBroswer = (window.isPCBroswer =
+        Cesium.FeatureDetection.isPCBroswer());
+      if (isPCBroswer) {
+        viewer = new Cesium.Viewer("cesiumContainer", {
+          imageryProvider: new Cesium.TileMapServiceImageryProvider({
+            url: Cesium.buildModuleUrl(
+              "/static/Cesium/Assets/Textures/NaturalEarthII"
+            ),
+          }),
+          selectionIndicator: false,
+          timeline: false,
+          baseLayerPicker: false,
+          homeButton: false,
+          //shadows: true,
+          infoBox: false,
+          geocoder: false,
+          // skyBox: false, // 关闭天空盒会一同关闭太阳，场景会变暗
+          navigation: true,
+          contextOptions: {
+            requestWebgl2: true,
+          },
+        });
+        viewer.scene.globe.enableLighting = true;
+        // document.getElementsByClassName(
+        //   "cesium-viewer-timelineContainer"
+        // )[0].style.visibility = "hidden"; //隐藏时间线控件
+      } else {
+        viewer = new Cesium.Viewer("cesiumContainer", {
+          selectionIndicator: false,
+          infoBox: false,
+          imageryProvider: new Cesium.TileMapServiceImageryProvider({
+            url: Cesium.buildModuleUrl(
+              "/static/Cesium/Assets/Textures/NaturalEarthII"
+            ),
+          }),
+          homeButton: false,
+          skyBox: true,
+          navigation: true,
+          contextOptions: {
+            requestWebgl2: true,
+          },
+        });
+        let scene = viewer.scene;
+        if (Cesium.defined(scene.sun)) {
+          scene.globe.enableLighting = false;
+        }
+        if (Cesium.defined(scene.moon)) {
+          scene.moon.show = false;
+        }
+        document.documentElement.style.height = window.innerHeight + "px";
+        document.addEventListener(
+          "touchmove",
+          function (e) {
+            e.preventDefault();
+          },
+          false
+        );
+        store.setCompass(false); //关闭罗盘等
+      }
+      viewer.scene.lightSource.ambientLightColor = new Cesium.Color(
+        0.65,
+        0.65,
+        0.65,
+        1
+      );
+      viewer.scene.globe.enableLighting = true;
+
+      if (Config.baseImgLayer) {
+        viewer.imageryLayers.addImageryProvider(
+          new Cesium.SuperMapImageryProvider({
+            url: Config.baseImgLayer,
+          })
+        );
+      }
+      viewer.scene.debugShowFramesPerSecond = false;
+      window.viewer = viewer;
+      window.scene = viewer.scene;
+      let widget = viewer.cesiumWidget;
+      // iEarth进行初始化设置
+      viewer.scene.globe.depthTestAgainstTerrain = true;
+      viewer.scene.globe.baseColor = Cesium.Color.BLACK; // 没有影像图层时地球的底色
+      if (viewer.geocoder) {
+        // 请开发者自行到supermap online官网（http://www.supermapol.com/）申请key
+        viewer.geocoder.viewModel.geoKey = "fvV2osxwuZWlY0wJb8FEb2i5";
+        document.querySelector(".cesium-geocoder-input").placeholder =
+          Resource.searchPlaceHolder;
+      }
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          Config.mapview[0],
+          Config.mapview[1],
+          Config.mapview[2]
+        ), //海南经纬度
+        orientation: {
+          heading: 0,
+          pitch: -0.7672,
+          roll: 0,
+        },
+        duration: 0,
+        complete: function () {
+          common.initHandler("Polygon"); //初始化全局常用的画面的drawhandler
+          store.setToolBarShow(true); //显示工具栏
+          document.getElementById("loadingbar").remove(); //移除加载动画
+          // viewer.camera.flyTo({
+          //   destination: new Cesium.Cartesian3.fromDegrees(
+          //     110.60396458865515,
+          //     34.54408834959379,
+          //     30644793.325518917
+          //   ),
+          //   duration: 5,
+          //   complete: function () {
+          //     common.initHandler("Polygon"); //初始化全局常用的画面的drawhandler
+          //     store.setToolBarShow(true); //显示工具栏
+          //   },
+          // });
+          // setTimeout(() => {
+          //   document.getElementById("loadingbar").remove(); //移除加载动画
+          // }, 1000);
+        },
+      });
+      store.setisInitViewer(true); //初始化viewer标志
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss">
+@import "smCockpit";
+</style>

src/components/Combinations/LayerManage/LayerManage.scss

@@ -27,5 +27,40 @@
 
 .layerBox {
     height: 500px;
+    overflow: hidden;
+}
+
+.zyml,
+.tckz {
     overflow-y: auto;
+    overflow-x: hidden;
+    height: 460px;
+}
+
+.listBtn {
+    position: absolute;
+    right: 10px;
+}
+
+.opBtn {
+    cursor: pointer;
+}
+
+.ivu-list-item {
+    color: white !important;
+}
+
+.sliderBtn {
+    width: 200px;
+    height: 3px;
+    right: 8px;
+    position: absolute;
+}
+
+.ivu-tabs-nav {
+    color: white !important;
+}
+
+.ivu-tabs-bar {
+    margin-bottom: 5px !important;
 }

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,37 +1,94 @@
 <template>
   <div class="layerBox" v-if="LayerManageShow">
-    <Tree
-      :data="TreeDatas"
-      show-checkbox
-      expand-node
-      @on-contextmenu="handleContextMenu"
-      @on-select-change="handleSelectChange"
-      @on-check-change="handleCheckChange"
-      :title="Resource.RightClickSetLayerProperties"
-    >
-      <template slot="contextMenu">
-        <DropdownItem @click.native="handleContextMenuEdit" v-show="hid">{{
-          Resource.layerOptions
-        }}</DropdownItem>
-        <DropdownItem @click.native="raise" v-show="ImgHid">{{
-          Resource.MoveUpOneLevel
-        }}</DropdownItem>
-        <DropdownItem @click.native="lower" v-show="ImgHid">{{
-          Resource.MoveDownOneLevel
-        }}</DropdownItem>
-        <DropdownItem @click.native="raiseToTop" v-show="ImgHid">{{
-          Resource.MoveToTheTop
-        }}</DropdownItem>
-        <DropdownItem @click.native="lowerToBottom" v-show="ImgHid">{{
-          Resource.MoveToTheBottom
-        }}</DropdownItem>
-        <DropdownItem
-          @click.native="handleContextMenuDelete"
-          style="color: #ed4014"
-          >{{ Resource.DelLayer }}</DropdownItem
-        >
-      </template>
-    </Tree>
+    <Tabs value="">
+      <TabPane label="资源目录" name="zyml">
+        <div class="zyml">
+          <Tree
+            :data="TreeDatas"
+            show-checkbox
+            expand-node
+            @on-contextmenu="handleContextMenu"
+            @on-select-change="handleSelectChange"
+            @on-check-change="handleCheckChange"
+            :title="Resource.RightClickSetLayerProperties"
+          >
+            <template slot="contextMenu">
+              <DropdownItem
+                @click.native="handleContextMenuEdit"
+                v-show="hid"
+                >{{ Resource.layerOptions }}</DropdownItem
+              >
+              <DropdownItem @click.native="raise" v-show="ImgHid">{{
+                Resource.MoveUpOneLevel
+              }}</DropdownItem>
+              <DropdownItem @click.native="lower" v-show="ImgHid">{{
+                Resource.MoveDownOneLevel
+              }}</DropdownItem>
+              <DropdownItem @click.native="raiseToTop" v-show="ImgHid">{{
+                Resource.MoveToTheTop
+              }}</DropdownItem>
+              <DropdownItem @click.native="lowerToBottom" v-show="ImgHid">{{
+                Resource.MoveToTheBottom
+              }}</DropdownItem>
+              <DropdownItem
+                @click.native="handleContextMenuDelete"
+                style="color: #ed4014"
+                >{{ Resource.DelLayer }}</DropdownItem
+              >
+            </template>
+          </Tree>
+        </div>
+      </TabPane>
+      <TabPane label="图层控制" name="tckz">
+        <div class="tckz">
+          <List split size="large">
+            <ListItem v-for="(item, index) in addlayerdata" :key="index">
+              {{ item.title }}
+              <div class="listBtn">
+                <Icon
+                  type="md-arrow-round-up"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  @click="raise(item)"
+                  v-if="
+                    index > 0 && (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                />
+                <Icon
+                  type="md-arrow-round-down"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  @click="lower(item)"
+                  v-if="
+                    index < addlayerdata.length - 1 &&
+                    (item.type == 'Vector' || item.type == 'IMG')
+                  "
+                /><Icon
+                  type="md-locate"
+                  color="green"
+                  size="18"
+                  class="opBtn"
+                  @click="location(item)"
+                />
+                <!-- <Icon type="md-eye" color="green" size="18" class="opBtn" />
+                <Icon type="md-eye-off" color="green" size="18" class="opBtn" /> -->
+              </div>
+              <div class="sliderBtn">
+                <Slider
+                  min="0"
+                  max="100"
+                  step="1"
+                  v-model="item.trans"
+                  @on-change="transSliderChange(item, $event)"
+                ></Slider>
+              </div>
+            </ListItem>
+          </List>
+        </div>
+      </TabPane>
+    </Tabs>
   </div>
 </template>
 
@@ -41,6 +98,7 @@ export default {
   name: "LayerManage",
   data() {
     return {
+      addlayerdata: [],
       sceneLayers: {},
       sharedState: store.state,
       //   flag: false,
@@ -101,6 +159,49 @@ export default {
   },
 
   methods: {
+    transSliderChange(obj, v, a) {
+      if (!v || v == undefined) {
+        return;
+      }
+      let value = v / 100;
+      let imageryLayers = viewer.imageryLayers;
+      switch (obj.type) {
+        case "S3M": //场景
+          if (this.sceneLayers[obj.title]) {
+            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
+              new Cesium.Color(1.0, 1.0, 1.0, value);
+          }
+          break;
+        case "S3MDATA": //scp
+          if (this.sceneLayers[obj.title]) {
+            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
+              new Cesium.Color(1.0, 1.0, 1.0, value);
+          }
+          break;
+        case "IMG": //影像
+          for (let i = 0; i < imageryLayers._layers.length; i++) {
+            let element = imageryLayers._layers[i];
+            if (element._imageryProvider._name == obj.title) {
+              element.alpha = value;
+              break;
+            }
+          }
+          break;
+        case "Vector": //矢量
+          for (let i = 0; i < imageryLayers._layers.length; i++) {
+            let element = imageryLayers._layers[i];
+            if (element._imageryProvider._name == obj.title) {
+              element.alpha = value;
+              break;
+            }
+          }
+          break;
+        case "Terrain": //地形
+          break;
+        default:
+          null;
+      }
+    },
     addS3M(LayerURL) {
       let promiseArray = [];
       promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL));
@@ -110,7 +211,8 @@ export default {
     addTerrain(LayerURL) {
       viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
         url: LayerURL,
-        isSct: true, //地形服务源自SuperMap iServer发布时需设置isSct为true
+        isSct: true,
+        requestVertexNormals: true,
       });
     },
 
@@ -160,6 +262,8 @@ export default {
       } else {
         let imageryLayers = viewer.imageryLayers;
         if (obj.checked) {
+          obj.trans = 100;
+          this.addlayerdata.push(obj);
           switch (obj.type) {
             case "S3M": //场景
               let s = viewer.scene.open(obj.url);
@@ -195,6 +299,12 @@ export default {
               null;
           }
         } else {
+          for (let i = 0; i < this.addlayerdata.length; i++) {
+            if (this.addlayerdata[i].title == obj.title) {
+              this.addlayerdata.splice(i, 1);
+              break;
+            }
+          }
           switch (obj.type) {
             case "S3M": //场景
               if (this.sceneLayers[obj.title]) {
@@ -248,40 +358,7 @@ export default {
         }
       }
     },
-    flyTo(scpName) {
-      let Name;
-      let webName = Config.TitleKeyMap[scpName];
-      if (webName) {
-        Name = webName;
-      } else {
-        Name = scpName;
-      }
-      let cameraParam = Config.CAMERA_PARAM[webName];
-      if (cameraParam) {
-        viewer.scene.camera.flyTo({
-          destination: new Cesium.Cartesian3(
-            cameraParam.Cartesian3.x,
-            cameraParam.Cartesian3.y,
-            cameraParam.Cartesian3.z
-          ),
-          orientation: {
-            heading: cameraParam.heading,
-            pitch: cameraParam.pitch,
-            roll: cameraParam.roll,
-          },
-          duration: 5,
-        });
-        return;
-      } else {
-        var ceterCartesianPosition = layers[0]._position;
-        var boundingSphere = new Cesium.BoundingSphere(
-          ceterCartesianPosition,
-          200
-        );
-        var camera = this.viewer.scene.camera;
-        camera.flyToBoundingSphere(boundingSphere);
-      }
-    },
+
     //获取后台资源目录树结构
     getResourceTree() {
       window
@@ -296,339 +373,84 @@ export default {
           console.log(e);
         });
     },
-    //   获取当前选中图层
-    handleSelectChange2(d, select) {
-      console.log(d);
-      let name = Config.TitleKeyMap[select.title];
-      this.flyTo(name, select);
-    },
-    // 勾选复选框获取图层 --控制显隐
-    handleCheckChange2(d, check) {
-      switch (check.type) {
-        case "ROOT":
-          this.isHideAllLayers(check.checked);
-          break;
-        case "S3M":
-          let ly = viewer.scene.layers.find(check.title);
-          if (check.title == Resource.s3mLayer) {
-            let layers = viewer.scene.layers.layerQueue;
-            layers.forEach((i) => {
-              i._visible = check.checked;
-            });
-            return;
-          }
-          if (ly) {
-            ly._visible = check.checked;
-          }
-          break;
-        case "IMG":
-          let layers = viewer.imageryLayers._layers;
-          if (check.title == Resource.imageryLayer) {
-            layers.forEach((i, index) => {
-              if (index == 0) return;
-              i.show = check.checked;
-            });
-            return;
+
+    //图层定位
+    location(obj) {
+      let imageryLayers = viewer.imageryLayers;
+      switch (obj.type) {
+        case "S3M": //场景
+          if (this.sceneLayers[obj.title]) {
+            viewer.flyTo(this.sceneLayers[obj.title][0][0]);
           }
-          layers[check.id].show = check.checked;
           break;
-        case "TERRAIN":
-          if (!check.checked) {
-            window.terrainProvider = viewer.terrainProvider;
-            viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
-          } else {
-            viewer.terrainProvider = window.terrainProvider;
-          }
+        case "S3MDATA": //scp
+          viewer.flyTo(this.sceneLayers[obj.title][0][0]);
           break;
-        default:
-          null;
-      }
-    },
-
-    //   获取右键点击当前图层
-    handleContextMenu(data) {
-      this.contextData = data;
-      if (data.type == "S3M") {
-        this.hid = true;
-        this.ImgHid = false;
-      } else if (data.type == "IMG") {
-        this.hid = false;
-        this.ImgHid = true;
-      } else {
-        this.hid = false;
-        this.ImgHid = false;
-      }
-    },
-    // 鼠标右键查看图层属性
-    handleContextMenuEdit() {
-      let selectedObj = this.contextData;
-      store.setSelectedLayerName(selectedObj.title);
-      store.setLayerAttributeToolbal(true);
-    },
-    // 鼠标右键删除图层
-    handleContextMenuDelete() {
-      let selectedObj = this.contextData;
-      switch (selectedObj.type) {
-        case "S3M":
-          viewer.scene.layers.remove(selectedObj.title);
-          store.setS3MLayerManage(viewer.scene.layers.layerQueue.length);
-          //   图层加载状态改变，即删除后可加载。
-          let name = Config.TitleKeyMap[selectedObj.title];
-          iEarth_resource_services.content.some((item) => {
-            if (item.sceneName == name) {
-              item.state = 0;
-              return true;
+        case "IMG": //影像
+          for (let i = 0; i < imageryLayers._layers.length; i++) {
+            let element = imageryLayers._layers[i];
+            if (element._imageryProvider._name == obj.title) {
+              viewer.flyTo(element);
+              break;
             }
-          });
+          }
           break;
-        case "IMG":
-          let ly2 = viewer.imageryLayers._layers[selectedObj.id];
-          viewer.imageryLayers.remove(ly2);
-          store.setImgLayerManage(viewer.imageryLayers._layers.length);
-          let name2 = Config.TitleKeyMap[selectedObj.title];
-          iEarth_resource_services.content.some((item) => {
-            if (item.sceneName == name2) {
-              item.state = 0;
-              return true;
+        case "Vector": //矢量
+          for (let i = 0; i < imageryLayers._layers.length; i++) {
+            let element = imageryLayers._layers[i];
+            if (element._imageryProvider._name == obj.title) {
+              viewer.flyTo(element);
+              break;
             }
-          });
+          }
           break;
-        case "TERRAIN":
-          viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
-          window.terrainProvider = null;
-          store.setTerrainLayerManage(viewer.terrainProvider.tablename);
-          let name3 = Config.TitleKeyMap[selectedObj.title];
-          iEarth_resource_services.content.some((item) => {
-            if (item.sceneName == name3) {
-              item.state = 0;
-              return true;
-            }
-          });
+        case "Terrain": //地形
+          viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
+            {}
+          );
           break;
         default:
           null;
       }
     },
-    //判断图层父类是否存在及返回索引
-    judgeIsExist(type) {
-      let d = this.TreeDatas[0].children;
-      let i = false;
-      if (d.length == 0) return i;
-      d.forEach((item, index) => {
-        if (item.type == type) {
-          i = index;
-        }
-      });
-      return i;
-    },
-
-    //记录更新前被隐藏的图层名称
-    hideLayers(nameArr, arr) {
-      if (arr.length == 0) return;
-      nameArr.length = 0; //置空
-      arr.forEach((item) => {
-        if (item.checked == false) {
-          nameArr.push(item.title);
-        }
-      });
-    },
 
-    // updatS3M图层
-    updataS3MLayer() {
-      let _that = this;
-      this.hideLayers(this.hideS3mNames, this.S3MLayersObj.children);
-      if (viewer) {
-        let layers = viewer.scene.layers.layerQueue;
-        let index = this.judgeIsExist("S3M"); //获取图层类型父级下标
-        if (layers.length == 0 && index === false) {
-          return;
-        }
-        if (layers.length == 0 && index !== false) {
-          this.TreeDatas[0].children.splice(index, 1);
-          return;
-        }
-        this.S3MLayersObj.children = [];
-        layers.forEach((layer, index) => {
-          let S3Mlayer = {
-            title: layer._name,
-            checked: true,
-            contextmenu: true,
-            type: "S3M",
-          };
-          if (this.hideS3mNames.includes(layer._name)) {
-            S3Mlayer.checked = false;
-          }
-          this.S3MLayersObj.children.push(S3Mlayer);
-        });
-        if (index !== false) {
-          this.TreeDatas[0].children.splice(index, 1, this.S3MLayersObj);
-          return;
+    //影像图层操作
+    raise(obj) {
+      let imageryLayers = viewer.imageryLayers._layers;
+      // let ly = imageryLayers[this.contextData.id];
+      for (let i = 0; i < imageryLayers.length; i++) {
+        let element = imageryLayers[i];
+        if (element._imageryProvider._name == obj.title) {
+          viewer.imageryLayers.raise(element);
+          break;
         }
-        this.TreeDatas[0].children.push(this.S3MLayersObj);
-      } else {
-        setTimeout(() => {
-          _that.updataS3MLayer();
-        }, 2000);
       }
-    },
-
-    //updatImg
-    updataImgLayers() {
-      let _that = this;
-      this.hideLayers(this.hideImgNames, this.imgLayersObj.children);
-      if (viewer) {
-        let layers = viewer.imageryLayers._layers;
-        let index = this.judgeIsExist("IMG"); //获取图层类型父级下标
-        if (layers.length == 1 && index === false) {
-          return;
-        }
-        if (layers.length == 1 && index !== false) {
-          this.TreeDatas[0].children.splice(index, 1);
-          return;
-        }
-        this.imgLayersObj.children = [];
-        layers.forEach((layer, index) => {
-          // if (index == 0) return;
-          let IMGlayer = {
-            title: "",
-            checked: true,
-            contextmenu: true,
-            type: "IMG",
-            id: index,
-          };
-          if (layer._imageryProvider.tablename) {
-            IMGlayer.title = layer._imageryProvider.tablename;
-          } else {
-            IMGlayer.title = Resource.BaseMapImg;
-          }
-          if (this.hideImgNames.includes(IMGlayer.title)) {
-            IMGlayer.checked = false;
-          }
-          this.imgLayersObj.children.unshift(IMGlayer);
-        });
-        if (index !== false) {
-          this.TreeDatas[0].children.splice(index, 1, this.imgLayersObj);
-          return;
+      for (let i = 0; i < this.addlayerdata.length; i++) {
+        if (this.addlayerdata[i].title == obj.title) {
+          this.addlayerdata = this.moveUp(this.addlayerdata, i);
+          break;
         }
-        this.TreeDatas[0].children.push(this.imgLayersObj);
-      } else {
-        setTimeout(() => {
-          _that.updataImgLayers();
-        }, 2000);
       }
+      // viewer.imageryLayers.raise(ly);
+      // this.updataImgLayers();
     },
-
-    //updatTerrain
-    updataTerrainLayers() {
-      let _that = this;
-      this.hideLayers(this.hideTerrainNames, this.TerrainLayersObj.children);
-      if (viewer) {
-        let layers = viewer.terrainProvider;
-        let index = this.judgeIsExist("TERRAIN"); //获取图层类型父级下标
-        if (!layers.tablename && index === false) {
-          return;
-        }
-        if (!layers.tablename && index !== false) {
-          this.TreeDatas[0].children.splice(index, 1);
-          return;
-        }
-        this.TerrainLayersObj.children = [];
-        let TerrainLayer = {
-          title: layers.tablename,
-          checked: true,
-          contextmenu: true,
-          type: "TERRAIN",
-        };
-        if (this.hideTerrainNames.includes(layers.tablename)) {
-          TerrainLayer.checked = false;
-        }
-        this.TerrainLayersObj.children.push(TerrainLayer);
-        if (index !== false) {
-          this.TreeDatas[0].children.splice(index, 1, this.TerrainLayersObj);
-          return;
+    lower(obj) {
+      let imageryLayers = viewer.imageryLayers._layers;
+      // let ly = imageryLayers[this.contextData.id];
+      for (let i = 0; i < imageryLayers.length; i++) {
+        let element = imageryLayers[i];
+        if (element._imageryProvider._name == obj.title) {
+          viewer.imageryLayers.lower(element);
+          break;
         }
-        this.TreeDatas[0].children.push(this.TerrainLayersObj);
-      } else {
-        setTimeout(() => {
-          _that.updataTerrainLayers();
-        }, 2000);
       }
-    },
-
-    // 相机飞到
-    flyTo(scpName, check) {
-      let cameraParam = Config.CAMERA_PARAM[scpName];
-      if (cameraParam) {
-        viewer.scene.camera.flyTo({
-          destination: new Cesium.Cartesian3(
-            cameraParam.Cartesian3.x,
-            cameraParam.Cartesian3.y,
-            cameraParam.Cartesian3.z
-          ),
-          orientation: {
-            heading: cameraParam.heading,
-            pitch: cameraParam.pitch,
-            roll: cameraParam.roll,
-          },
-          duration: 3,
-        });
-        return;
-      } else {
-        switch (check.type) {
-          case "S3M":
-            let ly = viewer.scene.layers.find(check.title);
-            if (ly) {
-              viewer.flyTo(ly);
-            }
-            break;
-          case "IMG":
-            let layers = viewer.imageryLayers._layers;
-            if (check.id) {
-              viewer.flyTo(layers[check.id]);
-            }
-            break;
-          case "TERRAIN":
-            return;
-            break;
-          default:
-            null;
+      for (let i = 0; i < this.addlayerdata.length; i++) {
+        if (this.addlayerdata[i].title == obj.title) {
+          this.addlayerdata = this.moveDown(this.addlayerdata, i);
+          break;
         }
       }
     },
-
-    //根节点控制显隐
-    isHideAllLayers(f) {
-      if (this.TreeDatas[0].children.length === 0) return;
-      let S3MLayers = viewer.scene.layers.layerQueue;
-      let ImgLayers = viewer.imageryLayers._layers;
-      S3MLayers.forEach((i) => {
-        i._visible = f;
-      });
-      ImgLayers.forEach((i, index) => {
-        if (index == 0) return;
-        i.show = f;
-      });
-      if (!f) {
-        window.terrainProvider = viewer.terrainProvider;
-        viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
-      } else {
-        viewer.terrainProvider = window.terrainProvider;
-      }
-    },
-
-    //影像图层操作
-    raise() {
-      let imageryLayers = viewer.imageryLayers._layers;
-      let ly = imageryLayers[this.contextData.id];
-      viewer.imageryLayers.raise(ly);
-      this.updataImgLayers();
-    },
-    lower() {
-      let imageryLayers = viewer.imageryLayers._layers;
-      let ly = imageryLayers[this.contextData.id];
-      viewer.imageryLayers.lower(ly);
-      this.updataImgLayers();
-    },
     raiseToTop() {
       let imageryLayers = viewer.imageryLayers._layers;
       let ly = imageryLayers[this.contextData.id];
@@ -641,6 +463,24 @@ export default {
       viewer.imageryLayers.lowerToBottom(ly);
       this.updataImgLayers();
     },
+    // 上移操作
+    moveUp(array, index) {
+      if (index > 0 && index < array.length) {
+        let temp = array[index];
+        array[index] = array[index - 1];
+        array[index - 1] = temp;
+      }
+      return array;
+    },
+    // 下移操作
+    moveDown(array, index) {
+      if (index >= 0 && index < array.length - 1) {
+        let temp = array[index];
+        array[index] = array[index + 1];
+        array[index + 1] = temp;
+      }
+      return array;
+    },
   },
 
   mounted() {
@@ -679,6 +519,6 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "./LayerManage.scss";
 </style>

src/components/Combinations/compass/compass.vue

@@ -1,22 +1,30 @@
 <template>
   <div class="compass" v-show="compassShow">
-    <div class="btnCompass" @click="reduceCompass" :title= Resource.compass>
+    <div class="btnCompass" @click="reduceCompass" :title="Resource.compass">
       <span
         id="compass"
         class="iconfont iconiEarth-zhibeizhen-01"
-        style="transform : rotate(-45deg);display : inline-block;"
+        style="transform: rotate(-45deg); display: inline-block"
       ></span>
     </div>
-    <div class="btnCompass" @click="reset" :title= Resource.home>
+    <div class="btnCompass" @click="reset" :title="Resource.home">
       <span id="compass" class="iconfont iconiEarth-zhuyemian-01"></span>
     </div>
-    <div class="btnCompass" @click="fullscreenchange" :title = Resource.fullScreen> 
-      <span class="iconfont" :class="!isfull?'iconICON_quanping':'iconICON_tuichuquanping'"></span>
+    <div
+      class="btnCompass"
+      @click="fullscreenchange"
+      :title="Resource.fullScreen"
+    >
+      <span
+        class="iconfont"
+        :class="!isfull ? 'iconICON_quanping' : 'iconICON_tuichuquanping'"
+      ></span>
     </div>
   </div>
 </template>
 
 <script>
+import Config from "@/common/js/webServeConfig.js";
 export default {
   name: "compass",
   data() {
@@ -61,10 +69,15 @@ export default {
     reset() {
       viewer.camera.flyTo({
         destination: new Cesium.Cartesian3.fromDegrees(
-          110.60396458865515,
-          34.54408834959379,
-          30644793.325518917
+          Config.mapview[0],
+          Config.mapview[1],
+          Config.mapview[2]
         ),
+        orientation: {
+          heading: 0,
+          pitch: -0.7672,
+          roll: 0,
+        },
       });
     },
     fullscreenchange() {
@@ -116,6 +129,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "compass";
-</style>
+</style>

src/components/Combinations/toolBar/toolBar.vue

@@ -3,35 +3,67 @@
     <div class="toolBar">
       <div
         class="sm-btn sm-tool-btn"
-        :class="{'sm-toggle-btn-only': !show}"
+        :class="{ 'sm-toggle-btn-only': !show }"
         title="图层管理"
         @click="choose(0)"
       >
         <span class="iconfont icontuceng"></span>
       </div>
       <ul v-if="show">
-        <li class="sm-btn sm-tool-btn" :title= Resource.addLayer @click="choose(1)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.addLayer"
+          @click="choose(1)"
+        >
           <span class="iconfont iconjiazaituceng"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.setBaseLayer @click="choose(2)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.setBaseLayer"
+          @click="choose(2)"
+        >
           <span class="iconfont iconditushezhi"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.sceneOptions @click="choose(3)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.sceneOptions"
+          @click="choose(3)"
+        >
           <span class="iconfont iconchangjingshezhi"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.clip @click="choose(4)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.clip"
+          @click="choose(4)"
+        >
           <span class="iconfont iconiEarth-R8-xiugai_caijian"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.terrain @click="choose(5)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.terrain"
+          @click="choose(5)"
+        >
           <span class="iconfont icondixing"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.analysis @click="choose(6)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.analysis"
+          @click="choose(6)"
+        >
           <span class="iconfont iconsanweifenxi"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.measure @click="choose(7)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.measure"
+          @click="choose(7)"
+        >
           <span class="iconfont iconliangsuan"></span>
         </li>
-        <li class="sm-btn sm-tool-btn" :title= Resource.onlineEditing @click="choose(8)">
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.onlineEditing"
+          @click="choose(8)"
+        >
           <span class="iconfont iconzaixianbianji"></span>
         </li>
         <!-- <li class="sm-btn sm-tool-btn" title="城市设计" @click="choose(9)">
@@ -41,11 +73,15 @@
       <div
         class="sm-tool-btn"
         @click="toggleVisibility"
-        :class="{'sm-tool-btn-only': !show}"
+        :class="{ 'sm-tool-btn-only': !show }"
       >
         <span
           class="iconfont"
-          :class="show ? 'iconiEarth-R8-xiugai_shouqi':'iconiEarth-R8-xiugai_zhankai'"
+          :class="
+            show
+              ? 'iconiEarth-R8-xiugai_shouqi'
+              : 'iconiEarth-R8-xiugai_zhankai'
+          "
         ></span>
       </div>
     </div>
@@ -66,7 +102,6 @@
     <air-lines-trail-lines></air-lines-trail-lines>
     <scan-effect></scan-effect>
     <wind-particle></wind-particle>
-
   </div>
 </template>
 
@@ -81,9 +116,9 @@ export default {
     };
   },
   computed: {
-    ToolBarShow:function(){
-       return this.sharedState.ToolBarShow;
-    }
+    ToolBarShow: function () {
+      return this.sharedState.ToolBarShow;
+    },
   },
 
   methods: {
@@ -112,6 +147,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "toolBar";
-</style>
+</style>

src/components/TerrainAnalysis/TerrainSlope/TerrainSlope.vue

@@ -2,19 +2,25 @@
   <div v-show="slopeShow">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.analysisArea}}</label>
+        <label class="label-container">{{ Resource.analysisArea }}</label>
         <select class="sm-select sm-select-s" v-model="calModeIndex">
-          <option :value="Options.id" v-for="Options in showMode" :key="Options.id">{{Options.name}}</option>
+          <option
+            :value="Options.id"
+            v-for="Options in showMode"
+            :key="Options.id"
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.minimumGrade}}</label>
+        <label class="label-container">{{ Resource.minimumGrade }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="90"
             min="0"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="wideMinR"
           />
@@ -23,20 +29,20 @@
             max="90"
             min="0"
             step="1"
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="wideMinR"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.maximumGrade}}</label>
+        <label class="label-container">{{ Resource.maximumGrade }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="90"
             min="0"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="wideMaxR"
           />
@@ -45,27 +51,33 @@
             max="90"
             min="0"
             step="1"
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="wideMaxR"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.displayMode}}</label>
+        <label class="label-container">{{ Resource.displayMode }}</label>
         <select class="sm-select sm-select-s" v-model="showModeIndex">
-          <option :value="Options.id" v-for="Options in calMode" :key="Options.id">{{Options.name}}</option>
+          <option
+            :value="Options.id"
+            v-for="Options in calMode"
+            :key="Options.id"
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.transparency}}</label>
+        <label class="label-container">{{ Resource.transparency }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="1"
             min="0"
             step="0.01"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="trans"
           />
@@ -74,18 +86,26 @@
             max="1"
             min="0"
             step="0.01"
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="trans"
           />
         </div>
       </div>
-      <label class="sm-viewshed-label-right">{{Resource.edit}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.edit }}</label>
       <input style="margin-left: 10px" type="checkbox" v-model="isEdit" />
-      <label class="sm-solider-input-box media-hidden" style="font-size:12px">{{Resource.SlopeExplain}}</label>
+      <label
+        class="sm-solider-input-box media-hidden"
+        style="font-size: 12px"
+        >{{ Resource.SlopeExplain }}</label
+      >
       <div class="boxchild">
-        <button @click="startSlope" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearSlope" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <button @click="startSlope" class="tbtn tbn1" type="button">
+          {{ Resource.analyze }}
+        </button>
+        <button @click="clearSlope" class="tbtn" type="button">
+          {{ Resource.eliminate }}
+        </button>
       </div>
     </div>
   </div>
@@ -131,7 +151,7 @@ export default {
       calModeIndex: 0,
       wide: Number,
       DisplayMode: Number,
-      wideMaxR: 78,
+      wideMaxR: 90,
       wideMinR: 0,
       // slope: {},
       trans: 1,
@@ -196,6 +216,7 @@ export default {
       if (p) {
         slope.CoverageArea = p;
       }
+      console.log(slope);
       viewer.scene.globe.SlopeSetting = {
         slopeSetting: slope,
         analysisMode: this.wide,
@@ -219,7 +240,6 @@ export default {
       this.wide = Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_REGION;
       this.DisplayMode = Cesium.SlopeSettingEnum.DisplayMode.FACE;
       SlopColorTable = new Cesium.ColorTable();
-      // let SlopColorTable = this.SlopColorTable;
       SlopColorTable.insert(80, new Cesium.Color(255 / 255, 0 / 255, 0 / 255));
       SlopColorTable.insert(
         50,
@@ -366,6 +386,3 @@ export default {
   },
 };
 </script>
-
-
-

src/components/Viewer/smViewer.vue

@@ -106,6 +106,13 @@ export default {
         );
         store.setCompass(false); //关闭罗盘等
       }
+      viewer.scene.lightSource.ambientLightColor = new Cesium.Color(
+        0.65,
+        0.65,
+        0.65,
+        1
+      );
+      viewer.scene.globe.enableLighting = true;
 
       if (Config.baseImgLayer) {
         viewer.imageryLayers.addImageryProvider(
@@ -128,7 +135,11 @@ export default {
           Resource.searchPlaceHolder;
       }
       viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(110.0353, 16.3, 300000.0), //海南经纬度
+        destination: Cesium.Cartesian3.fromDegrees(
+          Config.mapview[0],
+          Config.mapview[1],
+          Config.mapview[2]
+        ), //海南经纬度
         orientation: {
           heading: 0,
           pitch: -0.7672,

src/components/addLayer/WebServicePan/WebServicePan.vue

@@ -2,43 +2,47 @@
   <div class="sm-function-module-content" v-show="webServiceShow">
     <div class="sm-function-module-sub-section">
       <select class="sm-select" v-model="selType">
-        <option id="publicService" value="0">{{Resource.publicService}}</option>
-        <option id="specialEffects" value="1">{{Resource.specialEffects}}</option>
-        <option id="specialEffects" value="2">{{Resource.HotSpots}}</option>
+        <option id="publicService" value="0">
+          {{ Resource.publicService }}
+        </option>
+        <option id="specialEffects" value="1">
+          {{ Resource.specialEffects }}
+        </option>
+        <option id="specialEffects" value="2">{{ Resource.HotSpots }}</option>
       </select>
       <div class="imageContainer">
         <!-- 公共服务 -->
         <div
           class="imageBox"
-          v-for=" item in data"
+          v-for="item in data"
           :key="item.id"
           @click="addwebSever(item)"
-          v-show="selType=='0'"
+          v-show="selType == '0'"
         >
           <img v-lazy="item.thumbnail" alt />
-          <label for>{{item.sceneName}}</label>
+          <label for>{{ item.sceneName }}</label>
         </div>
         <!-- 特效 -->
         <div
           class="imageBox"
-          v-for=" item in Effects"
+          v-for="item in Effects"
           :key="item.name"
           @click="addEffects(item.id)"
-          v-show="selType=='1'"
+          v-show="selType == '1'"
         >
           <img :src="item.thumbnail" alt />
-          <label for>{{item.description}}</label>
+          <label for>{{ item.description }}</label>
         </div>
         <!-- 热点 -->
         <div
           class="imageBox"
-          v-for=" item in hotSpots"
+          v-for="item in hotSpots"
           :key="item.id"
           @click="addHotSpots(item)"
-          v-show="selType=='2'"
+          v-show="selType == '2'"
         >
           <img v-lazy="item.thumbnail" alt />
-          <label for>{{item.sceneName}}</label>
+          <label for>{{ item.sceneName }}</label>
         </div>
       </div>
     </div>
@@ -56,8 +60,8 @@ export default {
       // showType: true, //默认显示公共服务，取反显示特效
       data: null,
       Effects: null,
-      hotSpots:null,
-      hotPoint:false
+      hotSpots: null,
+      hotPoint: false,
     };
   },
   computed: {
@@ -194,23 +198,25 @@ export default {
     },
     //添加特效
     addEffects(id) {
-       store.setSpecialEffects(id,1);  //打开特效
-       store.setToolBarAction(1); //关闭面板
+      store.setSpecialEffects(id, 1); //打开特效
+      store.setToolBarAction(1); //关闭面板
     },
     // 添加热点
-    addHotSpots(obj){
-         this.addwebSever(obj)
-         setTimeout(()=>{
-        store.setHotSpots(obj.id,1);  
-         },1500)
+    addHotSpots(obj) {
+      this.addwebSever(obj);
+      setTimeout(() => {
+        store.setHotSpots(obj.id, 1);
+      }, 1500);
     },
 
     flyTo(scpName) {
       let Name;
       let webName = Config.TitleKeyMap[scpName];
-      if(webName){Name = webName}else{
+      if (webName) {
+        Name = webName;
+      } else {
         Name = scpName;
-      };
+      }
       let cameraParam = Config.CAMERA_PARAM[webName];
       if (cameraParam) {
         viewer.scene.camera.flyTo({
@@ -259,7 +265,7 @@ export default {
           // this.showType = false;
           break;
         default:
-          // this.showType = true;
+        // this.showType = true;
       }
     },
   },
@@ -268,4 +274,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "./WebServicePan.scss";
-</style>
+</style>

src/components/index.js

@@ -7,6 +7,7 @@ window.axios.jsonp = common.axiosJsonp; //拓展axios
 
 // 三维分析部分组件
 import viewer from "./Viewer/index.js";
+import cockpit from "./Cockpit/index.js";
 import Profile3D from "./3DAnalysis/Profile3D/index.js";
 import ShadowQuery from "./3DAnalysis/ShadowQuery/index.js";
 import SightLine from "./3DAnalysis/SightLine/index.js";
@@ -86,6 +87,7 @@ import sceneAtttribute from "./Combinations/sceneAtttribute/index.js";
 //全局注册
 const components = [
     viewer,
+    cockpit,
     //分析
     Profile3D,
     ShadowQuery,

src/main.js

@@ -15,11 +15,12 @@ import App from './App.vue'
 
 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad, {
-  error: require('@/../static/images/thumbnail.jpg'),
-  loading: require('@/../static/images/loading.jpg')
+    error: require('@/../static/images/thumbnail.jpg'),
+    loading: require('@/../static/images/loading.jpg')
 })
 
 
+import router from './router'
 import "./common/scss/globe.scss"; //全局样式
 import store from "@/store/store.js" // 局部变量状态管理
 window.store = store;
@@ -37,6 +38,7 @@ import components from './components/index'
 Vue.use(components);
 // import './common/js/cover_css'
 new Vue({
-  el: '#app',
-  render: h => h(App)
-})
+    el: '#app',
+    router,
+    render: h => h(App)
+})

src/router/index.js

@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+Vue.use(Router)
+
+
+/**
+ * Note: 路由配置项
+ *
+ * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
+ * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
+ *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
+ *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
+ *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
+ * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
+ * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
+ * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
+ * roles: ['admin', 'common']       // 访问路由的角色权限
+ * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
+ * meta : {
+    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
+    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
+    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
+    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
+    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
+  }
+ */
+
+// 公共路由
+export const constantRoutes = [{
+        path: '/',
+        component: () =>
+            import ('@/views/map3d'),
+        hidden: true
+    }, {
+        path: '/login',
+        component: () =>
+            import ('@/views/login'),
+        hidden: true
+    }, {
+        path: '/map3d',
+        component: () =>
+            import ('@/views/map3d'),
+        hidden: true
+    }, {
+        path: '/cockpit',
+        component: () =>
+            import ('@/views/cockpit'),
+        hidden: true
+    }
+
+]
+
+// 防止连续点击多次路由报错
+let routerPush = Router.prototype.push;
+Router.prototype.push = function push(location) {
+    return routerPush.call(this, location).catch(err => err)
+}
+
+export default new Router({
+    mode: 'history', // 去掉url中的#
+    scrollBehavior: () => ({ y: 0 }),
+    routes: constantRoutes
+})

src/views/cockpit.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <sm-cockpit> </sm-cockpit>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app",
+};
+</script>

src/views/login.vue

@@ -0,0 +1,234 @@
+<template>
+  <div class="login">
+    <el-form
+      ref="loginForm"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">一张图后台管理系统</h3>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="user"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="password"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+        >
+          <svg-icon
+            slot="prefix"
+            icon-class="validCode"
+            class="el-input__icon input-icon"
+          />
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
+        </div>
+      </el-form-item>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
+        <el-button
+          :loading="loading"
+          size="medium"
+          type="primary"
+          style="width: 100%"
+          @click.native.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'"
+            >立即注册</router-link
+          >
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2018-2022 ruoyi.vip All Rights Reserved.</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: false,
+        code: "",
+        uuid: "",
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+      },
+      loading: false,
+      // 验证码开关
+      captchaEnabled: true,
+      // 注册开关
+      register: false,
+      redirect: undefined,
+    };
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
+        }
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password:
+          password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
+          }
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then(() => {
+              this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+.login-code-img {
+  height: 38px;
+}
+</style>

src/views/map3d.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <sm-viewer> </sm-viewer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app",
+};
+</script>

static/css/index.css

@@ -1,29 +1,80 @@
 .drawCur {
-  cursor: url(../../static/images/cur/draw.cur), auto;
+    cursor: url(../../static/images/cur/draw.cur), auto;
 }
 
 .measureCur {
-  cursor: url(../../static/images/cur/measure.cur), auto;
+    cursor: url(../../static/images/cur/measure.cur), auto;
 }
 
 html,
 body {
-  background-color: black;
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  color: #eee;
+    background-color: black;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    color: #eee;
 }
 
 #loadingbar {
-  bottom: 0;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 999999;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 999999;
 }
 
+
+/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
+
+body::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+
+/* 滚动条里面小方块 */
+
+body::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(85, 229, 38, 0.71);
+}
+
+
+/* 滚动条里面轨道 */
+
+body::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #2a4fd1b3;
+}
+
+
+/* 滚动条整体样式(高宽分别对应横竖滚动条的尺寸) */
+
+div::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+
+/* 滚动条里面小方块 */
+
+div::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background: rgba(85, 229, 38, 0.71);
+}
+
+
+/* 滚动条里面轨道 */
+
+div::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    background: #2a4fd1b3;
+}