前端样式修改

src/common/scss/globe.scss

@@ -258,10 +258,14 @@ label {
 }
 
 .sm-input {
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    line-height: 40px;
+    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
     height: 25px;
-    color: lightgray;
-    background-color: #333;
-    border: 1px solid #686363;
+    border: 1px solid #DCDFE6;
     padding: 0px 3px;
 }
 
@@ -294,7 +298,7 @@ label {
 .sm-input-long {
     @extend .sm-input;
     float: right;
-    width: 246px;
+    // width: 246px;
 }
 
 .sm-point {
@@ -314,13 +318,16 @@ label {
 
 .sm-select {
     width: 50%;
+    border-radius: 4px;
+    -webkit-box-sizing: border-box;
+    color: #606266;
+    display: inline-block;
+    line-height: 40px;
+    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
     height: 25px;
-    color: lightgray;
-    background-color: #333;
-    border: 1px solid #686363;
-    padding: 0 3px;
-    font-size: 12px;
-    float: right;
+    border: 1px solid #DCDFE6;
+    padding: 0px 3px;
     @media (max-width: 750px) {
         font-size: 12px;
         height: 21px;

src/components/3DAnalysis/Profile3D/Profile3D.vue

@@ -2,42 +2,62 @@
   <div v-show="profile3dComb">
     <div class="sm-function-module-content">
       <div class="sm-point"></div>
-      <label class="sm-function-module-sub-section-setting">{{Resource.startingInformation}}</label>
+      <label class="sm-function-module-sub-section-setting">{{
+        Resource.startingInformation
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.longitude}}</label>
-            <input v-model="startlongitude" type="text" class="sm-input-right" />
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.longitude
+            }}</label>
+            <input
+              v-model="startlongitude"
+              type="text"
+              class="sm-input-right"
+            />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption label-right">{{Resource.latitude}}</label>
+            <label class="sm-function-module-sub-section-caption label-right">{{
+              Resource.latitude
+            }}</label>
             <input v-model="startlatitude" type="text" class="sm-input-right" />
           </div>
         </div>
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.altitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.altitude
+            }}</label>
             <input v-model="startheight" type="text" class="sm-input-right" />
           </div>
         </div>
       </div>
 
       <div class="sm-point"></div>
-      <label class="sm-function-module-sub-section-setting">{{Resource.endInformation}}</label>
+      <label class="sm-function-module-sub-section-setting">{{
+        Resource.endInformation
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.longitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.longitude
+            }}</label>
             <input v-model="endlongitude" type="text" class="sm-input-right" />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption label-right">{{Resource.latitude}}</label>
+            <label class="sm-function-module-sub-section-caption label-right">{{
+              Resource.latitude
+            }}</label>
             <input v-model="endlatitude" type="text" class="sm-input-right" />
           </div>
         </div>
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.altitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.altitude
+            }}</label>
             <input v-model="endheight" type="text" class="sm-input-right" />
           </div>
         </div>
@@ -45,19 +65,27 @@
 
       <div>
         <input type="checkbox" checked v-model="profileLine" />
-        <label class="function-module-sub-section-caption">{{Resource.profileInformation}}</label>
+        <label class="function-module-sub-section-caption">{{
+          Resource.profileInformation
+        }}</label>
       </div>
 
       <div v-show="profileLine">
-        <label class="function-module-sub-section-caption">{{Resource.profileInformation}}</label>
+        <label class="function-module-sub-section-caption">{{
+          Resource.profileInformation
+        }}</label>
         <div>
           <canvas id="pro" height="0" width="0"></canvas>
         </div>
       </div>
 
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="analysis">{{ Resource.analyze}}</button>
-        <button type="button" class="tbtn" @click="clear">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="analysis">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clear">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>

src/components/3DAnalysis/ShadowQuery/ShadowQuery.vue

@@ -3,13 +3,21 @@
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
         <div class="sm-point"></div>
-        <label class="sm-function-module-sub-section-setting">{{Resource.parameterSetting}}</label>
+        <label class="sm-function-module-sub-section-setting">{{
+          Resource.parameterSetting
+        }}</label>
       </div>
 
       <div class="sm-function-module-sub-section">
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption" style>{{Resource.startTime}}</label>
-          <select class="sm-select sm-shadowquery-select" style="width:46%" v-model="startTime">
+          <label class="sm-function-module-sub-section-caption" style>{{
+            Resource.startTime
+          }}</label>
+          <select
+            class="sm-select sm-shadowquery-select"
+            style="width: 46%"
+            v-model="startTime"
+          >
             <option value="0">0:00</option>
             <option value="2">2:00</option>
             <option value="4">4:00</option>
@@ -26,8 +34,14 @@
         </div>
 
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption label-right">{{Resource.endTime}}</label>
-          <select class="sm-select sm-shadowquery-select" style="width:46%" v-model="endTime">
+          <label class="sm-function-module-sub-section-caption label-right">{{
+            Resource.endTime
+          }}</label>
+          <select
+            class="sm-select sm-shadowquery-select"
+            style="width: 46%"
+            v-model="endTime"
+          >
             <option value="0">0:00</option>
             <option value="2">2:00</option>
             <option value="4">4:00</option>
@@ -47,12 +61,24 @@
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.timeInterval}}</label>
-            <input v-model="timeInterval" type="number" class="sm-input sm-input-long" />
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.timeInterval
+            }}</label>
+            <input
+              v-model="timeInterval"
+              type="number"
+              class="sm-input sm-input-long"
+            />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption label-right">{{Resource.spacing}}</label>
-            <input v-model="spacing" type="number" class="sm-input sm-input-long" />
+            <label class="sm-function-module-sub-section-caption label-right">{{
+              Resource.spacing
+            }}</label>
+            <input
+              v-model="spacing"
+              type="number"
+              class="sm-input sm-input-long"
+            />
           </div>
         </div>
       </div>
@@ -60,24 +86,42 @@
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.bottomAltitude}}</label>
-            <input v-model="bottomHeight" type="number" class="sm-input sm-input-long" />
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.bottomAltitude
+            }}</label>
+            <input
+              v-model="bottomHeight"
+              type="number"
+              class="sm-input sm-input-long"
+            />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption label-right">{{Resource.extrudeHeight}}</label>
-            <input v-model="extrudeHeight" type="number" class="sm-input sm-input-long" />
+            <label class="sm-function-module-sub-section-caption label-right">{{
+              Resource.extrudeHeight
+            }}</label>
+            <input
+              v-model="extrudeHeight"
+              type="number"
+              class="sm-input sm-input-long"
+            />
           </div>
         </div>
       </div>
 
       <div>
         <input type="checkbox" checked v-model="sunlight" />
-        <label class="sm-function-module-sub-section-caption">{{Resource.sunlight}}</label>
+        <label class="sm-function-module-sub-section-caption">{{
+          Resource.sunlight
+        }}</label>
       </div>
 
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" @click="analysis">{{ Resource.shadowAnalysis}}</button>
-        <button type="button" class="tbtn" @click="clear">{{Resource.clear}}</button>
+        <el-button type="primary" size="mini" @click="analysis">{{
+          Resource.shadowAnalysis
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clear">{{
+          Resource.clear
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -239,13 +283,13 @@ export default {
     },
     analysis() {
       // this.init();
-      
+
       for (let i = 0; i < layers.length; i++) {
         if (layers[i].shadowType !== 2) {
           layers[i].shadowType = 2;
           layers[i].refresh();
         }
-      };
+      }
       this.isDestroyFlag = false; //保留效果
       this.handlerPolygon.deactivate();
       this.handlerPolygon.activate();
@@ -254,7 +298,7 @@ export default {
       if (this.handlerPolygon) {
         this.handlerPolygon.deactivate();
       }
-       window.tooltip.setVisible(false);
+      window.tooltip.setVisible(false);
       // common.clearHandlerDrawing();
       this.isDestroyFlag = true; //摧毁标志，释放内存
       viewer.entities.removeAll();

src/components/3DAnalysis/SightLine/SightLine.vue

@@ -2,51 +2,79 @@
   <div v-show="sightlineComb">
     <div class="sm-function-module-content">
       <div class="sm-point"></div>
-      <label class="sm-function-module-sub-section-setting">{{Resource.ObserverInformation}}</label>
+      <label class="sm-function-module-sub-section-setting">{{
+        Resource.ObserverInformation
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.longitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.longitude
+            }}</label>
             <input v-model="viewlongitude" type="text" class="sm-input-right" />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption" style="margin-left: 20px">{{Resource.latitude}}</label>
+            <label
+              class="sm-function-module-sub-section-caption"
+              style="margin-left: 20px"
+              >{{ Resource.latitude }}</label
+            >
             <input v-model="viewlatitude" type="text" class="sm-input-right" />
           </div>
         </div>
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.altitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.altitude
+            }}</label>
             <input v-model="viewheight" type="text" class="sm-input-right" />
           </div>
         </div>
       </div>
 
       <div class="sm-point"></div>
-      <label class="sm-function-module-sub-section-setting">{{Resource.parameterSetting}}</label>
+      <label class="sm-function-module-sub-section-setting">{{
+        Resource.parameterSetting
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.visibleColor}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.visibleColor
+          }}</label>
           <ColorPicker class="sm-colorpicker" v-model="visibleColor" alpha />
         </div>
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.hideenColor}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.hideenColor
+          }}</label>
           <ColorPicker class="sm-colorpicker" v-model="hiddenColor" alpha />
         </div>
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.highlightBarrierColor}}</label>
-          <ColorPicker class="sm-colorpicker" v-model="highlightBarrierColor" alpha />
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.highlightBarrierColor
+          }}</label>
+          <ColorPicker
+            class="sm-colorpicker"
+            v-model="highlightBarrierColor"
+            alpha
+          />
         </div>
 
         <div>
           <input type="checkbox" checked v-model="highlightBarrier" />
-          <label class="sm-function-module-sub-section-caption">{{Resource.highlightBarrier}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.highlightBarrier
+          }}</label>
         </div>
       </div>
 
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="analysis">{{Resource.analyze}}</button>
-        <button type="button" class="tbtn" @click="clear">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" v-on:click="analysis">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clear">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -301,5 +329,3 @@ export default {
   },
 };
 </script>
-
-

src/components/3DAnalysis/SkyLine/SkyLine.vue

@@ -2,21 +2,31 @@
   <div v-show="skylineComb">
     <div class="sm-function-module-content">
       <div class="sm-point media-hidden"></div>
-      <label class="sm-function-module-sub-section-setting media-hidden">{{Resource.ObserverInformation}}</label>
+      <label class="sm-function-module-sub-section-setting media-hidden">{{
+        Resource.ObserverInformation
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.longitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.longitude
+            }}</label>
             <input class="sm-input-right" type="text" v-model="viewlongitude" />
           </div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption" style="margin-left: 20px">{{Resource.latitude}}</label>
+            <label
+              class="sm-function-module-sub-section-caption"
+              style="margin-left: 20px"
+              >{{ Resource.latitude }}</label
+            >
             <input class="sm-input-right" type="text" v-model="viewlatitude" />
           </div>
         </div>
         <div>
           <div class="sm-half">
-            <label class="sm-function-module-sub-section-caption">{{Resource.altitude}}</label>
+            <label class="sm-function-module-sub-section-caption">{{
+              Resource.altitude
+            }}</label>
             <input class="sm-input-right" type="text" v-model="viewheight" />
           </div>
         </div>
@@ -24,92 +34,126 @@
 
       <div class="sm-function-module-sub-section">
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption">{{Resource.directionAngle}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.directionAngle
+          }}</label>
           <input
             class="sm-input sm-input-long"
             max="360"
             min="0"
             step="1.0"
-            style="float: right;width: 45%;"
+            style="float: right; width: 45%"
             type="number"
             v-model="direction"
           />
         </div>
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption" style="margin-left: 20px">{{Resource.ElevationAngle}}</label>
+          <label
+            class="sm-function-module-sub-section-caption"
+            style="margin-left: 20px"
+            >{{ Resource.ElevationAngle }}</label
+          >
           <input
             class="sm-input sm-input-long"
             max="90"
             min="-90"
             step="1.0"
-            style="float: right;"
+            style="float: right"
             type="number"
             v-model="pitch"
           />
         </div>
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption">{{Resource.skylineRadius}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.skylineRadius
+          }}</label>
           <input
             class="sm-input sm-input-long"
             step="100"
-            style="float: right;width: 45%;"
+            style="float: right; width: 45%"
             type="number"
             v-model="skylineRadius"
           />
         </div>
 
         <div class="sm-half">
-          <label class="sm-function-module-sub-section-caption" style="margin-left: 20px">{{Resource.skylineWidth}}</label>
+          <label
+            class="sm-function-module-sub-section-caption"
+            style="margin-left: 20px"
+            >{{ Resource.skylineWidth }}</label
+          >
           <input
             class="sm-input sm-input-long"
             max="20"
             min="1.0"
             step="1.0"
-            style="float: right;"
+            style="float: right"
             type="number"
             v-model="lineWidth"
           />
         </div>
       </div>
       <div class="sm-point media-hidden"></div>
-      <label class="sm-function-module-sub-section-caption media-hidden">{{Resource.parameterSetting}}</label>
+      <label class="sm-function-module-sub-section-caption media-hidden">{{
+        Resource.parameterSetting
+      }}</label>
       <div class="sm-function-module-sub-section">
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.displayMode}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.displayMode
+          }}</label>
           <select class="sm-select" v-model="skylineMode">
-            <option selected value="0">{{Resource.polyline}}</option>
-            <option value="1">{{Resource.polygon}}</option>
+            <option selected value="0">{{ Resource.polyline }}</option>
+            <option value="1">{{ Resource.polygon }}</option>
             <!-- <option value="2">+ Resource.skylinesectorbody +</option> // 需要iServer910支持 -->
           </select>
         </div>
 
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.skylineColor}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.skylineColor
+          }}</label>
           <ColorPicker alpha class="sm-colorpicker" v-model="skylineColor" />
         </div>
         <div>
-          <label class="sm-function-module-sub-section-caption">{{Resource.highlightBarrierColor}}</label>
-          <ColorPicker alpha class="sm-colorpicker" v-model="highlightBarrierColor" />
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.highlightBarrierColor
+          }}</label>
+          <ColorPicker
+            alpha
+            class="sm-colorpicker"
+            v-model="highlightBarrierColor"
+          />
         </div>
 
         <div>
           <input checked type="checkbox" v-model="highlightBarrier" />
-          <label class="sm-function-module-sub-section-caption">{{Resource.highlightBarrier}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.highlightBarrier
+          }}</label>
         </div>
         <div>
           <input checked type="checkbox" v-model="getSkyline2D" />
-          <label class="sm-function-module-sub-section-caption">{{Resource.graphDisplay}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.graphDisplay
+          }}</label>
         </div>
 
         <div v-show="getSkyline2D">
-          <label class="sm-function-module-sub-section-caption">{{Resource.TwoDimensionalSkyline}}</label>
+          <label class="sm-function-module-sub-section-caption">{{
+            Resource.TwoDimensionalSkyline
+          }}</label>
           <div id="map"></div>
         </div>
       </div>
 
       <div class="boxchild">
-        <button class="tbtn tbn1" type="button" v-on:click="analysis">{{Resource.skyline}}</button>
-        <button @click="clear" class="tbtn" type="button">{{Resource.clear}}</button>
+        <el-button type="primary" size="mini" @click="analysis">{{
+          Resource.skyline
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clear">{{
+          Resource.clear
+        }}</el-button>
       </div>
     </div>
   </div>

src/components/3DAnalysis/ViewShed/ViewShed.vue

@@ -200,12 +200,12 @@
               <label class="sm-function-module-sub-section-caption">高亮显示可见体</label>
       </div>-->
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="chooseView">
+        <el-button type="primary" size="mini" @click="chooseView">
           {{ Resource.analyze }}
-        </button>
-        <button type="button" class="tbtn" @click="clear">
+        </el-button>
+        <el-button type="primary" size="mini" @click="clear">
           {{ Resource.eliminate }}
-        </button>
+        </el-button>
       </div>
     </div>
   </div>

src/components/CityPlan/OnLineAnalysis/OnLineAnalysis.vue

@@ -2,8 +2,8 @@
   <div v-show="onLineShow">
     <div class="sm-function-module-content">
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="analysis">分析</button>
-        <button type="button" class="tbtn" @click="clear">清除</button>
+        <el-button type="primary" size="mini" @click="analysis">分析</el-button>
+        <el-button type="primary" size="mini" @click="clear">清除</el-button>
       </div>
     </div>
   </div>
@@ -45,14 +45,8 @@ export default {
       let pastePolyLine = viewer.entities.add({
         polyline: {
           positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-            115.008423196501,
-            39.00802071320561,
-            102.1,
-            115.01018439584423,
-            39.00853132862415,
-            102.1,
-            115.011168593648,
-            39.00880578673498,
+            115.008423196501, 39.00802071320561, 102.1, 115.01018439584423,
+            39.00853132862415, 102.1, 115.011168593648, 39.00880578673498,
             102.1,
           ]),
           width: 4.0,

src/components/CityPlan/backLineAnalysis/backLineAnalysis.vue

@@ -2,15 +2,15 @@
   <div v-show="backLineShow">
     <div class="sm-function-module-content">
       <div class="boxchild">
-        <button class="tbtn tbn1" type="button" v-on:click="analysis">分析</button>
-        <button @click="clear" class="tbtn" type="button">清除</button>
+        <el-button type="primary" size="mini" @click="analysis">分析</el-button>
+        <el-button type="primary" size="mini" @click="clear">清除</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  let ids;
+let ids;
 export default {
   name: "Sm3dBackLineAnalysis",
   props: {
@@ -49,8 +49,8 @@ export default {
   // },
   methods: {
     init() {
-        let original = viewer.scene.layers.find("original");
-        // original.setObjsVisible([47], false);
+      let original = viewer.scene.layers.find("original");
+      // original.setObjsVisible([47], false);
     },
     analysis() {
       let that = this;
@@ -71,14 +71,8 @@ export default {
         window.polyLine = viewer.entities.add({
           polyline: {
             positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-              115.00787890205515,
-              39.00950957365,
-              100.1,
-              115.00780513629414,
-              39.00939287572396,
-              100.1,
-              115.00845873860158,
-              39.007961490024464,
+              115.00787890205515, 39.00950957365, 100.1, 115.00780513629414,
+              39.00939287572396, 100.1, 115.00845873860158, 39.007961490024464,
               100.1,
             ]),
             width: 6.0,
@@ -142,7 +136,7 @@ export default {
 
               let point3Ds = new Cesium.Point3Ds();
               let points = new Array();
-              for (let i = 0, j = data.geometry.points.length;i<j; i++) {
+              for (let i = 0, j = data.geometry.points.length; i < j; i++) {
                 points.push(data.geometry.points[i].x);
                 points.push(data.geometry.points[i].y);
                 points.push(data.geometry.points[i].z);
@@ -182,7 +176,7 @@ export default {
                     .get(response.data.newResourceLocation + ".json")
                     .then(function (response) {
                       let data = response.data;
-                       ids = data.ids;
+                      ids = data.ids;
                       let layer = scene.layers.find("日照墙");
                       let color = new Cesium.Color(160 / 255, 0, 0, 1);
                       layer.setObjsColor(ids, color);
@@ -191,31 +185,23 @@ export default {
                         39.009393932590584,
                         132.314
                       );
-                      let pick = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
-                        viewer.scene,
-                        cartesian
-                      );
+                      let pick =
+                        Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+                          viewer.scene,
+                          cartesian
+                        );
                       window.tooltip.showAt(pick, "退线不足3米");
                       window.setTimeout(function () {
                         window.tooltip.setVisible(false);
                       }, 4000);
                       let orangePolygon1 = viewer.entities.add({
-                        name:
-                          "Orange polygon with per-position heights and outline",
+                        name: "Orange polygon with per-position heights and outline",
                         polygon: {
                           hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([
-                            115.00781835183739,
-                            39.009393557694274,
-                            157.7,
-                            115.00786836423599,
-                            39.009299692575006,
-                            157.7,
-                            115.00790442533352,
-                            39.00931098890217,
-                            157.7,
-                            115.00785030819625,
-                            39.00940394849713,
-                            157.7,
+                            115.00781835183739, 39.009393557694274, 157.7,
+                            115.00786836423599, 39.009299692575006, 157.7,
+                            115.00790442533352, 39.00931098890217, 157.7,
+                            115.00785030819625, 39.00940394849713, 157.7,
                           ]),
                           extrudedHeight: 0,
                           perPositionHeight: true,

src/components/CityPlan/limitHeightAnalysis/limitHeightAnalysis.vue

@@ -2,8 +2,8 @@
   <div v-show="limitHeightShow">
     <div class="sm-function-module-content">
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="analysis">分析</button>
-        <button type="button" class="tbtn" @click="clear">清除</button>
+        <el-button type="primary" size="mini" @click="analysis">分析</el-button>
+        <el-button type="primary" size="mini" @click="clear">清除</el-button>
       </div>
     </div>
   </div>
@@ -82,14 +82,9 @@ export default {
           id: "polygonA",
           polygon: {
             hierarchy: Cesium.Cartesian3.fromDegreesArray([
-              115.00769546779887,
-              39.00948953601627,
-              115.01061031637882,
-              39.01040583624218,
-              115.01127283211821,
-              39.00875368295838,
-              115.00837238000206,
-              39.0079302039017,
+              115.00769546779887, 39.00948953601627, 115.01061031637882,
+              39.01040583624218, 115.01127283211821, 39.00875368295838,
+              115.00837238000206, 39.0079302039017,
             ]),
             height: 105,
             material: new Cesium.Color(1, 1, 0.2, 0.5),

src/components/CityPlan/serviceAreaAnalysis/serviceAreaAnalysis.vue

@@ -2,8 +2,10 @@
   <div v-show="ServiceAreaShow">
     <div class="sm-function-module-content">
       <div class="boxchild">
-        <button type="button" class="tbtn tbn1" v-on:click="analysis">分析</button>
-        <button type="button" class="tbtn" @click="clear">清除</button>
+        <el-button type="primary" size="mini" v-on:click="analysis"
+          >分析</el-button
+        >
+        <el-button type="primary" size="mini" @click="clear">清除</el-button>
       </div>
 
       <div v-show="GTCShow">
@@ -11,7 +13,7 @@
         <div style="margin: 10px">
           <div>
             <div class="ui piled segment">
-              <div id="graph" style="height: 200px;width: 250px;"></div>
+              <div id="graph" style="height: 200px; width: 250px"></div>
             </div>
           </div>
         </div>
@@ -21,8 +23,7 @@
 </template>
 
 <script>
-let 
-  ids1,
+let ids1,
   ids2,
   ids3,
   initF = false;
@@ -54,7 +55,7 @@ export default {
   //   },
   methods: {
     init() {
-        console.log("init",this.initF)
+      console.log("init", this.initF);
       if (this.initF) {
         return;
       }
@@ -72,7 +73,7 @@ export default {
       };
       let queryUrl =
         "http://www.supermapol.com/realspace/services/spatialAnalysis-data_all/restjsr/spatialanalyst/datasets/building_udb%40building/spatialquery3d.json";
-   
+
       window.axios
         .post(queryUrl, JSON.stringify(datasetSpatialQuery3DPostParameter))
         .then(function (response) {
@@ -103,7 +104,7 @@ export default {
       };
       let queryUrl2 =
         "http://www.supermapol.com/realspace/services/spatialAnalysis-data_all/restjsr/spatialanalyst/datasets/building_udb%40building/spatialquery3d.json";
- 
+
       window.axios
         .post(queryUrl2, JSON.stringify(datasetSpatialQuery3DPostParameter2))
         .then(function (response) {
@@ -134,7 +135,7 @@ export default {
       };
       let queryUrl3 =
         "http://www.supermapol.com/realspace/services/spatialAnalysis-data_all/restjsr/spatialanalyst/datasets/building_udb%40building/spatialquery3d.json";
-   
+
       window.axios
         .post(queryUrl3, JSON.stringify(datasetSpatialQuery3DPostParameter3))
         .then(function (response) {
@@ -158,13 +159,13 @@ export default {
       }, 8000);
     },
     clear() {
-        this.initF = false;
+      this.initF = false;
       this.GTCShow = false;
       viewer.entities.removeAll();
       let layerOriginal = scene.layers.find("original");
-        layerOriginal.removeObjsColor(ids1);
-        layerOriginal.removeObjsColor(ids2);
-        layerOriginal.removeObjsColor(ids3);
+      layerOriginal.removeObjsColor(ids1);
+      layerOriginal.removeObjsColor(ids2);
+      layerOriginal.removeObjsColor(ids3);
       scene.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(
           115.00022575830863,
@@ -180,7 +181,7 @@ export default {
     },
     //缓冲分析
     overlayBuildingBuffer(viewer, scene) {
-        console.log(ids1,ids2,ids3)
+      console.log(ids1, ids2, ids3);
       viewer.camera.flyTo({
         destination: Cesium.Cartesian3.fromDegrees(
           114.99950507907676,
@@ -220,7 +221,7 @@ export default {
             },
           });
         }, 2000);
-         console.log(ids1,ids2,ids3)
+        console.log(ids1, ids2, ids3);
         window.setTimeout(function () {
           layerOriginal.setObjsColor(ids1, Cesium.Color.PINK.withAlpha(1));
         }, 4000);
@@ -272,12 +273,7 @@ export default {
         viewer.entities.add({
           polyline: {
             positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-              115.009302,
-              39.006673,
-              160.0,
-              115.009302,
-              39.006673,
-              250.0,
+              115.009302, 39.006673, 160.0, 115.009302, 39.006673, 250.0,
             ]),
             width: 1,
             material: new Cesium.PolylineDashMaterialProperty({
@@ -288,12 +284,8 @@ export default {
         viewer.entities.add({
           polyline: {
             positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-              115.01135582381039,
-              39.00765877493075,
-              148,
-              115.01135582381039,
-              39.00765877493075,
-              230,
+              115.01135582381039, 39.00765877493075, 148, 115.01135582381039,
+              39.00765877493075, 230,
             ]),
             width: 1,
             material: new Cesium.PolylineDashMaterialProperty({
@@ -304,12 +296,8 @@ export default {
         viewer.entities.add({
           polyline: {
             positions: Cesium.Cartesian3.fromDegreesArrayHeights([
-              115.01249121214373,
-              39.00298817909093,
-              145.102,
-              115.01249121214373,
-              39.00298817909093,
-              145.172,
+              115.01249121214373, 39.00298817909093, 145.102,
+              115.01249121214373, 39.00298817909093, 145.172,
             ]),
             width: 1,
             material: new Cesium.PolylineDashMaterialProperty({
@@ -465,11 +453,10 @@ export default {
   },
   watch: {
     initflag(val) {
-        console.log(val)
+      console.log(val);
       this.init();
     },
   },
-
 };
 </script>
 

src/components/Clip/ClipBox/ClipBox.vue

@@ -2,13 +2,13 @@
   <div v-if="clipBox">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.length}}</label>
+        <label class="label-container">{{ Resource.length }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipLength"
           />
@@ -16,20 +16,20 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipLength"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.width}}</label>
+        <label class="label-container">{{ Resource.width }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipWidth"
           />
@@ -37,20 +37,20 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px; "
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipWidth"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.height}}</label>
+        <label class="label-container">{{ Resource.height }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipHeight"
           />
@@ -58,21 +58,21 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px; "
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipHeight"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.rotate}}</label>
+        <label class="label-container">{{ Resource.rotate }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="180"
             min="-180"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipRotate"
           />
@@ -81,25 +81,33 @@
             max="180"
             min="-180"
             step="1"
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipRotate"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="sm-function-module-sub-section-caption">{{Resource.ClipModel}}</label>
+        <label class="sm-function-module-sub-section-caption">{{
+          Resource.ClipModel
+        }}</label>
         <select class="sm-select sm-select-s" v-model="ClipModelSelected">
           <option
             :value="Options.id"
             v-for="Options in ClipModels"
             :key="Options.id"
-          >{{Options.name}}</option>
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </div>
       <div class="boxchild">
-        <button @click="BoxClip" class="tbtn tbn1" type="button">{{Resource.clip}}</button>
-        <button @click="clearBoxClip" class="tbtn" type="button">{{Resource.clear}}</button>
+        <el-button type="primary" size="mini" @click="BoxClip">{{
+          Resource.clip
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearBoxClip">{{
+          Resource.clear
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -120,20 +128,20 @@ export default {
       ClipModels: [
         {
           id: "0",
-          name: Resource.CutInsideBoxNOFrame
+          name: Resource.CutInsideBoxNOFrame,
         },
         {
           id: "1",
-          name: Resource.CutOutBoxNOFrame
+          name: Resource.CutOutBoxNOFrame,
         },
         {
           id: "2",
-          name: Resource.CutInsideBoxFrame
+          name: Resource.CutInsideBoxFrame,
         },
         {
           id: "3",
-          name: Resource.CutOutBoxFrame
-        }
+          name: Resource.CutOutBoxFrame,
+        },
       ],
       ClipModelSelected: null,
       clipModeOption: null,
@@ -142,13 +150,13 @@ export default {
       hasClipLine: false,
       moveY: 0,
       moveX: 0,
-      moveZ: 0
+      moveZ: 0,
     };
   },
   computed: {
-    clipBox: function() {
+    clipBox: function () {
       return this.sharedState.clip[0];
-    }
+    },
   },
   methods: {
     toggleVisibility() {
@@ -165,11 +173,14 @@ export default {
       this.screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(
         scene.canvas
       );
-      this.screenSpaceEventHandler.setInputAction(evt => {
-        this.tooltip.showAt(evt.endPosition, `<p>${Resource.ClickModelAddBox}</p>`);
+      this.screenSpaceEventHandler.setInputAction((evt) => {
+        this.tooltip.showAt(
+          evt.endPosition,
+          `<p>${Resource.ClickModelAddBox}</p>`
+        );
       }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
-      this.screenSpaceEventHandler.setInputAction(evt => {
+      this.screenSpaceEventHandler.setInputAction((evt) => {
         let length = Number(this.clipLength);
         let width = Number(this.clipWidth);
         let height = Number(this.clipHeight);
@@ -183,7 +194,7 @@ export default {
           dimensions: new Cesium.Cartesian3(length, width, height),
           position: position,
           clipMode: clipModeOption,
-          heading: rotate
+          heading: rotate,
         };
         let hpr = new Cesium.HeadingPitchRoll(rotate, 0, 0);
         let orientation = Cesium.Transforms.headingPitchRollQuaternion(
@@ -194,11 +205,11 @@ export default {
           box: {
             dimensions: new Cesium.Cartesian3(length, width, height),
             material: Cesium.Color.fromRandom({
-              alpha: 0.2
-            })
+              alpha: 0.2,
+            }),
           },
           position: position,
-          orientation: orientation
+          orientation: orientation,
         });
         this.setAllLayersClipOptions(boxOption);
         this.tooltip.setVisible(false);
@@ -246,7 +257,7 @@ export default {
         dimensions: newDim,
         position: position,
         clipMode: clipMode,
-        heading: heading
+        heading: heading,
       };
       this.setAllLayersClipOptions(boxOptions);
     },
@@ -256,10 +267,10 @@ export default {
       this.clipModeOption = "clip_behind_all_plane";
       this.layers = scene.layers.layerQueue;
       this.tooltip = createTooltip(document.body);
-    }
+    },
   },
   mounted() {
-      this.init();
+    this.init();
   },
 
   watch: {
@@ -340,7 +351,7 @@ export default {
           break;
       }
       this.setClipBox();
-    }
+    },
     //平移裁剪
     // moveX(val,old){
     //   if(!this.boxEntity) {
@@ -356,8 +367,6 @@ export default {
     //   // this.boxEntity.position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height)
     //   this.setClipBox();
     // },
-  }
+  },
 };
 </script>
-
-

src/components/Clip/ClipCross/ClipCross.vue

@@ -2,13 +2,13 @@
   <div v-show="clipCross">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.ClipWidth}}</label>
+        <label class="label-container">{{ Resource.ClipWidth }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipWidth"
           />
@@ -16,20 +16,20 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px; "
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipWidth"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.ClipHeight}}</label>
+        <label class="label-container">{{ Resource.ClipHeight }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="clipHeight"
           />
@@ -37,21 +37,21 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="clipHeight"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.Xrotation}}</label>
+        <label class="label-container">{{ Resource.Xrotation }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             max="360"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="pitch"
           />
@@ -60,21 +60,21 @@
             min="0"
             max="360"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="pitch"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.Yrotation}}</label>
+        <label class="label-container">{{ Resource.Yrotation }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="360"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="roll"
           />
@@ -83,21 +83,21 @@
             max="360"
             min="0"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="roll"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.Zrotation}}</label>
+        <label class="label-container">{{ Resource.Zrotation }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             max="360"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="heading"
           />
@@ -106,20 +106,20 @@
             max="360"
             min="0"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="heading"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.extrude}}</label>
+        <label class="label-container">{{ Resource.extrude }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="extrude"
           />
@@ -127,15 +127,19 @@
             class="min-solider"
             min="0"
             step="1"
-            style="width:34%; height:25px;"
+            style="width: 34%; height: 25px"
             type="number"
             v-model="extrude"
           />
         </div>
       </div>
       <div class="boxchild">
-        <button @click="startCross" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearCross" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="startCross">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearCross">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -410,4 +414,3 @@ export default {
   },
 };
 </script>
-

src/components/Clip/ClipPlane/ClipPlane.vue

@@ -2,10 +2,11 @@
   <div v-show="clipPlane">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.firstPoint}}:
-          <label> {{Resource.Spacelongitude}}</label>
-          <label> {{Resource.Spacelatitude}}</label>
-          <label> {{Resource.Spacealtitude}}</label>
+        <label class="label-container"
+          >{{ Resource.firstPoint }}:
+          <label> {{ Resource.Spacelongitude }}</label>
+          <label> {{ Resource.Spacelatitude }}</label>
+          <label> {{ Resource.Spacealtitude }}</label>
         </label>
         <input
           class="middle-input"
@@ -17,10 +18,11 @@
         />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.secondPoint}}:
-          <label> {{Resource.Spacelongitude}}</label>
-          <label> {{Resource.Spacelatitude}}</label>
-          <label> {{Resource.Spacealtitude}}</label>
+        <label class="label-container"
+          >{{ Resource.secondPoint }}:
+          <label> {{ Resource.Spacelongitude }}</label>
+          <label> {{ Resource.Spacelatitude }}</label>
+          <label> {{ Resource.Spacealtitude }}</label>
         </label>
         <input
           class="middle-input"
@@ -32,11 +34,12 @@
         />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.thirdPoint}}:
-          <label> {{Resource.Spacelongitude}}</label>
-          <label> {{Resource.Spacelatitude}}</label>
-          <label> {{Resource.Spacealtitude}}</label>
-          </label>
+        <label class="label-container"
+          >{{ Resource.thirdPoint }}:
+          <label> {{ Resource.Spacelongitude }}</label>
+          <label> {{ Resource.Spacelatitude }}</label>
+          <label> {{ Resource.Spacealtitude }}</label>
+        </label>
         <input
           class="middle-input"
           disabled
@@ -47,8 +50,12 @@
         />
       </div>
       <div class="boxchild">
-        <button @click="clipPlaneStart" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearClipPlane" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="clipPlaneStart">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearClipPlane">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -70,10 +77,10 @@ export default {
     };
   },
   computed: {
-    clipPlane: function() {
+    clipPlane: function () {
       return this.sharedState.clip[1];
     },
-     clipShow: function () {
+    clipShow: function () {
       return this.sharedState.toolBar[4];
     },
   },
@@ -83,7 +90,7 @@ export default {
     },
     // 多边形裁剪
     clipPlaneStart() {
-       this.isDestroyFlag = false; //保留效果
+      this.isDestroyFlag = false; //保留效果
       (this.planeClipPoint1 = null),
         (this.planeClipPoint2 = null),
         (this.planeClipPoint3 = null);
@@ -93,8 +100,8 @@ export default {
         // 设置被裁剪对象的颜色
         layer.clipLineColor = new Cesium.Color(1, 1, 1, 0);
       }
-      common.handlerDrawing("Polygon",1).then(
-        res => {
+      common.handlerDrawing("Polygon", 1).then(
+        (res) => {
           this.position = res.result.object.positions;
           for (let layer of layers) {
             layer.setCustomClipPlane(
@@ -146,7 +153,7 @@ export default {
           // handlerPolygon.polyline.show = false;
           window.handlerPolygon.deactivate();
         },
-        err => {
+        (err) => {
           console.log(err);
         }
       );
@@ -157,7 +164,7 @@ export default {
     },
 
     clearClipPlane() {
-       this.isDestroyFlag = true; //摧毁标志，释放内存
+      this.isDestroyFlag = true; //摧毁标志，释放内存
       (this.planeClipPoint1 = null),
         (this.planeClipPoint2 = null),
         (this.planeClipPoint3 = null);
@@ -174,7 +181,7 @@ export default {
     init() {
       if (layers) return;
       layers = viewer.scene.layers.layerQueue;
-    }
+    },
   },
   beforeDestroy() {
     if (this.isDestroyFlag && layers) {
@@ -189,14 +196,10 @@ export default {
 
   watch: {
     clipPlane(val) {
-       if (val) {
+      if (val) {
         this.init();
       }
-    }
-  }
+    },
+  },
 };
 </script>
-
-
-
-

src/components/Clip/ClipPolygon/ClipPolygon.vue

@@ -2,18 +2,31 @@
   <div class="com" v-show="clipPolygon">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="sm-function-module-sub-section-caption">{{Resource.polygonClipMode}}</label>
-        <select class="sm-select" id style="width:100%" v-model="ClipModelSelected">
+        <label class="sm-function-module-sub-section-caption">{{
+          Resource.polygonClipMode
+        }}</label>
+        <select
+          class="sm-select"
+          id
+          style="width: 100%"
+          v-model="ClipModelSelected"
+        >
           <option
             :value="Options.id"
             v-for="Options in ClipModels"
             :key="Options.id"
-          >{{Options.name}}</option>
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </div>
       <div class="boxchild">
-        <button @click="clipPolygonStart" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearClipPolygon" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="clipPolygonStart">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearClipPolygon">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -91,11 +104,12 @@ export default {
         layer.clearModifyRegions();
       }
       this.isDestroyFlag = true; //摧毁标志，释放内存
-      
     },
 
     init() {
-      if(layers){return}
+      if (layers) {
+        return;
+      }
       this.clipModeOption = Cesium.ModifyRegionMode.CLIP_INSIDE;
       layers = scene.layers.layerQueue;
     },
@@ -133,6 +147,3 @@ export default {
   },
 };
 </script>
-
-
-

src/components/Clip/ClpBoxByEditor/clipBoxByEditor.vue

@@ -2,19 +2,32 @@
   <div v-show="clipBoxByedit">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="sm-function-module-sub-section-caption">{{Resource.polygonClipMode}}</label>
-        <select class="sm-select" id="fillOptions" style="width:100%" v-model="ClipModelSelected">
+        <label class="sm-function-module-sub-section-caption">{{
+          Resource.polygonClipMode
+        }}</label>
+        <select
+          class="sm-select"
+          id="fillOptions"
+          style="width: 100%"
+          v-model="ClipModelSelected"
+        >
           <option
             :value="Options.id"
             v-for="Options in ClipModels"
             :key="Options.id"
-          >{{Options.name}}</option>
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </div>
 
       <div class="boxchild">
-        <button @click="BoxClipByEitor" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearBoxClipByEitor" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="BoxClipByEitor">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearBoxClipByEitor">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -55,7 +68,7 @@ export default {
     // Box裁剪
     BoxClipByEitor() {
       this.clearBoxClipByEitor();
-       this.isDestroyFlag = false; //保留效果
+      this.isDestroyFlag = false; //保留效果
       if (editorBox) {
         handlerBox.activate();
         // editorBox.activate();
@@ -222,4 +235,3 @@ export default {
   },
 };
 </script>
-

src/components/Combinations/LayerAttribute/LayerAttribute.vue

@@ -8,10 +8,30 @@
   >
     <div class="sm-content">
       <div class="sm-panel-header">
-        <span :class="{titleColor:basicOptions}" class="title-txt" @click="choose(0)">{{Resource.basicOptions}}</span>
-        <span :class="{titleColor:styleSetting}" class="title-txt" @click="choose(1)">{{Resource.styleSetting}}</span>
-        <span :class="{titleColor:LayerOperation}" class="title-txt" @click="choose(2)">{{Resource.LayerOperation}}</span>
-        <span :class="{titleColor:Thematicmap}" class="title-txt" @click="choose(3)">{{Resource.Thematicmap}}</span>
+        <span
+          :class="{ titleColor: basicOptions }"
+          class="title-txt"
+          @click="choose(0)"
+          >{{ Resource.basicOptions }}</span
+        >
+        <span
+          :class="{ titleColor: styleSetting }"
+          class="title-txt"
+          @click="choose(1)"
+          >{{ Resource.styleSetting }}</span
+        >
+        <span
+          :class="{ titleColor: LayerOperation }"
+          class="title-txt"
+          @click="choose(2)"
+          >{{ Resource.LayerOperation }}</span
+        >
+        <span
+          :class="{ titleColor: Thematicmap }"
+          class="title-txt"
+          @click="choose(3)"
+          >{{ Resource.Thematicmap }}</span
+        >
         <span class="closeBtn" @click="toggleVisibility">&times;</span>
       </div>
 
@@ -19,19 +39,26 @@
       <div v-show="basicOptions">
         <div class="sm-function-module-content">
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.layerName}}</label>
-            <input class="sm-input-long" disabled type="text" v-model="layerName" />
+            <label class="label-container">{{ Resource.layerName }}</label>
+            <input
+              class="sm-input-long"
+              disabled
+              type="text"
+              v-model="layerName"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.shadowMode}}</label>
+            <label class="label-container">{{ Resource.shadowMode }}</label>
             <select class="sm-select" v-model="shadowType">
-              <option value="noShadow">{{Resource.noShadow}}</option>
-              <option value="chooseShadow">{{setSelectionShadow}}</option>
-              <option value="allShadow">{{Resource.setShadow}}</option>
+              <option value="noShadow">{{ Resource.noShadow }}</option>
+              <option value="chooseShadow">{{ setSelectionShadow }}</option>
+              <option value="allShadow">{{ Resource.setShadow }}</option>
             </select>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.shadowDarkness}} </label>
+            <label class="label-container"
+              >{{ Resource.shadowDarkness }}
+            </label>
             <div class="sm-solider-input-box lodbox">
               <input
                 class="min-solider"
@@ -44,35 +71,77 @@
             </div>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.visibility}}</label>
+            <label class="label-container">{{ Resource.visibility }}</label>
             <select class="sm-select" v-model="visibility">
-              <option value="onlyShowSlection">{{Resource.onlyShowSlection}}</option>
-              <option value="onlyHideSlection">{{Resource.onlyHideSlection}}</option>
-              <option value="showAll">{{Resource.showAll}}</option>
+              <option value="onlyShowSlection">
+                {{ Resource.onlyShowSlection }}
+              </option>
+              <option value="onlyHideSlection">
+                {{ Resource.onlyHideSlection }}
+              </option>
+              <option value="showAll">{{ Resource.showAll }}</option>
             </select>
           </div>
-       
+
           <div class="flexbox">
-            <label class="sm-viewshed-label-right">{{Resource.display}}</label>
-            <input style="margin-left: 10px" type="checkbox" v-model="display" />
-            <label style="width:21%"></label>
-            <label class="sm-viewshed-label-right">{{Resource.cullEnabled}}</label>
-            <input style="margin-left: 10px" type="checkbox" v-model="cullEnabled" />
+            <label class="sm-viewshed-label-right">{{
+              Resource.display
+            }}</label>
+            <input
+              style="margin-left: 10px"
+              type="checkbox"
+              v-model="display"
+            />
+            <label style="width: 21%"></label>
+            <label class="sm-viewshed-label-right">{{
+              Resource.cullEnabled
+            }}</label>
+            <input
+              style="margin-left: 10px"
+              type="checkbox"
+              v-model="cullEnabled"
+            />
           </div>
           <div class="flexbox">
-            <label class="sm-viewshed-label-right">{{Resource.multiSelection}}</label>
-            <input style="margin-left: 10px" type="checkbox" v-model="multiChoose" />
-            <label style="width:12%"></label>
-            <label class="sm-viewshed-label-right">{{Resource.bReleaseColor}}</label>
-            <input style="margin-left: 10px" type="checkbox" v-model="breleaseColor" />
+            <label class="sm-viewshed-label-right">{{
+              Resource.multiSelection
+            }}</label>
+            <input
+              style="margin-left: 10px"
+              type="checkbox"
+              v-model="multiChoose"
+            />
+            <label style="width: 12%"></label>
+            <label class="sm-viewshed-label-right">{{
+              Resource.bReleaseColor
+            }}</label>
+            <input
+              style="margin-left: 10px"
+              type="checkbox"
+              v-model="breleaseColor"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.visibleDistanceMin}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="minVisibleH" />
+            <label class="label-container">{{
+              Resource.visibleDistanceMin
+            }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="minVisibleH"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.visibleDistanceMax}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="maxVisibleH" />
+            <label class="label-container">{{
+              Resource.visibleDistanceMax
+            }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="maxVisibleH"
+            />
           </div>
         </div>
       </div>
@@ -80,16 +149,21 @@
       <div v-show="styleSetting">
         <div class="sm-function-module-content">
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.foreColor}}</label>
+            <label class="label-container">{{ Resource.foreColor }}</label>
             <ColorPicker class="sm-colorpicker" editable v-model="foreColor" />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.lineColor}}</label>
+            <label class="label-container">{{ Resource.lineColor }}</label>
             <ColorPicker class="sm-colorpicker" editable v-model="lineColor" />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.bottomAltitude}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="bottomAltitude" />
+            <label class="label-container">{{ Resource.bottomAltitude }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="bottomAltitude"
+            />
           </div>
           <div class="sm-function-module-sub-section">
             <label class="label-container">LOD ：</label>
@@ -105,24 +179,30 @@
             </div>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.fillStyle}}</label>
+            <label class="label-container">{{ Resource.fillStyle }}</label>
             <select class="sm-select" v-model="fillStyle">
-              <option value="fill">{{Resource.fillMode}}</option>
-              <option value="wireframe">{{Resource.lineMode}}</option>
-              <option value="fill-and-wireframe">{{Resource.fillAndLine}}</option>
+              <option value="fill">{{ Resource.fillMode }}</option>
+              <option value="wireframe">{{ Resource.lineMode }}</option>
+              <option value="fill-and-wireframe">
+                {{ Resource.fillAndLine }}
+              </option>
             </select>
           </div>
 
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.lineMode}}</label>
+            <label class="label-container">{{ Resource.lineMode }}</label>
             <select class="sm-select" v-model="lineMode">
-              <option value="triangle">{{Resource.TriangleWireframeMode}}</option>
-              <option value="quad">{{Resource.QuadWireframeMode}}</option>
-              <option value="sketch">{{Resource.SketchWireframeMode}}</option>
+              <option value="triangle">
+                {{ Resource.TriangleWireframeMode }}
+              </option>
+              <option value="quad">{{ Resource.QuadWireframeMode }}</option>
+              <option value="sketch">{{ Resource.SketchWireframeMode }}</option>
             </select>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.modelTransparency}}</label>
+            <label class="label-container">{{
+              Resource.modelTransparency
+            }}</label>
             <input
               class="sm-input-long"
               min="0"
@@ -134,18 +214,24 @@
           </div>
           <div class="sm-function-module-sub-section">
             <div class="sm-point"></div>
-            <label class="label-container">{{Resource.selectEffect}}</label>
+            <label class="label-container">{{ Resource.selectEffect }}</label>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.selectColorType}}</label>
+            <label class="label-container">{{
+              Resource.selectColorType
+            }}</label>
             <select class="sm-select" v-model="selectColorType">
-              <option value="0">{{Resource.mix}}</option>
-              <option value="1">{{Resource.replace}}</option>
+              <option value="0">{{ Resource.mix }}</option>
+              <option value="1">{{ Resource.replace }}</option>
             </select>
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.selectColor}}</label>
-            <ColorPicker class="sm-colorpicker" editable v-model="selectColor" />
+            <label class="label-container">{{ Resource.selectColor }}</label>
+            <ColorPicker
+              class="sm-colorpicker"
+              editable
+              v-model="selectColor"
+            />
           </div>
         </div>
       </div>
@@ -153,42 +239,80 @@
       <div v-show="LayerOperation" class="LayerOperation">
         <div class="sm-function-module-content">
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.ObliquePhotographyExcavation}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.ObliquePhotographyExcavation
+          }}</label>
           <div class="boxchild">
-            <button class="tbtn tbn1" type="button" @click="excavationRegion">{{Resource.ExecuteExcavation}}</button>
-            <button class="tbtn" type="button" @click="delExcavationRegion">{{Resource.ClearExcavation}}</button>
+            <el-button type="primary" size="mini" @click="excavationRegion">{{
+              Resource.ExecuteExcavation
+            }}</el-button>
+            <el-button
+              type="primary"
+              size="mini"
+              @click="delExcavationRegion"
+              >{{ Resource.ClearExcavation }}</el-button
+            >
           </div>
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.ObliquePhotographyFlatten}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.ObliquePhotographyFlatten
+          }}</label>
           <div class="boxchild">
-            <button class="tbtn tbn1" type="button" @click="flattenRegion">{{Resource.ModelFlatten}}</button>
-            <button class="tbtn" type="button" @click="delFlattenRegion">{{Resource.ClearFlatten}}</button>
+            <el-button type="primary" size="mini" @click="flattenRegion">{{
+              Resource.ModelFlatten
+            }}</el-button>
+            <el-button type="primary" size="mini" @click="delFlattenRegion">{{
+              Resource.ClearFlatten
+            }}</el-button>
           </div>
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.FloodAnalysis}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.FloodAnalysis
+          }}</label>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.MaxHeight}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="MaxHeight" />
+            <label class="label-container">{{ Resource.MaxHeight }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="MaxHeight"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.MinHeight}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="MinHeight" />
+            <label class="label-container">{{ Resource.MinHeight }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="MinHeight"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.FloodSpeed}}</label>
-            <input class="sm-input-long" min="0" type="number" v-model="FloodSpeed" />
+            <label class="label-container">{{ Resource.FloodSpeed }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              type="number"
+              v-model="FloodSpeed"
+            />
           </div>
           <div class="boxchild">
-            <button class="tbtn tbn1" type="button" @click="modelFlood">{{Resource.ExecuteFlood}}</button>
-            <button class="tbtn" type="button" @click="ModelFloodClear">{{Resource.ClearFlood}}</button>
+            <el-button type="primary" size="mini" @click="modelFlood">
+              {{ Resource.ExecuteFlood }}
+            </el-button>
+            <el-button type="primary" size="mini" @click="ModelFloodClear">
+              {{ Resource.ClearFlood }}
+            </el-button>
           </div>
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.SelectOffset}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.SelectOffset
+          }}</label>
           <br />
-          <label class="label-container">{{Resource.OpenSelectOffset}}</label>
+          <label class="label-container">{{ Resource.OpenSelectOffset }}</label>
           <input style="margin-left: 10px" type="checkbox" v-model="offset" />
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.OffsetX}}</label>
+            <label class="label-container">{{ Resource.OffsetX }}</label>
             <input
               class="sm-input-long"
               min="-50"
@@ -199,7 +323,7 @@
             />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.OffsetY}}</label>
+            <label class="label-container">{{ Resource.OffsetY }}</label>
             <input
               class="sm-input-long"
               min="-50"
@@ -210,7 +334,7 @@
             />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.offsetZ}}</label>
+            <label class="label-container">{{ Resource.offsetZ }}</label>
             <input
               class="sm-input-long"
               min="-50"
@@ -221,9 +345,11 @@
             />
           </div>
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.LayerColor}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.LayerColor
+          }}</label>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.brightness}}</label>
+            <label class="label-container">{{ Resource.brightness }}</label>
             <input
               class="sm-input-long"
               min="0"
@@ -234,7 +360,7 @@
             />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.contrast}}</label>
+            <label class="label-container">{{ Resource.contrast }}</label>
             <input
               class="sm-input-long"
               min="0"
@@ -245,11 +371,18 @@
             />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.hue}}</label>
-            <input class="sm-input-long" min="0" max="5" step="0.1" type="number" v-model="hue" />
+            <label class="label-container">{{ Resource.hue }}</label>
+            <input
+              class="sm-input-long"
+              min="0"
+              max="5"
+              step="0.1"
+              type="number"
+              v-model="hue"
+            />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.saturation}}</label>
+            <label class="label-container">{{ Resource.saturation }}</label>
             <input
               class="sm-input-long"
               min="0"
@@ -260,9 +393,13 @@
             />
           </div>
           <div class="sm-point"></div>
-          <label class="sm-function-module-sub-section-setting">{{Resource.PolygonOffset}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.PolygonOffset
+          }}</label>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.PolygonOffsetFactor}}</label>
+            <label class="label-container">{{
+              Resource.PolygonOffsetFactor
+            }}</label>
             <input
               class="sm-input-long"
               min="-100"
@@ -273,7 +410,9 @@
             />
           </div>
           <div class="sm-function-module-sub-section">
-            <label class="label-container">{{Resource.PolygonOffsetUnit}}</label>
+            <label class="label-container">{{
+              Resource.PolygonOffsetUnit
+            }}</label>
             <input
               class="sm-input-long"
               min="-100"
@@ -288,30 +427,54 @@
 
       <div v-show="Thematicmap" id="Thematicmap">
         <div class="sm-function-module-content">
-          <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+          <label class="sm-function-module-sub-section-setting">{{
+            Resource.symbolicLibrary
+          }}</label>
           <div class="symbolicLibrary">
             <div class="Thematicbox">
-              <div id="color" class="minbox polygon-symbol-font-selected" @click="thematicType(0)">
-                <span class="iconfont iconchunse"></span></div>
-                <label >{{Resource.ThematicmapColor}}</label>
+              <div
+                id="color"
+                class="minbox polygon-symbol-font-selected"
+                @click="thematicType(0)"
+              >
+                <span class="iconfont iconchunse"></span>
+              </div>
+              <label>{{ Resource.ThematicmapColor }}</label>
             </div>
             <div class="Thematicbox">
               <div class="minbox" id="img" @click="thematicType(1)">
-                <span class="iconfont icontiaowen"></span></div>
-                <label >{{Resource.ThematicmapImage}}</label>
+                <span class="iconfont icontiaowen"></span>
+              </div>
+              <label>{{ Resource.ThematicmapImage }}</label>
             </div>
           </div>
-          <div class="sm-function-module-sub-section" v-show="thematicMapType=='color'">
-            <label class="label-container">{{Resource.ThematicmapColor}}</label>
-            <ColorPicker class="sm-colorpicker" editable v-model="ThematicColor" />
+          <div
+            class="sm-function-module-sub-section"
+            v-show="thematicMapType == 'color'"
+          >
+            <label class="label-container">{{
+              Resource.ThematicmapColor
+            }}</label>
+            <ColorPicker
+              class="sm-colorpicker"
+              editable
+              v-model="ThematicColor"
+            />
           </div>
-          <div class="sm-function-module-sub-section" v-show="thematicMapType=='img'">
-            <label class="label-container">{{Resource.ImageData}}</label>
+          <div
+            class="sm-function-module-sub-section"
+            v-show="thematicMapType == 'img'"
+          >
+            <label class="label-container">{{ Resource.ImageData }}</label>
             <input class="sm-input" type="file" accept=".jpg, .png" id="file" />
           </div>
           <div class="boxchild">
-            <button class="tbtn tbn1" type="button" @click="setThematicmap">{{Resource.Setting}}</button>
-            <button class="tbtn" type="button" @click="delAllThematicmap">{{Resource.clear}}</button>
+            <el-button type="primary" size="mini" @click="setThematicmap">
+              {{ Resource.Setting }}
+            </el-button>
+            <el-button type="primary" size="mini" @click="delAllThematicmap">
+              {{ Resource.clear }}
+            </el-button>
           </div>
         </div>
       </div>
@@ -756,14 +919,12 @@ export default {
     //2
 
     foreColor: function (val) {
-      this.selectedLayer.style3D.fillForeColor = Cesium.Color.fromCssColorString(
-        val
-      );
+      this.selectedLayer.style3D.fillForeColor =
+        Cesium.Color.fromCssColorString(val);
     },
     lineColor: function (val) {
-      this.selectedLayer.style3D.lineColor = Cesium.Color.fromCssColorString(
-        val
-      );
+      this.selectedLayer.style3D.lineColor =
+        Cesium.Color.fromCssColorString(val);
     },
     bottomAltitude: function (val) {
       if (val === "" || val < 0) {
@@ -958,6 +1119,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "LayerAttribute";
-</style>
+</style>

src/components/Combinations/LayerManage/LayerManage.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="sm-panel layermanager" v-if="LayerManageShow">
+  <div class="sm-panel" v-if="LayerManageShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.LayerManage }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
     <Tabs value="">
       <TabPane :label="Resource.Resource" name="zyml">
         <div class="zyml">
           <el-input
-            placeholder="请输入查询关键字"
+            :placeholder="Resource.InputPlaceholder"
             prefix-icon="el-icon-search"
             v-model="treeSearchText"
             size="small"
@@ -78,7 +82,7 @@
                   @click="lower(item)"
                   v-if="
                     index < addlayerdata.length - 1 &&
-                      (item.type == 'Vector' || item.type == 'IMG')
+                    (item.type == 'Vector' || item.type == 'IMG')
                   "
                 />
                 <Icon
@@ -137,7 +141,7 @@ export default {
     return {
       defaultProps: {
         children: "children",
-        label: "label"
+        label: "label",
       },
       modellayerlist: [],
       vectorlayerlist: [],
@@ -157,21 +161,21 @@ export default {
         expand: true,
         checked: true,
         type: "S3M",
-        children: []
+        children: [],
       },
       imgLayersObj: {
         title: Resource.imageryLayer,
         expand: true,
         checked: true,
         type: "IMG",
-        children: []
+        children: [],
       },
       TerrainLayersObj: {
         title: Resource.terrainLayer,
         expand: true,
         checked: true,
         type: "TERRAIN",
-        children: []
+        children: [],
       },
 
       TreeDatas: [
@@ -181,31 +185,34 @@ export default {
           //   selected: true,
           //   contextmenu: true,
           children: [],
-          type: "ROOT"
-        }
+          type: "ROOT",
+        },
       ],
       contextData: null,
       hideS3mNames: [],
       hideImgNames: [],
-      hideTerrainNames: []
+      hideTerrainNames: [],
     };
   },
   computed: {
-    LayerManageShow: function() {
+    LayerManageShow: function () {
       return this.sharedState.toolBar[0];
     },
-    imgLayers: function() {
+    imgLayers: function () {
       return this.sharedState.imgLayerManage;
     },
-    terrainLayers: function() {
+    terrainLayers: function () {
       return this.sharedState.terrainLayerManage;
     },
-    S3MLayers: function() {
+    S3MLayers: function () {
       return this.sharedState.S3MLayerManage;
-    }
+    },
   },
 
   methods: {
+    toggleVisibility() {
+      store.setToolBarAction(0);
+    },
     filterNode(value, data) {
       if (!value) return true;
       return data.label.indexOf(value) !== -1;
@@ -223,17 +230,17 @@ export default {
         this.favoriteLayerList.push(data);
       }
       Collect(this.username, data.id)
-        .then(res => {
+        .then((res) => {
           if (res.statuscode == 200) {
             this.$message({
               message: "操作成功",
-              type: "success"
+              type: "success",
             });
           } else {
             this.$message.error(res.message);
           }
         })
-        .catch(e => {
+        .catch((e) => {
           this.$message.error(e);
         });
     },
@@ -268,7 +275,7 @@ export default {
             viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
               url: obj.url,
               isSct: true,
-              requestVertexNormals: true
+              requestVertexNormals: true,
             });
           } else {
             viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
@@ -289,26 +296,14 @@ export default {
       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
-            );
+            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
-            );
+            this.sceneLayers[obj.title][0][0].style3D.fillForeColor =
+              new Cesium.Color(1.0, 1.0, 1.0, value);
           }
           break;
         case "IMG": //影像
@@ -345,14 +340,14 @@ export default {
       viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
         url: LayerURL,
         isSct: true,
-        requestVertexNormals: true
+        requestVertexNormals: true,
       });
     },
 
     addImage(LayerURL) {
       var layer = viewer.imageryLayers.addImageryProvider(
         new Cesium.SuperMapImageryProvider({
-          url: LayerURL
+          url: LayerURL,
         })
       );
       viewer.flyTo(layer);
@@ -362,7 +357,7 @@ export default {
       let this_ = this;
       Cesium.when.all(
         promiseArray,
-        layers => {
+        (layers) => {
           this_.sceneLayers[obj.title] = layers;
           if (sceneName) {
             this.flyTo(sceneName);
@@ -383,7 +378,7 @@ export default {
           //   }
           // }
         },
-        function(e) {
+        function (e) {
           if (widget._showRenderLoopErrors) {
             let title = Resource.scpUrlErrorMsg;
             widget.showErrorPanel(title, undefined, e);
@@ -420,14 +415,14 @@ export default {
               break;
             case "S3MDATA": //scp
               viewer.scene.addS3MTilesLayerByScp(obj.url, {
-                name: obj.title
+                name: obj.title,
               });
               break;
             case "IMG": //影像
               let layer = viewer.imageryLayers.addImageryProvider(
                 new Cesium.SuperMapImageryProvider({
                   url: obj.url,
-                  name: obj.title
+                  name: obj.title,
                 })
               );
               this.layerparams[obj.id] = layer;
@@ -437,7 +432,7 @@ export default {
               let layer2 = viewer.imageryLayers.addImageryProvider(
                 new Cesium.SuperMapImageryProvider({
                   url: obj.url,
-                  name: obj.title
+                  name: obj.title,
                 })
               );
               this.vectorlayerlist.push(obj);
@@ -514,9 +509,8 @@ export default {
               }
               break;
             case "Terrain": //地形
-              viewer.scene.terrainProvider = new Cesium.EllipsoidTerrainProvider(
-                {}
-              );
+              viewer.scene.terrainProvider =
+                new Cesium.EllipsoidTerrainProvider({});
               break;
             default:
               null;
@@ -529,7 +523,7 @@ export default {
 
     //获取后台资源目录树结构
     getResourceTree() {
-      GetResourceTree().then(res => {
+      GetResourceTree().then((res) => {
         if (res.statuscode == 200) {
           this.TreeDatas = res.data;
         } else {
@@ -540,7 +534,7 @@ export default {
 
     //获取后台资源目录树结构
     getFavoriteLayers() {
-      GetMyCollect().then(res => {
+      GetMyCollect().then((res) => {
         if (res.statuscode == 200) {
           this.favoriteLayerList = res.data;
         } else {
@@ -641,7 +635,7 @@ export default {
         array[index + 1] = temp;
       }
       return array;
-    }
+    },
   },
 
   mounted() {
@@ -652,8 +646,8 @@ export default {
   watch: {
     treeSearchText(val) {
       this.$refs.tree.filter(val);
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/Combinations/Measure/Measure.vue

@@ -2,7 +2,7 @@
   <div class="sm-panel" id="measure-panel" v-show="measureComb" v-drag>
     <div class="sm-content">
       <div class="sm-panel-header">
-        <span>{{Resource.measure}}</span>
+        <span>{{ Resource.measure }}</span>
         <span class="closeBtn" @click="toggleVisibility">&times;</span>
       </div>
       <div>
@@ -11,7 +11,7 @@
             @click="distanceClk"
             class="sm-btn sm-measure-btn"
             id="distance"
-            :title = Resource.SpatialDistance
+            :title="Resource.SpatialDistance"
             type="button"
           >
             <span class="iconfont iconVue-measure-distance"></span>
@@ -20,26 +20,38 @@
             @click="GroundDistanceClk"
             class="sm-btn sm-measure-btn"
             id="GroundDistance"
-            :title= Resource.GroundDistance
+            :title="Resource.GroundDistance"
             type="button"
           >
             <span class="iconfont iconVue-measure-GroundDistance"></span>
           </button>
 
-          <button @click="areaClk" class="sm-btn sm-measure-btn" id="area" :title= Resource.SpaceArea type="button">
+          <button
+            @click="areaClk"
+            class="sm-btn sm-measure-btn"
+            id="area"
+            :title="Resource.SpaceArea"
+            type="button"
+          >
             <span class="iconfont iconVue-measure-area"></span>
           </button>
           <button
             @click="GroundAreaClk"
             class="sm-btn sm-measure-btn"
             id="GroundArea"
-            :title = Resource.FloorArea
+            :title="Resource.FloorArea"
             type="button"
           >
             <span class="iconfont iconVue-measure-GroundArea"></span>
           </button>
 
-          <button @click="heightClk" class="sm-btn sm-measure-btn" id="height" :title = Resource.height type="button">
+          <button
+            @click="heightClk"
+            class="sm-btn sm-measure-btn"
+            id="height"
+            :title="Resource.height"
+            type="button"
+          >
             <span class="iconfont iconVue-measure-height"></span>
           </button>
 
@@ -47,20 +59,32 @@
             @click="ProjectArea"
             class="sm-btn sm-measure-btn"
             id="ProjectArea"
-            :title= Resource.shadowArea
+            :title="Resource.shadowArea"
             type="button"
           >
             <span class="iconfont iconVue-measure-GroundArea"></span>
           </button>
 
-          <button @click="clear" class="sm-btn sm-measure-btn" id="clear" :title= Resource.clear type="button">
+          <button
+            @click="clear"
+            class="sm-btn sm-measure-btn"
+            id="clear"
+            :title="Resource.clear"
+            type="button"
+          >
             <span class="iconfont iconVue-measure-clear"></span>
           </button>
         </div>
         <div class="sm-half sm-measure-half" v-show="isShowEllipsoid">
-          <label class="sm-function-module-sub-section-caption" style>{{Resource.ellipsoid}}</label>
-          <select class="sm-select sm-measure-select" id="EllipsoidMode" v-model="EllipsoidMode">
-            <option selected value="圆球">{{Resource.RoundBall}}</option>
+          <label class="sm-function-module-sub-section-caption" style>{{
+            Resource.ellipsoid
+          }}</label>
+          <select
+            class="sm-select sm-measure-select"
+            id="EllipsoidMode"
+            v-model="EllipsoidMode"
+          >
+            <option selected value="圆球">{{ Resource.RoundBall }}</option>
             <option selected value="CGCS2000">CGCS2000</option>
             <option value="XIAN80">XIAN80</option>
             <option value="WGS84">WGS84</option>
@@ -69,7 +93,7 @@
         <div v-show="isShowDVH">
           <label class="third">
             <input checked id="showLine" type="checkbox" v-model="isShowLine" />
-            <span>{{Resource.ShowContour}}</span>
+            <span>{{ Resource.ShowContour }}</span>
           </label>
         </div>
       </div>
@@ -86,8 +110,8 @@ export default {
   props: {
     collapsed: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
@@ -129,10 +153,9 @@ export default {
   //   }
   // },
   // 监听viewer
-  mounted() {
-  },
+  mounted() {},
   computed: {
-    measureComb: function() {
+    measureComb: function () {
       return this.sharedState.toolBar[7];
     },
     // viewerInit: function() {
@@ -156,7 +179,7 @@ export default {
       );
       let screenSpaceEventHandler = this.ScreenSpaceEventHandler;
 
-      screenSpaceEventHandler.setInputAction(function(e) {
+      screenSpaceEventHandler.setInputAction(function (e) {
         var pickedObject = scene.pickPosition(e.position);
 
         if (that.clampMode === Cesium.ClampMode.Space) {
@@ -167,9 +190,9 @@ export default {
                 opaqueRS: Cesium.RenderState.fromCache({
                   depthMask: true,
                   depthTest: {
-                    enabled: true
-                  }
-                })
+                    enabled: true,
+                  },
+                }),
               });
             }
 
@@ -178,8 +201,8 @@ export default {
                 width: 2,
                 positions: [pickedObject, pickedObject],
                 material: Cesium.Material.fromType(Cesium.Material.ColorType, {
-                  color: Cesium.Color.fromCssColorString("#51ff00")
-                })
+                  color: Cesium.Color.fromCssColorString("#51ff00"),
+                }),
               });
               viewer.scene.primitives.add(that.polylineCollection);
             }
@@ -190,7 +213,7 @@ export default {
               that.polylineNoTransparent.show = true;
               that.polylineNoTransparent.positions = [
                 pickedObject,
-                pickedObject
+                pickedObject,
               ];
             }
 
@@ -211,11 +234,11 @@ export default {
       );
       let handlerDis = this.handlerDis;
       //注册测距功能事件
-      handlerDis.measureEvt.addEventListener(function(result) {
+      handlerDis.measureEvt.addEventListener(function (result) {
         if (that.clampMode === Cesium.ClampMode.Ground && that.Ellipsoid) {
           //贴地、椭球
           var polylineGeometry = new Cesium.PolylineGeometry({
-            positions: result.positions
+            positions: result.positions,
           });
           var dis = Number(
             scene.globe.computeSurfaceDistance(polylineGeometry, that.Ellipsoid)
@@ -235,7 +258,7 @@ export default {
         }
       });
 
-      handlerDis.activeEvt.addEventListener(function(isActive) {
+      handlerDis.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           that.handlerDis.clampMode = that.clampMode;
           viewer.enableCursorStyle = false;
@@ -243,14 +266,12 @@ export default {
           document.body.classList.add("measureCur");
 
           if (that.clampMode === Cesium.ClampMode.Space) {
-            that.handlerDis.lineColor = Cesium.Color.fromCssColorString(
-              "#51ff00"
-            ).withAlpha(0.2);
+            that.handlerDis.lineColor =
+              Cesium.Color.fromCssColorString("#51ff00").withAlpha(0.2);
             that.handlerDis.lineWidth = 4;
           } else {
-            that.handlerDis.lineColor = Cesium.Color.fromCssColorString(
-              "#51ff00"
-            );
+            that.handlerDis.lineColor =
+              Cesium.Color.fromCssColorString("#51ff00");
             that.handlerDis.lineWidth = 2;
           }
         } else {
@@ -267,7 +288,7 @@ export default {
       );
       let handlerArea = this.handlerArea;
 
-      handlerArea.activeEvt.addEventListener(function(isActive) {
+      handlerArea.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           handlerArea.clampMode = that.clampMode;
           viewer.enableCursorStyle = false;
@@ -276,15 +297,13 @@ export default {
 
           that.polygonPositions = [];
           if (that.clampMode === Cesium.ClampMode.Space) {
-            that.handlerArea.lineColor = Cesium.Color.fromCssColorString(
-              "#51ff00"
-            ).withAlpha(0.2);
+            that.handlerArea.lineColor =
+              Cesium.Color.fromCssColorString("#51ff00").withAlpha(0.2);
             that.handlerArea.lineWidth = 4;
             // that.handlerArea.fillColor = Cesium.Color.ORANGE.withAlpha(0.5);
           } else {
-            that.handlerArea.lineColor = Cesium.Color.fromCssColorString(
-              "#51ff00"
-            );
+            that.handlerArea.lineColor =
+              Cesium.Color.fromCssColorString("#51ff00");
             that.handlerArea.lineWidth = 2;
             // that.handlerArea.fillColor = Cesium.Color.ORANGE.withAlpha(0.5);
           }
@@ -294,11 +313,11 @@ export default {
         }
       });
 
-      handlerArea.measureEvt.addEventListener(function(result) {
+      handlerArea.measureEvt.addEventListener(function (result) {
         if (that.clampMode === Cesium.ClampMode.Ground && that.Ellipsoid) {
           //贴地、椭球
           var polygonGeometry = new Cesium.PolygonGeometry.fromPositions({
-            positions: result.positions
+            positions: result.positions,
           });
           var mj = Number(
             scene.globe.computeSurfaceArea(polygonGeometry, that.Ellipsoid)
@@ -340,7 +359,7 @@ export default {
               eastFalse: 500000.0,
               northFalse: 0.0,
               semimajorAxis: 6378137,
-              inverseFlattening: 298.257222101
+              inverseFlattening: 298.257222101,
             });
             var cartesians = [];
             for (var i = 0; i < positions.length; i++) {
@@ -374,7 +393,7 @@ export default {
         }
       });
 
-      screenSpaceEventHandler.setInputAction(function(movement) {
+      screenSpaceEventHandler.setInputAction(function (movement) {
         if (
           that.clampMode === Cesium.ClampMode.Space &&
           that.handlerArea.isDrawing
@@ -389,7 +408,7 @@ export default {
                 polygonHierarchy: new Cesium.PolygonHierarchy(
                   that.polygonPositions
                 ),
-                perPositionHeight: perPositionHeight
+                perPositionHeight: perPositionHeight,
               }),
               attributes: {
                 color: new Cesium.ColorGeometryInstanceAttribute(
@@ -397,9 +416,9 @@ export default {
                   165 / 255,
                   0,
                   0.3
-                )
+                ),
                 // color: new Cesium.Color.ORANGE.withAlpha(0.3),
-              }
+              },
             });
           }
           if (!that.polygonTransparent) {
@@ -408,9 +427,9 @@ export default {
                 geometryInstances: that.polygonInstance,
                 appearance: new Cesium.PerInstanceColorAppearance({
                   renderState: {
-                    depthTest: false
-                  }
-                })
+                    depthTest: false,
+                  },
+                }),
               })
             );
           }
@@ -428,7 +447,7 @@ export default {
       );
       let handlerHeight = this.handlerHeight;
 
-      handlerHeight.measureEvt.addEventListener(function(result) {
+      handlerHeight.measureEvt.addEventListener(function (result) {
         var distance =
           result.distance > 1000
             ? (result.distance / 1000).toFixed(2) + "km"
@@ -457,7 +476,7 @@ export default {
         handlerHeight.vLabel.text = "垂直高度:" + vHeight;
         handlerHeight.hLabel.text = "水平距离:" + hDistance;
       });
-      this.handlerHeight.activeEvt.addEventListener(function(isActive) {
+      this.handlerHeight.activeEvt.addEventListener(function (isActive) {
         if (isActive == true) {
           viewer.enableCursorStyle = false;
           viewer._element.style.cursor = "";
@@ -528,12 +547,13 @@ export default {
       isoline.Opacity = 0.4;
       viewer.scene.globe.HypsometricSetting = {
         hypsometricSetting: isoline,
-        analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
+        analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
       };
       for (var i = 0; i < this.layers.length; i++) {
         this.layers[i].hypsometricSetting = {
           hypsometricSetting: isoline,
-          analysisMode: Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL
+          analysisMode:
+            Cesium.HypsometricSettingEnum.AnalysisRegionMode.ARM_ALL,
         };
       }
     },
@@ -592,20 +612,20 @@ export default {
     },
     clear() {
       this.clearAll();
-    }
+    },
   },
   watch: {
-    isShowLine: function(newValue) {
+    isShowLine: function (newValue) {
       if (!newValue) {
         this.clearLine();
       }
     },
-    measureComb: function(val) {
+    measureComb: function (val) {
       if (val && !this.handlerDis) {
         this.init(val);
       }
     },
-    EllipsoidMode: function(newValue) {
+    EllipsoidMode: function (newValue) {
       let value = newValue;
       if (value == "XIAN80") {
         this.Ellipsoid = Cesium.Ellipsoid.XIAN80;
@@ -619,13 +639,13 @@ export default {
     },
     collapsed: {
       immediate: true,
-      handler: function(newValue, oldVal) {
+      handler: function (newValue, oldVal) {
         if (newValue) {
           this.show = !newValue;
         }
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>

src/components/Combinations/sceneAtttribute/sceneAtttribute.vue

@@ -8,11 +8,36 @@
   >
     <div class="sm-content">
       <div class="sm-panel-header">
-        <span :class="{titleColor:basicOptions}" class="title-txt" @click="choose(0)">{{Resource.basicOptions}}</span>
-        <span :class="{titleColor:cameraShow}" class="title-txt" @click="choose(1)">{{Resource.camera}}</span>
-        <span :class="{titleColor:light}" class="title-txt" @click="choose(2)">{{Resource.light}}</span>
-        <span :class="{titleColor:ParticleSystem}" class="title-txt" @click="choose(3)">{{Resource.ParticleSystem}}</span>
-        <span :class="{titleColor:otherOptions}" class="title-txt" @click="choose(4)">{{Resource.otherOptions}}</span>
+        <span
+          :class="{ titleColor: basicOptions }"
+          class="title-txt"
+          @click="choose(0)"
+          >{{ Resource.basicOptions }}</span
+        >
+        <span
+          :class="{ titleColor: cameraShow }"
+          class="title-txt"
+          @click="choose(1)"
+          >{{ Resource.fly }}</span
+        >
+        <span
+          :class="{ titleColor: light }"
+          class="title-txt"
+          @click="choose(2)"
+          >{{ Resource.light }}</span
+        >
+        <span
+          :class="{ titleColor: ParticleSystem }"
+          class="title-txt"
+          @click="choose(3)"
+          >{{ Resource.ParticleSystem }}</span
+        >
+        <span
+          :class="{ titleColor: otherOptions }"
+          class="title-txt"
+          @click="choose(4)"
+          >{{ Resource.otherOptions }}</span
+        >
         <span class="closeBtn" @click="toggleVisibility">&times;</span>
       </div>
 
@@ -92,7 +117,5 @@ export default {
       }
     },
   },
-
 };
 </script>
-

src/components/Combinations/toolBar/toolBar.scss

@@ -57,7 +57,7 @@
     justify-content: flex-start;
     position: absolute;
     top: 8px;
-    right: 200px;
+    right: 280px;
     margin: 5px 0 0 5px;
     // background: url(/static/images/bigscreen/filter-bg.png) no-repeat;
     background-size: cover;

src/components/Combinations/toolBar/toolBar.vue

@@ -13,19 +13,29 @@
       <ul v-if="show">
         <li
           class="sm-btn sm-tool-btn"
-          :title="Resource.analysis"
-          @click="choose(6)"
+          :title="Resource.PoinyQuery"
+          @click="choose(9)"
         >
-          <span class="iconfont iconsanweifenxi"></span>
-        </li>
-        <li class="sm-btn sm-tool-btn" title="点击查询" @click="choose(9)">
-          <Icon
+          <i class="el-icon-thumb"></i>
+          <!-- <Icon
             type="md-information-circle"
             style="color: #51e9ff !important"
-          />
+          /> -->
+        </li>
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.PlacenameLocation"
+          @click="choose(10)"
+        >
+          <i class="el-icon-place"></i>
+          <!-- <Icon type="logo-xbox" style="color: #51e9ff !important" /> -->
         </li>
-        <li class="sm-btn sm-tool-btn" title="地名地址" @click="choose(10)">
-          <Icon type="logo-xbox" style="color: #51e9ff !important" />
+        <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"
@@ -34,13 +44,6 @@
         >
           <span class="iconfont iconditushezhi"></span>
         </li> -->
-        <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"
@@ -64,17 +67,25 @@
         </li> -->
         <li
           class="sm-btn sm-tool-btn"
-          :title="Resource.measure"
-          @click="choose(7)"
+          :title="Resource.onlineEditing"
+          @click="choose(8)"
         >
-          <span class="iconfont iconliangsuan"></span>
+          <span class="iconfont iconzaixianbianji"></span>
         </li>
         <li
           class="sm-btn sm-tool-btn"
-          :title="Resource.onlineEditing"
-          @click="choose(8)"
+          :title="Resource.analysis"
+          @click="choose(6)"
         >
-          <span class="iconfont iconzaixianbianji"></span>
+          <span class="iconfont iconsanweifenxi"></span>
+        </li>
+        <li
+          class="sm-btn sm-tool-btn"
+          :title="Resource.sceneOptions"
+          @click="choose(3)"
+        >
+          <i class="el-icon-setting"></i>
+          <!-- <span class="iconfont iconchangjingshezhi"></span> -->
         </li>
         <!-- <li class="sm-btn sm-tool-btn" title="城市设计" @click="choose(9)">
           <span class="iconfont iconVue-sightline"></span>
@@ -115,12 +126,10 @@
     <wind-particle></wind-particle>
     <placename-location
       class="sm-panel"
-      v-if="plan"
       style="width: 400px; height: 400px; z-index: 999999"
     ></placename-location>
     <click-query
       class="sm-panel"
-      v-if="clickShow"
       style="width: 400px; height: 700px; z-index: 999999"
     ></click-query>
   </div>
@@ -148,34 +157,21 @@ export default {
 
   methods: {
     toggleVisibility() {
-      // 验证是否为点击事件，是则继续执行click事件，否则不执行
-      // let isClick = document
-      //   .getElementById("dragbtn")
-      //   .getAttribute("data-flag");
-      // if (isClick !== "true") {
-      //   return false;
-      // }
       //控制组件界面显隐
       this.show = !this.show;
     },
     choose(i) {
-      if (i == 9) {
-        this.plan = false;
-        this.clickShow = !this.clickShow;
-      } else if (i == 10) {
-        this.clickShow = false;
-        this.plan = !this.plan;
-      } else {
-        this.clickShow = false;
-        this.plan = false;
-        store.setToolBarAction(i);
-      }
-      // 验证是否为点击事件，是则继续执行click事件，否则不执行
-      // let isClick = document
-      //   .getElementById("dragbtn")
-      //   .getAttribute("data-flag");
-      // if (isClick !== "true") {
-      //   return false;
+      store.setToolBarAction(i);
+      // if (i == 9) {
+      //   this.plan = false;
+      //   this.clickShow = !this.clickShow;
+      // } else if (i == 10) {
+      //   this.clickShow = false;
+      //   this.plan = !this.plan;
+      // } else {
+      //   this.clickShow = false;
+      //   this.plan = false;
+      //   store.setToolBarAction(i);
       // }
     },
   },

src/components/OnlineEdit/addPolygon/addPolygon.vue

@@ -1,58 +1,81 @@
 <template>
   <div class="sm-function-module-content" v-show="addpolygon">
-    <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+    <label class="sm-function-module-sub-section-setting">{{
+      Resource.symbolicLibrary
+    }}</label>
     <div class="symbolicLibrary">
       <div
         class="Thematicbox"
-        :class="{lightSelected:polygonType===0}"
+        :class="{ lightSelected: polygonType === 0 }"
         @click="polygonSelectType(0)"
       >
         <div id="pointLight" class="minbox">
           <span class="iconfont iconchunse"></span>
-        </div>{{Resource.pureColor}}
+        </div>
+        {{ Resource.pureColor }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polygonType===1}"
+        :class="{ lightSelected: polygonType === 1 }"
         @click="polygonSelectType(1)"
       >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconwangge"></span>
-        </div>{{Resource.gridding}}
+        </div>
+        {{ Resource.gridding }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polygonType===2}"
+        :class="{ lightSelected: polygonType === 2 }"
         @click="polygonSelectType(2)"
       >
         <div class="minbox" id="directionalLight">
           <span class="iconfont icontiaowen"></span>
-        </div>{{Resource.stripe}}
+        </div>
+        {{ Resource.stripe }}
       </div>
     </div>
     <!-- 纯色 -->
-    <div v-show="polygonType===0">
+    <div v-show="polygonType === 0">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolColor}}</label>
+        <label class="label-container">{{ Resource.polygonSymbolColor }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="SolidColor" />
       </div>
     </div>
     <!-- 网格 -->
-    <div v-show="polygonType===1">
+    <div v-show="polygonType === 1">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolColor}}</label>
+        <label class="label-container">{{ Resource.polygonSymbolColor }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="gridColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolGridLineThickness}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="gridWidth" />
+        <label class="label-container">{{
+          Resource.polygonSymbolGridLineThickness
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="gridWidth"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolGridLineCount}}</label>
-        <input class="sm-input-long" min="2" step="1.0" type="number" v-model="gridCount" />
+        <label class="label-container">{{
+          Resource.polygonSymbolGridLineCount
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="2"
+          step="1.0"
+          type="number"
+          v-model="gridCount"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolGridCellAlpha}}</label>
+        <label class="label-container">{{
+          Resource.polygonSymbolGridCellAlpha
+        }}</label>
         <input
           class="sm-input-long"
           min="0.1"
@@ -64,41 +87,71 @@
       </div>
     </div>
     <!-- 条纹 -->
-    <div v-show="polygonType===2">
+    <div v-show="polygonType === 2">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolStripeEvenColor}}</label>
-        <ColorPicker class="sm-colorpicker" editable v-model="StripeEvenColor" />
+        <label class="label-container">{{
+          Resource.polygonSymbolStripeEvenColor
+        }}</label>
+        <ColorPicker
+          class="sm-colorpicker"
+          editable
+          v-model="StripeEvenColor"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolStripeOddColor}}</label>
+        <label class="label-container">{{
+          Resource.polygonSymbolStripeOddColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="StripeOddColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolStripeRepeat}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="StripeRepeat " />
+        <label class="label-container">{{
+          Resource.polygonSymbolStripeRepeat
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="StripeRepeat"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolStripeOffset}}</label>
-        <input class="sm-input-long" min="0" step="1.0" type="number" v-model="StripeOffset " />
+        <label class="label-container">{{
+          Resource.polygonSymbolStripeOffset
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          step="1.0"
+          type="number"
+          v-model="StripeOffset"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polygonSymbolStripeOrientation}}</label>
+        <label class="label-container">{{
+          Resource.polygonSymbolStripeOrientation
+        }}</label>
         <select class="sm-select" id="stopList" v-model="StripeOrientation">
-          <option value="0">{{Resource.horizontal}}</option>
-          <option value="1">{{Resource.vertical}}</option>
+          <option value="0">{{ Resource.horizontal }}</option>
+          <option value="1">{{ Resource.vertical }}</option>
         </select>
       </div>
     </div>
-<!-- editeditZ -->
+    <!-- editeditZ -->
     <div class="flexbox">
-      <label class="sm-viewshed-label-right">{{Resource.edit}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.edit }}</label>
       <input type="checkbox" v-model="isEdit" />
-      <label class="sm-viewshed-label-right">{{Resource.editZ}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.editZ }}</label>
       <input type="checkbox" v-model="isEditZ" />
     </div>
     <div class="boxchild">
-      <button class="tbtn tbn1" type="button" @click="drawPolygon">{{Resource.draw}}</button>
-      <button class="tbtn" type="button" @click="clearPolygon">{{Resource.eliminate}}</button>
+      <el-button type="primary" size="mini" @click="drawPolygon">{{
+        Resource.draw
+      }}</el-button>
+      <el-button type="primary" size="mini" @click="clearPolygon">{{
+        Resource.eliminate
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -338,10 +391,8 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("polygon-symbol-grid") === 0
       ) {
-        viewer.selectedEntity.polygon.material.lineThickness = new Cesium.Cartesian2(
-          Number(val),
-          Number(val)
-        );
+        viewer.selectedEntity.polygon.material.lineThickness =
+          new Cesium.Cartesian2(Number(val), Number(val));
       }
     },
     gridCount(val) {
@@ -351,10 +402,8 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("polygon-symbol-grid") === 0
       ) {
-        viewer.selectedEntity.polygon.material.lineCount = new Cesium.Cartesian2(
-          Number(val),
-          Number(val)
-        );
+        viewer.selectedEntity.polygon.material.lineCount =
+          new Cesium.Cartesian2(Number(val), Number(val));
       }
     },
     gridCellAlpha(val) {
@@ -400,6 +449,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "addPolygon";
-</style>
+</style>

src/components/OnlineEdit/addPolyline/addPolyline.vue

@@ -1,89 +1,125 @@
 <template>
   <div class="sm-function-module-content" v-show="addpolyline">
-    <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+    <label class="sm-function-module-sub-section-setting">{{
+      Resource.symbolicLibrary
+    }}</label>
     <div class="symbolicLibrary">
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===0}"
+        :class="{ lightSelected: polylineType === 0 }"
         @click="polylineSelectType(0)"
       >
         <div id="pointLight" class="minbox">
           <span class="iconfont iconshixian"></span>
-        </div>{{Resource.fulline}}
+        </div>
+        {{ Resource.fulline }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===1}"
+        :class="{ lightSelected: polylineType === 1 }"
         @click="polylineSelectType(1)"
       >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconxuxian"></span>
-        </div>{{Resource.Virtuallinear}}
+        </div>
+        {{ Resource.Virtuallinear }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===2}"
+        :class="{ lightSelected: polylineType === 2 }"
         @click="polylineSelectType(2)"
       >
         <div class="minbox" id="directionalLight">
           <span class="iconfont iconlunkuoxian"></span>
-        </div>{{Resource.contourline}}
+        </div>
+        {{ Resource.contourline }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===3}"
+        :class="{ lightSelected: polylineType === 3 }"
         @click="polylineSelectType(3)"
       >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconjiantouxian"></span>
-        </div>{{Resource.arrowline}}
+        </div>
+        {{ Resource.arrowline }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===4}"
+        :class="{ lightSelected: polylineType === 4 }"
         @click="polylineSelectType(4)"
       >
         <div class="minbox" id="directionalLight">
           <span class="iconfont iconguangyunxian"></span>
-        </div>{{Resource.Haloline}}
+        </div>
+        {{ Resource.Haloline }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:polylineType===5}"
+        :class="{ lightSelected: polylineType === 5 }"
         @click="polylineSelectType(5)"
       >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconweijixian"></span>
-        </div>{{Resource.Wakeline}}
+        </div>
+        {{ Resource.Wakeline }}
       </div>
     </div>
     <!-- 实线 -->
-    <div v-show="polylineType===0">
+    <div v-show="polylineType === 0">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="fullLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="fullLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="fullLineWidth"
+        />
       </div>
     </div>
     <!-- 虚线 -->
-    <div v-show="polylineType===1">
+    <div v-show="polylineType === 1">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
-        <ColorPicker class="sm-colorpicker" editable v-model="dottedLineColor" />
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
+        <ColorPicker
+          class="sm-colorpicker"
+          editable
+          v-model="dottedLineColor"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="dottedLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="dottedLineWidth"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolGapColor}}</label>
-        <ColorPicker class="sm-colorpicker" editable v-model="dottedLineGapColor" />
+        <label class="label-container">{{
+          Resource.polylineSymbolGapColor
+        }}</label>
+        <ColorPicker
+          class="sm-colorpicker"
+          editable
+          v-model="dottedLineGapColor"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineDashSectionLength}}</label>
+        <label class="label-container">{{
+          Resource.polylineDashSectionLength
+        }}</label>
         <input
           class="sm-input-long"
           min="1"
@@ -94,47 +130,83 @@
       </div>
     </div>
     <!-- 轮廓线 -->
-    <div v-show="polylineType===2">
+    <div v-show="polylineType === 2">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="oLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="oLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="oLineWidth"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolOutlineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolOutlineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="outLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolOutlineWdith}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="outLineWidth" />
+        <label class="label-container">{{
+          Resource.polylineSymbolOutlineWdith
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="outLineWidth"
+        />
       </div>
     </div>
     <!-- 箭头线 -->
-    <div v-show="polylineType===3">
+    <div v-show="polylineType === 3">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="arrowLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="arrowLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="arrowLineWidth"
+        />
       </div>
     </div>
     <!-- 光晕线 -->
-    <div v-show="polylineType===4">
+    <div v-show="polylineType === 4">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="glowLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1.0" type="number" v-model="glowLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1.0"
+          type="number"
+          v-model="glowLineWidth"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolGlowPower}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolGlowPower
+        }}</label>
         <input
           class="sm-input-long"
           min="0.05"
@@ -146,17 +218,27 @@
       </div>
     </div>
     <!-- 尾迹线 -->
-    <div v-show="polylineType===5">
+    <div v-show="polylineType === 5">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineSymbolLineColor}}</label>
+        <label class="label-container">{{
+          Resource.polylineSymbolLineColor
+        }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="TrailLineColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LineWidthPixel}}</label>
-        <input class="sm-input-long" min="1" step="1" type="number" v-model="TrailLineWidth" />
+        <label class="label-container">{{ Resource.LineWidthPixel }}</label>
+        <input
+          class="sm-input-long"
+          min="1"
+          step="1"
+          type="number"
+          v-model="TrailLineWidth"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.polylineTrailPercent}}</label>
+        <label class="label-container">{{
+          Resource.polylineTrailPercent
+        }}</label>
         <input
           class="sm-input-long"
           min="0.1"
@@ -168,14 +250,18 @@
       </div>
     </div>
     <div class="flexbox">
-      <label class="sm-viewshed-label-right">{{Resource.edit}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.edit }}</label>
       <input type="checkbox" v-model="isEdit" />
-      <label class="sm-viewshed-label-right">{{Resource.editZ}}</label>
+      <label class="sm-viewshed-label-right">{{ Resource.editZ }}</label>
       <input type="checkbox" v-model="isEditZ" />
     </div>
     <div class="boxchild">
-      <button class="tbtn tbn1" type="button" @click="drawPolyline">{{Resource.draw}}</button>
-      <button class="tbtn" type="button" @click="clearPolyline">{{Resource.eliminate}}</button>
+      <el-button type="primary" size="mini" @click="drawPolyline">{{
+        Resource.draw
+      }}</el-button>
+      <el-button type="primary" size="mini" @click="clearPolyline">{{
+        Resource.eliminate
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -614,6 +700,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "addPolyline";
-</style>
+</style>

src/components/OnlineEdit/addPonit/addPonit.vue

@@ -1,53 +1,101 @@
 <template>
   <div class="sm-function-module-content" v-show="addPoint">
-    <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+    <label class="sm-function-module-sub-section-setting">{{
+      Resource.symbolicLibrary
+    }}</label>
     <div class="symbolicLibrary">
       <div
-        v-for="(Options,index) in data"
+        v-for="(Options, index) in data"
         :key="Options.id"
         class="Thematicbox"
         :title="Options.name"
-        :class="{lightSelected:Options.id===idSelected}"
-        @click="pointSelectType(index,Options.path)"
+        :class="{ lightSelected: Options.id === idSelected }"
+        @click="pointSelectType(index, Options.path)"
       >
         <img :src="Options.thumbnail" alt />
       </div>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.pointSymbolColor}}</label>
+      <label class="label-container">{{ Resource.pointSymbolColor }}</label>
       <ColorPicker class="sm-colorpicker" editable v-model="pointColor" />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Xrotation}}</label>
-      <input class="sm-input-long" min="-180" max="180" step="1.0" type="number" v-model="pitch" />
+      <label class="label-container">{{ Resource.Xrotation }}</label>
+      <input
+        class="sm-input-long"
+        min="-180"
+        max="180"
+        step="1.0"
+        type="number"
+        v-model="pitch"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Yrotation}}</label>
-      <input class="sm-input-long" min="-180" max="180" step="1.0" type="number" v-model="roll" />
+      <label class="label-container">{{ Resource.Yrotation }}</label>
+      <input
+        class="sm-input-long"
+        min="-180"
+        max="180"
+        step="1.0"
+        type="number"
+        v-model="roll"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Zrotation}}</label>
-      <input class="sm-input-long" min="-180" max="180" step="1.0" type="number" v-model="heading" />
+      <label class="label-container">{{ Resource.Zrotation }}</label>
+      <input
+        class="sm-input-long"
+        min="-180"
+        max="180"
+        step="1.0"
+        type="number"
+        v-model="heading"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.zoom}}</label>
-      <input class="sm-input-long" step="0.1" min="0.1" type="number" v-model="scale" />
+      <label class="label-container">{{ Resource.zoom }}</label>
+      <input
+        class="sm-input-long"
+        step="0.1"
+        min="0.1"
+        type="number"
+        v-model="scale"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Xmobile}}</label>
-      <input class="sm-input-long" type="number" step="0.2" v-model="positionX" />
+      <label class="label-container">{{ Resource.Xmobile }}</label>
+      <input
+        class="sm-input-long"
+        type="number"
+        step="0.2"
+        v-model="positionX"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Ymobile}}</label>
-      <input class="sm-input-long" type="number" step="0.2" v-model="positionY" />
+      <label class="label-container">{{ Resource.Ymobile }}</label>
+      <input
+        class="sm-input-long"
+        type="number"
+        step="0.2"
+        v-model="positionY"
+      />
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.Zmobile}}</label>
-      <input class="sm-input-long" type="number" step="0.2" v-model="positionZ" />
+      <label class="label-container">{{ Resource.Zmobile }}</label>
+      <input
+        class="sm-input-long"
+        type="number"
+        step="0.2"
+        v-model="positionZ"
+      />
     </div>
-    <div class="boxchild" style="padding-left:0">
-      <span class="media-hidden" style="font-size:12px;width:100%">{{Resource.EditingTips}}</span>
-      <button class="tbtn" type="button" @click="clearPolygon">{{Resource.eliminate}}</button>
+    <div class="boxchild" style="padding-left: 0">
+      <span class="media-hidden" style="font-size: 12px; width: 100%">{{
+        Resource.EditingTips
+      }}</span>
+      <el-button type="primary" size="mini" @click="clearPolygon">{{
+        Resource.eliminate
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -158,7 +206,7 @@ export default {
         let instance = viewer.selectedEntity.primitive;
         let index = viewer.selectedEntity.index;
         instance.updateScale(new Cesium.Cartesian3(0, 0, 0), index);
-      };
+      }
       window.handlerPoint.deactivate();
       // common.clearHandlerDrawing("Point");
     },
@@ -276,6 +324,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "addPonit";
-</style>
+</style>

src/components/Query/PlacenameLocation/PlacenameLocation.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="sm-function-module-content">
+  <div class="sm-function-module-content" v-if="PlacenameLocationShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.PlacenameLocation }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
     <div class="flexbox">
       <el-input
         placeholder="请输入查询关键字"
@@ -16,11 +20,11 @@
         >清除</el-button
       >
     </div>
-    <div class="flexbox" style="height: 300px; width: 100%">
+    <div class="flexbox" style="height: 260px; width: 100%">
       <el-table
         :show-header="false"
         :data="tableData"
-        height="300"
+        height="260"
         border
         style="width: 100%"
         @row-click="handleRowClick"
@@ -70,14 +74,23 @@ export default {
       total: 100,
       page: 1,
       size: 10,
-      billboardHeight: 10
+      billboardHeight: 10,
     };
   },
   created() {},
   mounted() {
     this.poiquery();
   },
+  computed: {
+    PlacenameLocationShow() {
+      return store.state.toolBar[10];
+    },
+  },
   methods: {
+    toggleVisibility() {
+      store.setToolBarAction(10);
+      this.clear();
+    },
     handlePageChange(cur, a, b) {
       this.page = cur;
       this.poiquery();
@@ -90,8 +103,8 @@ export default {
       PoiQuery({
         name: this.poiSearchText,
         limit: this.size,
-        offset: (this.page - 1) * this.size
-      }).then(res => {
+        offset: (this.page - 1) * this.size,
+      }).then((res) => {
         if (res.statuscode == 200) {
           this.total = res.data.count;
           this.tableData = res.data.data;
@@ -118,9 +131,9 @@ export default {
         billboard: {
           image: "./static/images/location.png",
           width: 30,
-          height: 40
+          height: 40,
         },
-        name: "Mapimage" + row.x + row.y
+        name: "Mapimage" + row.x + row.y,
       });
     },
     /**
@@ -138,15 +151,15 @@ export default {
 
       viewer.camera.flyTo({
         destination,
-        orientation
+        orientation,
       });
-    }
+    },
   },
   watch: {
-    poiSearchText: function() {
+    poiSearchText: function () {
       this.page = 1;
       this.poiquery();
-    }
-  }
+    },
+  },
 };
 </script>

src/components/Query/clickQuery/clickQuery.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="sm-function-module-query">
+  <div class="sm-function-module-query" v-if="PoinyQueryShow">
+    <div class="sm-panel-header">
+      <span>{{ Resource.PoinyQuery }}</span>
+      <span class="closeBtn" @click="toggleVisibility">&times;</span>
+    </div>
     <div class="sm-function-module-content-btn">
       <el-button type="primary" size="small" @click.stop="mapLayerQuery"
         >点击</el-button
@@ -24,8 +28,8 @@
         @change="handleCollapseChange"
         v-if="
           activeLayerId &&
-            queryResults[activeLayerId] &&
-            queryResults[activeLayerId].length > 0
+          queryResults[activeLayerId] &&
+          queryResults[activeLayerId].length > 0
         "
       >
         <el-collapse-item
@@ -38,7 +42,7 @@
             查询结果{{ index + 1
             }}<i
               title="定位"
-              class="header-icon el-icon-s-promotion flyBtn"
+              class="header-icon el-icon-s-promotion flyBtn2"
               @click.stop="flyTo(index)"
             ></i>
           </template>
@@ -69,12 +73,12 @@ export default {
       columns: [
         {
           title: "字段",
-          key: "name"
+          key: "name",
         },
         {
           title: "值",
-          key: "value"
-        }
+          key: "value",
+        },
       ],
       layersDataUrl: window.layersDataUrl,
       layersData: [],
@@ -86,9 +90,14 @@ export default {
       queryResults: {},
       queryResultsGeom: {},
       viewer: window.viewer,
-      dataSourceLayer: null
+      dataSourceLayer: null,
     };
   },
+  computed: {
+    PoinyQueryShow: function () {
+      return store.state.toolBar[9];
+    },
+  },
   created() {
     this.viewer.entities.removeAll();
     this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
@@ -108,12 +117,16 @@ export default {
           }
         }
       }
-    }
+    },
   },
   mounted() {
-    this.mapLayerQuery();
+    //this.mapLayerQuery();
   },
   methods: {
+    toggleVisibility() {
+      this.removeMapLayerQuery();
+      store.setToolBarAction(9);
+    },
     addGeometrys(fill) {
       this.viewer.entities.removeAll();
       this.dataSourceLayer.entities.removeAll();
@@ -131,7 +144,7 @@ export default {
               positions: Cesium.Cartesian3.fromDegreesArray(points),
               width: 3,
               material: Cesium.Color.BLUE.withAlpha(0.9),
-              clampToGround: true
+              clampToGround: true,
             }),
             polygon: {
               //高程
@@ -140,10 +153,10 @@ export default {
               ),
               classificationType: Cesium.ClassificationType.BOTH,
               clampToGround: false,
-              material: Cesium.Color.RED.withAlpha(0.3)
+              material: Cesium.Color.RED.withAlpha(0.3),
               // material: videoElement,
               // perPositionHeight: true
-            }
+            },
           });
         } else {
           this.viewer.entities.add({
@@ -151,8 +164,8 @@ export default {
               positions: Cesium.Cartesian3.fromDegreesArray(points),
               width: 3,
               material: Cesium.Color.BLUE.withAlpha(0.9),
-              clampToGround: true
-            })
+              clampToGround: true,
+            }),
           });
         }
 
@@ -174,14 +187,14 @@ export default {
             positions: Cesium.Cartesian3.fromDegreesArray(points),
             width: 3,
             material: Cesium.Color.RED.withAlpha(0.9),
-            clampToGround: true
-          })
+            clampToGround: true,
+          }),
         });
         this.viewer.flyTo(e);
       } else {
         this.$message({
           message: "空间范围为空！",
-          type: "warning"
+          type: "warning",
         });
       }
     },
@@ -199,7 +212,7 @@ export default {
       that.queryResults = {};
       that.queryResultsGeom = {};
       that.viewer.entities.removeAll();
-      this.handler.setInputAction(async function(movement) {
+      this.handler.setInputAction(async function (movement) {
         that.activeLayerId = "0";
         that.layerList = [];
         that.layersData = [];
@@ -215,14 +228,14 @@ export default {
           pickedFeature.primitive
         ) {
           that.loading = true;
-          that.queryByPickFeature(pickedFeature, function(result, Fields) {
+          that.queryByPickFeature(pickedFeature, function (result, Fields) {
             that.loading = false;
             if (result != null) {
               result.features[0].fieldNames.forEach((fieldName, i) => {
-                const Field = Fields.find(c => c.FieldEn == fieldName);
+                const Field = Fields.find((c) => c.FieldEn == fieldName);
                 that.layersData.push({
                   label: Field ? Field.FieldCn : fieldName,
-                  value: result.features[0].fieldValues[i]
+                  value: result.features[0].fieldValues[i],
                 });
               });
             } else {
@@ -249,10 +262,10 @@ export default {
               geometry: {
                 parts: [1],
                 points: [{ y: xy.lat, x: xy.lng }],
-                type: "POINT"
+                type: "POINT",
               },
               bufferDistance: 0.00005,
-              hasGeometry: true
+              hasGeometry: true,
             };
             let e;
 
@@ -278,7 +291,7 @@ export default {
                   if (fieldName.toLowerCase().indexOf("shape") < 0) {
                     cur.push({
                       name: fieldName,
-                      value: e.features[u].fieldValues[i]
+                      value: e.features[u].fieldValues[i],
                     });
                   }
                 });
@@ -302,12 +315,13 @@ export default {
           } else {
             that.$message({
               message: "查询结果为空！",
-              type: "warning"
+              type: "warning",
+              customClass: "messageIndex",
             });
           }
         }
       }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-      this.handler.setInputAction(async function(movement) {
+      this.handler.setInputAction(async function (movement) {
         that.removeMapLayerQuery();
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
@@ -337,7 +351,7 @@ export default {
           getFeatureMode: "ID",
           datasetNames: [datasourceName],
           ids: [param.id],
-          hasGeometry: "false"
+          hasGeometry: "false",
         };
         if (!dataUrl) {
           completed(null);
@@ -383,7 +397,7 @@ export default {
       return {
         lat: lat,
         lng: lng,
-        alt: alt
+        alt: alt,
       };
     },
     /**
@@ -403,7 +417,7 @@ export default {
       return {
         x: Cesium.Math.toDegrees(p.longitude),
         y: Cesium.Math.toDegrees(p.latitude),
-        z: p.height
+        z: p.height,
       };
     },
     calcIserverURI(url) {
@@ -412,11 +426,11 @@ export default {
       uriArr[7] = "data";
       uriArr[8] = "featureResults.rjson?returnContent=true";
       return uriArr.join("/");
-    }
+    },
   },
   beforeDestroy() {
     this.removeMapLayerQuery();
-  }
+  },
 };
 </script>
 <style>
@@ -424,7 +438,7 @@ export default {
   text-align: center;
   padding-top: 5px;
 }
-.flyBtn {
+.flyBtn2 {
   position: absolute;
   right: 47px;
 }
@@ -436,7 +450,7 @@ export default {
 }
 
 .sm-function-module-content-table {
-  height: 604px;
+  height: 564px;
   overflow-y: auto;
 }
 

src/components/TerrainAnalysis/TerrainFlood/TerrainFlood.vue

@@ -2,21 +2,41 @@
   <div v-show="flood">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.MaximumVisibleElevation}}</label>
-        <input class="sm-input-long" type="number" min="0" v-model="MaxHeight" />
+        <label class="label-container">{{
+          Resource.MaximumVisibleElevation
+        }}</label>
+        <input
+          class="sm-input-long"
+          type="number"
+          min="0"
+          v-model="MaxHeight"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.MinimumVisibleElevation}}</label>
-        <input class="sm-input-long" type="number" min="0" v-model="MinHeight" />
+        <label class="label-container">{{
+          Resource.MinimumVisibleElevation
+        }}</label>
+        <input
+          class="sm-input-long"
+          type="number"
+          min="0"
+          v-model="MinHeight"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.TheCurrentLevel}}</label>
-        <input class="sm-input-long" disabled type="number" min="0" v-model="speedElevation" />
+        <label class="label-container">{{ Resource.TheCurrentLevel }}</label>
+        <input
+          class="sm-input-long"
+          disabled
+          type="number"
+          min="0"
+          v-model="speedElevation"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.colorSetting}}</label>
+        <label class="label-container">{{ Resource.colorSetting }}</label>
         <button class="sm-select sm-select-color" @click="showColor">
-          <span class="label2" :class="'band'+bntColor" style>&nbsp;</span>
+          <span class="label2" :class="'band' + bntColor" style>&nbsp;</span>
         </button>
         <div class="color-select" v-if="colorSelect">
           <span
@@ -26,14 +46,15 @@
             class="label ban"
             @click="changeColor"
             :key="band.id"
-          >&nbsp;</span>
+            >&nbsp;</span
+          >
         </div>
       </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
-            style="width:63%"
+            style="width: 63%"
             class="min-solider"
             type="range"
             v-model="transFlood"
@@ -42,7 +63,7 @@
             step="0.01"
           />
           <input
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             class="min-solider"
             type="number"
             v-model="transFlood"
@@ -53,10 +74,10 @@
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.FloodSpeed}}</label>
+        <label class="label-container">{{ Resource.FloodSpeed }}</label>
         <div class="sm-solider-input-box">
           <input
-            style="width:63%"
+            style="width: 63%"
             class="min-solider"
             type="range"
             v-model="speed"
@@ -65,7 +86,7 @@
             step="1"
           />
           <input
-            style="width:34%; height:25px"
+            style="width: 34%; height: 25px"
             class="min-solider"
             type="number"
             v-model="speed"
@@ -76,15 +97,19 @@
         </div>
       </div>
       <div class="boxchild">
-        <button @click="floodBegin" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="floodClear" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="floodBegin">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="floodClear">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-let hypFlood, floodColorTable,interval;
+let hypFlood, floodColorTable, interval;
 export default {
   name: "Sm3dTerrainFlood",
   data() {

src/components/TerrainAnalysis/TerrainIsoLine/TerrainIsoline.vue

@@ -2,37 +2,66 @@
   <div v-show="isoline">
     <div class="sm-function-module-content">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.MaximumVisibleElevation}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="fillMaxHeight" />
+        <label class="label-container">{{
+          Resource.MaximumVisibleElevation
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="fillMaxHeight"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.MinimumVisibleElevation}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="fillMinHeight" />
+        <label class="label-container">{{
+          Resource.MinimumVisibleElevation
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="fillMinHeight"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.isolineInterval}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="equivalentIsoline" />
+        <label class="label-container">{{ Resource.isolineInterval }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="equivalentIsoline"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.colorSetting}}</label>
+        <label class="label-container">{{ Resource.colorSetting }}</label>
         <!--            <ColorPicker  class="sm-colorpicker" v-model="color" alpha />-->
         <ColorPicker class="sm-colorpicker" editable v-model="color" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.displayMode}}</label>
-        <select class="sm-select" id="fillOptions" v-model="fillOptionsSelected">
+        <label class="label-container">{{ Resource.displayMode }}</label>
+        <select
+          class="sm-select"
+          id="fillOptions"
+          v-model="fillOptionsSelected"
+        >
           <option
             :value="Options.id"
             v-for="Options in fillOptions"
             :key="Options.id"
-          >{{Options.name}}</option>
+          >
+            {{ Options.name }}
+          </option>
         </select>
       </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" />
       <div class="boxchild">
-        <button @click="isoLine" class="tbtn tbn1" type="button">{{Resource.analyze}}</button>
-        <button @click="clearIsoLine" class="tbtn" type="button">{{Resource.eliminate}}</button>
+        <el-button type="primary" size="mini" @click="isoLine">{{
+          Resource.analyze
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="clearIsoLine">{{
+          Resource.eliminate
+        }}</el-button>
       </div>
     </div>
   </div>
@@ -121,7 +150,7 @@ export default {
           handlerPolygon.polyline.show = false;
           handlerPolygon.deactivate();
           if (this.isEdit) {
-            common.Edit(this, this.judge,"Polygon");
+            common.Edit(this, this.judge, "Polygon");
           }
         },
         (err) => {
@@ -251,7 +280,7 @@ export default {
         this.init();
       }
       if (val && this.isEdit) {
-        common.Edit(this, this.judge, this.positions,"Polygon");
+        common.Edit(this, this.judge, this.positions, "Polygon");
       } else {
         if (window.handlerPolygon) {
           if (window.handlerPolygon.polygon) {
@@ -274,7 +303,7 @@ export default {
     isEdit(val) {
       //编辑
       if (val) {
-        common.Edit(this, this.judge,"Polygon");
+        common.Edit(this, this.judge, "Polygon");
       } else {
         common.clearEditHandler("Polygon");
         if (window.handlerPolygon.polygon) {
@@ -340,7 +369,3 @@ export default {
 <style lang="scss" scoped>
 @import "TerrainIsoLine";
 </style>
-
-
-
-

src/components/TerrainAnalysis/TerrainSlope/TerrainSlope.vue

@@ -100,12 +100,12 @@
         >{{ Resource.SlopeExplain }}</label
       >
       <div class="boxchild">
-        <button @click="startSlope" class="tbtn tbn1" type="button">
+        <el-button type="primary" size="mini" @click="startSlope">
           {{ Resource.analyze }}
-        </button>
-        <button @click="clearSlope" class="tbtn" type="button">
+        </el-button>
+        <el-button type="primary" size="mini" @click="clearSlope">
           {{ Resource.eliminate }}
-        </button>
+        </el-button>
       </div>
     </div>
   </div>
@@ -147,7 +147,7 @@ export default {
           name: Resource.ShowColorArrow,
         },
       ],
-      showModeIndex: 0,
+      showModeIndex: 2,
       calModeIndex: 0,
       wide: Number,
       DisplayMode: Number,

src/components/addLayer/CustomServicePan/CustomServicePan.vue

@@ -1,42 +1,65 @@
 <template>
   <div class="sm-function-module-content" v-show="customServiceShow">
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.OpenLayer}}</label>
+      <label class="label-container">{{ Resource.OpenLayer }}</label>
       <select class="sm-select" v-model="LayerType">
-        <option value="S3M">{{Resource.s3mLayer}}</option>
-        <option value="IMAGERY">{{Resource.imageryLayer}}</option>
-        <option value="TERRAIN">{{Resource.terrainLayer}}</option>
+        <option value="S3M">{{ Resource.s3mLayer }}</option>
+        <option value="IMAGERY">{{ Resource.imageryLayer }}</option>
+        <option value="TERRAIN">{{ Resource.terrainLayer }}</option>
       </select>
       <div class="token">
-        <label>{{Resource.addToken}}</label>
+        <label>{{ Resource.addToken }}</label>
         <input style="margin-left: 10px" type="checkbox" v-model="addToken" />
       </div>
-      <input class="sm-input" type="text" :placeholder= Resource.layerUrl v-model="LayerURL" />
-      <input class="sm-input" type="text" :placeholder= Resource.layerName v-model="LayerNmae" />
       <input
         class="sm-input"
         type="text"
-        :placeholder= Resource.addToken
+        :placeholder="Resource.layerUrl"
+        v-model="LayerURL"
+      />
+      <input
+        class="sm-input"
+        type="text"
+        :placeholder="Resource.layerName"
+        v-model="LayerNmae"
+      />
+      <input
+        class="sm-input"
+        type="text"
+        :placeholder="Resource.addToken"
         v-show="addToken"
         v-model="LayerToken"
       />
       <div class="boxchild">
-        <button class="tbtn tbn1" type="button" @click="openLayer">{{Resource.confirm}}</button>
+        <el-button type="primary" size="mini" @click="openLayer">{{
+          Resource.confirm
+        }}</el-button>
       </div>
 
-      <label class="label-container">{{Resource.OpenScene}}</label>
-      <label>{{Resource.addToken}}</label>
-      <input style="margin-left: 10px" type="checkbox" v-model="addSceneToken" />
-      <input class="sm-input" type="text" :placeholder= Resource.sceneUrl v-model="SceneURL" />
+      <label class="label-container">{{ Resource.OpenScene }}</label>
+      <label>{{ Resource.addToken }}</label>
+      <input
+        style="margin-left: 10px"
+        type="checkbox"
+        v-model="addSceneToken"
+      />
       <input
         class="sm-input"
         type="text"
-         :placeholder= Resource.addToken
+        :placeholder="Resource.sceneUrl"
+        v-model="SceneURL"
+      />
+      <input
+        class="sm-input"
+        type="text"
+        :placeholder="Resource.addToken"
         v-show="addSceneToken"
         v-model="SceneToken"
       />
       <div class="boxchild">
-        <button class="tbtn tbn1" type="button" @click="openScene">{{Resource.confirm}}</button>
+        <el-button type="primary" size="mini" @click="openScene">
+          {{ Resource.confirm }}
+        </el-button>
       </div>
     </div>
   </div>
@@ -68,7 +91,7 @@ export default {
     // 添加自定义场景
     openScene() {
       if (this.SceneURL == null || this.SceneURL == "") {
-        this.$Message.error(Resource.urlNotNullMsg)
+        this.$Message.error(Resource.urlNotNullMsg);
         return;
       }
       // 检查地址是否正确
@@ -91,7 +114,7 @@ export default {
     // 打开自定义图层
     openLayer() {
       if (this.LayerURL == null || this.LayerURL == "") {
-         this.$Message.error(Resource.urlNotNullMsg)
+        this.$Message.error(Resource.urlNotNullMsg);
         return;
       }
       if (this.LayerURL.charAt(0) == '"' || this.LayerURL.charAt(0) == "'") {
@@ -120,10 +143,10 @@ export default {
       let options = {};
       if (this.LayerNmae) {
         options.name = this.LayerNmae;
-      }else{
-        this.$Message.warning(Resource.layerNameNotNullMsg)
+      } else {
+        this.$Message.warning(Resource.layerNameNotNullMsg);
         return;
-      };
+      }
       layerLen = viewer.scene.layers.layerQueue.length;
       promiseArray.push(viewer.scene.addS3MTilesLayerByScp(LayerURL, options));
       this.promiseWhen(promiseArray, true);
@@ -162,7 +185,6 @@ export default {
             store.setS3MLayerManage(viewer.scene.layers.layerQueue.length);
             store.setImgLayerManage(viewer.imageryLayers._layers.length);
             store.setTerrainLayerManage(viewer.terrainProvider.tablename);
-          
           }, 500);
           if (isSCP && layers[layerLen]) {
             viewer.flyTo(layers[layerLen]);
@@ -182,4 +204,4 @@ export default {
 
 <style lang="scss" scoped>
 @import "./CustomServicePan.scss";
-</style>
+</style>

src/components/sceneAtttribute/ParticleSystem/ParticleSystem.vue

@@ -1,37 +1,41 @@
 <template>
   <div class="sm-function-module-content" v-show="ParticleSystem">
-    <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+    <label class="sm-function-module-sub-section-setting">{{
+      Resource.symbolicLibrary
+    }}</label>
     <div class="symbolicLibrary">
       <div
         class="Thematicbox"
-        :class="{lightSelected:ParticleSystemSourceType===0}"
+        :class="{ lightSelected: ParticleSystemSourceType === 0 }"
         @click="ParticleType(0)"
       >
         <div id="pointLight" class="minbox">
           <span class="iconfont iconICON_huoyan"></span>
-        </div>{{Resource.Fire}}
+        </div>
+        {{ Resource.Fire }}
       </div>
       <div
         class="Thematicbox"
-        :class="{lightSelected:ParticleSystemSourceType===1}"
+        :class="{ lightSelected: ParticleSystemSourceType === 1 }"
         @click="ParticleType(1)"
       >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconICON_penquan"></span>
-        </div>{{Resource.Fountain}}
+        </div>
+        {{ Resource.Fountain }}
       </div>
     </div>
     <!-- 火焰 -->
     <div v-show="FireShow" class="ParticleSystem">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.emissionRate}}</label>
+        <label class="label-container">{{ Resource.emissionRate }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="1000.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="emissionRate"
           />
@@ -40,21 +44,21 @@
             min="0.0"
             max="1000.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="emissionRate"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.particleSize}}</label>
+        <label class="label-container">{{ Resource.particleSize }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             max="60.0"
             step="0.1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="particleSize"
           />
@@ -63,21 +67,23 @@
             min="0"
             max="60.0"
             step="0.1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="particleSize"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.minimumParticleLife}}</label>
+        <label class="label-container">{{
+          Resource.minimumParticleLife
+        }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.1"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="minimumParticleLife"
           />
@@ -86,21 +92,23 @@
             min="0.1"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="minimumParticleLife"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.maximumParticleLife}}</label>
+        <label class="label-container">{{
+          Resource.maximumParticleLife
+        }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.1"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="maximumParticleLife"
           />
@@ -109,21 +117,21 @@
             min="0.1"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="maximumParticleLife"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.minimumSpeed}}</label>
+        <label class="label-container">{{ Resource.minimumSpeed }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="minimumSpeed"
           />
@@ -132,21 +140,21 @@
             min="0.0"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="minimumSpeed"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.maximumSpeed}}</label>
+        <label class="label-container">{{ Resource.maximumSpeed }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="maximumSpeed"
           />
@@ -155,21 +163,21 @@
             min="0.0"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="maximumSpeed"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.startScale}}</label>
+        <label class="label-container">{{ Resource.startScale }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="startScale"
           />
@@ -178,21 +186,21 @@
             min="0.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="startScale"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.endScale}}</label>
+        <label class="label-container">{{ Resource.endScale }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="endScale"
           />
@@ -201,21 +209,21 @@
             min="0.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="endScale"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.gravity}}</label>
+        <label class="label-container">{{ Resource.gravity }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="-10.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="gravity"
           />
@@ -224,33 +232,33 @@
             min="-10.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="gravity"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LaunchType}}</label>
+        <label class="label-container">{{ Resource.LaunchType }}</label>
         <select class="sm-select" v-model="particleSystemType">
-          <option value="圆形放射">{{Resource.CircularRadiation}}</option>
-          <option value="球体放射">{{Resource.SpheroidRadiation}}</option>
-          <option value="圆锥体放射">{{Resource.ConicalRadiation}}</option>
-          <option value="盒状放射">{{Resource.BoxedRadiation}}</option>
+          <option value="圆形放射">{{ Resource.CircularRadiation }}</option>
+          <option value="球体放射">{{ Resource.SpheroidRadiation }}</option>
+          <option value="圆锥体放射">{{ Resource.ConicalRadiation }}</option>
+          <option value="盒状放射">{{ Resource.BoxedRadiation }}</option>
         </select>
       </div>
     </div>
     <!-- 喷泉 -->
     <div v-show="FountainShow" class="ParticleSystem">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.emissionRate}}</label>
+        <label class="label-container">{{ Resource.emissionRate }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="1000.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="emissionRate"
           />
@@ -259,21 +267,21 @@
             min="0.0"
             max="1000.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="emissionRate"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.particleSize}}</label>
+        <label class="label-container">{{ Resource.particleSize }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0"
             max="60.0"
             step="0.1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="particleSize"
           />
@@ -282,21 +290,23 @@
             min="0"
             max="60.0"
             step="0.1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="particleSize"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.minimumParticleLife}}</label>
+        <label class="label-container">{{
+          Resource.minimumParticleLife
+        }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.1"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="minimumParticleLife"
           />
@@ -305,21 +315,23 @@
             min="0.1"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="minimumParticleLife"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.maximumParticleLife}}</label>
+        <label class="label-container">{{
+          Resource.maximumParticleLife
+        }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.1"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="maximumParticleLife"
           />
@@ -328,21 +340,21 @@
             min="0.1"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="maximumParticleLife"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.minimumSpeed}}</label>
+        <label class="label-container">{{ Resource.minimumSpeed }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="minimumSpeed"
           />
@@ -351,21 +363,21 @@
             min="0.0"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="minimumSpeed"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.maximumSpeed}}</label>
+        <label class="label-container">{{ Resource.maximumSpeed }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="30.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="maximumSpeed"
           />
@@ -374,21 +386,21 @@
             min="0.0"
             max="30.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="maximumSpeed"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.startScale}}</label>
+        <label class="label-container">{{ Resource.startScale }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="startScale"
           />
@@ -397,21 +409,21 @@
             min="0.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="startScale"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.endScale}}</label>
+        <label class="label-container">{{ Resource.endScale }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="0.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="endScale"
           />
@@ -420,21 +432,21 @@
             min="0.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="endScale"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.gravity}}</label>
+        <label class="label-container">{{ Resource.gravity }}</label>
         <div class="sm-solider-input-box">
           <input
             class="min-solider"
             min="-10.0"
             max="10.0"
             step="1"
-            style="width:63%"
+            style="width: 63%"
             type="range"
             v-model="gravity"
           />
@@ -443,26 +455,33 @@
             min="-10.0"
             max="10.0"
             step="1"
-            style="width:34%"
+            style="width: 34%"
             type="number"
             v-model="gravity"
           />
         </div>
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.LaunchType}}</label>
+        <label class="label-container">{{ Resource.LaunchType }}</label>
         <select class="sm-select" v-model="particleSystemType">
-          <option value="圆形放射">{{Resource.CircularRadiation}}</option>
-          <option value="球体放射">{{Resource.SpheroidRadiation}}</option>
-          <option value="圆锥体放射">{{Resource.ConicalRadiation}}</option>
-          <option value="盒状放射">{{Resource.BoxedRadiation}}</option>
+          <option value="圆形放射">{{ Resource.CircularRadiation }}</option>
+          <option value="球体放射">{{ Resource.SpheroidRadiation }}</option>
+          <option value="圆锥体放射">{{ Resource.ConicalRadiation }}</option>
+          <option value="盒状放射">{{ Resource.BoxedRadiation }}</option>
         </select>
       </div>
     </div>
 
     <div class="boxchild">
-      <button class="tbtn tbn1" type="button" @click="addParticleSystem">{{Resource.Add}}</button>
-      <button class="tbtn" type="button" @click="clearParticleSystemSource">{{Resource.clear}}</button>
+      <el-button type="primary" size="mini" @click="addParticleSystem">{{
+        Resource.Add
+      }}</el-button>
+      <el-button
+        type="primary"
+        size="mini"
+        @click="clearParticleSystemSource"
+        >{{ Resource.clear }}</el-button
+      >
     </div>
   </div>
 </template>
@@ -958,6 +977,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "ParticleSystem";
-</style>
+</style>

src/components/sceneAtttribute/basicOptions/basicOptions.vue

@@ -144,12 +144,12 @@
       />
     </div>
     <div class="boxchild">
-      <button class="tbtn tbn1" type="button" @click="onQueryCoordinatesClk">
+      <el-button type="primary" size="mini" @click="onQueryCoordinatesClk">
         {{ Resource.StartQuery }}
-      </button>
-      <button class="tbtn" type="button" @click="clear">
+      </el-button>
+      <el-button type="primary" size="mini" @click="clear">
         {{ Resource.eliminate }}
-      </button>
+      </el-button>
     </div>
   </div>
 </template>

src/components/sceneAtttribute/camera/camera.scss

@@ -1,24 +1,24 @@
-
-.sm-function-module-content{
-  max-height: 528px;
+.sm-function-module-content {
+    max-height: 528px;
 }
 
 .sm-input-long,
-.sm-select ,
-.sm-colorpicker{
-  width: 55%;
+.sm-select,
+.sm-colorpicker {
+    width: 55%;
 }
 
-.sm-solider-input-box{
-  float: right;
-  width: 72%;
+.sm-solider-input-box {
+    float: right;
+    width: 72%;
 }
 
-
-.sm-function-module-sub-section{
-  .sm-function-module-sub-section{
-    margin-bottom: 0;
-  }
+.sm-function-module-sub-section {
+    .sm-function-module-sub-section {
+        margin-bottom: 0;
+    }
 }
 
-
+.flyBtn {
+    font-size: 18px;
+}

src/components/sceneAtttribute/camera/camera.vue

@@ -1,51 +1,58 @@
 <template>
   <div class="sm-function-module-content" v-show="cameraShow">
-    <label class="label-container">{{Resource.flyRoute}}</label>
-    <input class="sm-input" type="file" accept=".fpf" id="flyFile" style=" width: 100%;" />
+    <label class="label-container">{{ Resource.flyRoute }}</label>
+    <input
+      class="sm-input"
+      type="file"
+      accept=".fpf"
+      id="flyFile"
+      style="width: 100%"
+    />
     <div class="flybox">
-      <img
-        src="static/images/flypng/start.png"
-        :title = Resource.startFly
-        class="imgbox"
+      <i
+        class="el-icon-video-play flyBtn"
         @click="flyStart"
-      />
-      <img
-        src="static/images/flypng/pause.png"
-        :title= Resource.pauseFly
-        class="imgbox"
+        :title="Resource.startFly"
+      ></i>
+      <i
+        class="el-icon-video-pause flyBtn"
         @click="flyPause"
-      />
-      <img
-        src="static/images/flypng/stop.png"
-        :title= Resource.stopFly
-        class="imgbox"
+        :title="Resource.pauseFly"
+      ></i>
+      <i
+        class="el-icon-document-delete flyBtn"
         @click="flyStop"
-      />
+        :title="Resource.stopFly"
+      ></i>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.stopChoose}}</label>
+      <label class="label-container">{{ Resource.stopChoose }}</label>
       <select class="sm-select" id="stopList" v-model="stopSelected"></select>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.observe}}</label>
+      <label class="label-container">{{ Resource.observe }}</label>
       <div class="flexbox">
-        <label >{{Resource.pauseFly}}</label>
+        <el-button type="primary" size="mini" @click="onSpinClk">{{
+          Resource.rotatePoint
+        }}</el-button>
+        <el-button type="primary" size="mini" @click="onCancelSpinClk">
+          {{ Resource.cancelRotatePoint }}
+        </el-button>
+        <label>{{ Resource.pauseFly }}</label>
         <input type="checkbox" v-model="stopFlyCircle" />
-        <label >{{Resource.rotateCirculation}}</label>
+        <label>{{ Resource.rotateCirculation }}</label>
         <input type="checkbox" v-model="circulation" />
         <!-- <div class="rotateBtn"> -->
-        <button @click="onSpinClk">{{Resource.rotatePoint}}</button>
-        <button @click="onCancelSpinClk">{{Resource.cancelRotatePoint}}</button>
         <!-- </div> -->
       </div>
-      <label class="label-container">{{Resource.rotateSpeed}}</label>
+      <label class="label-container">{{ Resource.rotateSpeed }}</label>
       <div class="sm-solider-input-box">
         <input
           class="min-solider"
           min="0"
           max="50"
           step="0.1"
-          style="width:63%"
+          style="width: 63%"
           type="range"
           v-model="speed"
         />
@@ -54,23 +61,34 @@
           min="0"
           max="50"
           step="0.1"
-          style="width:34%"
+          style="width: 34%"
           type="number"
           v-model="speed"
         />
       </div>
     </div>
     <div class="sm-function-module-sub-section">
-      <label class="label-container">{{Resource.underground}}</label>
+      <label class="label-container">{{ Resource.underground }}</label>
       <br />
-      <label class="sm-viewshed-label-right">{{Resource.openUnderground}}</label>
+      <label class="sm-viewshed-label-right">{{
+        Resource.openUnderground
+      }}</label>
       <input type="checkbox" v-model="underground" />
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.cameraMinimumZoomDistance}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="cameraMinimumZoomDistance" />
+        <label class="label-container">{{
+          Resource.cameraMinimumZoomDistance
+        }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="cameraMinimumZoomDistance"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.SurfaceTransparency}}</label>
+        <label class="label-container">{{
+          Resource.SurfaceTransparency
+        }}</label>
         <input
           class="sm-input-long"
           min="0"
@@ -283,9 +301,8 @@ export default {
       }
     },
     cameraMinimumZoomDistance(val) {
-      viewer.scene.screenSpaceCameraController.minimumZoomDistance = Number(
-        val
-      );
+      viewer.scene.screenSpaceCameraController.minimumZoomDistance =
+        Number(val);
     },
     SurfaceTransparency(val) {
       viewer.scene.globe.globeAlpha = parseFloat(val);
@@ -294,6 +311,6 @@ export default {
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "camera";
-</style>
+</style>

src/components/sceneAtttribute/light/light.vue

@@ -1,80 +1,149 @@
 <template>
   <div class="sm-function-module-content" v-show="light">
-    <label class="sm-function-module-sub-section-setting">{{Resource.symbolicLibrary}}</label>
+    <label class="sm-function-module-sub-section-setting">{{
+      Resource.symbolicLibrary
+    }}</label>
     <div class="symbolicLibrary">
-      <div class="Thematicbox" :class="{lightSelected:lightSelect===0}" @click="lightType(0)">
+      <div
+        class="Thematicbox"
+        :class="{ lightSelected: lightSelect === 0 }"
+        @click="lightType(0)"
+      >
         <div id="pointLight" class="minbox">
           <span class="iconfont iconICON_dianguangyuan"></span>
-        </div>{{Resource.pointLight}}
+        </div>
+        {{ Resource.pointLight }}
       </div>
-      <div class="Thematicbox" :class="{lightSelected:lightSelect===1}" @click="lightType(1)">
+      <div
+        class="Thematicbox"
+        :class="{ lightSelected: lightSelect === 1 }"
+        @click="lightType(1)"
+      >
         <div class="minbox" id="spotLight">
           <span class="iconfont iconICON_juguangdeng"></span>
-        </div>{{Resource.spotLight}}
+        </div>
+        {{ Resource.spotLight }}
       </div>
-      <div class="Thematicbox" :class="{lightSelected:lightSelect===2}" @click="lightType(2)">
+      <div
+        class="Thematicbox"
+        :class="{ lightSelected: lightSelect === 2 }"
+        @click="lightType(2)"
+      >
         <div class="minbox" id="directionalLight">
           <span class="iconfont iconICON_pinghangguang"></span>
-        </div>{{Resource.directionalLight}}
+        </div>
+        {{ Resource.directionalLight }}
       </div>
     </div>
     <!-- 点光源 -->
     <div v-show="pointShow">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.lightSourceColor}}</label>
-        <ColorPicker class="sm-colorpicker" editable v-model="pointLightColor" />
+        <label class="label-container">{{ Resource.lightSourceColor }}</label>
+        <ColorPicker
+          class="sm-colorpicker"
+          editable
+          v-model="pointLightColor"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.cutoffDistance}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="pointLightDistance" />
+        <label class="label-container">{{ Resource.cutoffDistance }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="pointLightDistance"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.decay}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="pointLightDecay" />
+        <label class="label-container">{{ Resource.decay }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="pointLightDecay"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.intensity}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="pointLightIntensity" />
+        <label class="label-container">{{ Resource.intensity }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="pointLightIntensity"
+        />
       </div>
     </div>
     <!-- 聚光灯 -->
     <div v-show="spotShow">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.lightSourceColor}}</label>
+        <label class="label-container">{{ Resource.lightSourceColor }}</label>
         <ColorPicker class="sm-colorpicker" editable v-model="spotLightColor" />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.cutoffDistance}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="spotLightDistance" />
+        <label class="label-container">{{ Resource.cutoffDistance }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="spotLightDistance"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.decay}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="spotLightDecay" />
+        <label class="label-container">{{ Resource.decay }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="spotLightDecay"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.intensity}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="spotLightIntensity" />
+        <label class="label-container">{{ Resource.intensity }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="spotLightIntensity"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.spotLightAngle}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="spotLightAngle" />
+        <label class="label-container">{{ Resource.spotLightAngle }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="spotLightAngle"
+        />
       </div>
     </div>
     <!-- 平行光 -->
     <div v-show="directionalShow">
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.lightSourceColor}}</label>
-        <ColorPicker class="sm-colorpicker" editable v-model="directionalColor" />
+        <label class="label-container">{{ Resource.lightSourceColor }}</label>
+        <ColorPicker
+          class="sm-colorpicker"
+          editable
+          v-model="directionalColor"
+        />
       </div>
       <div class="sm-function-module-sub-section">
-        <label class="label-container">{{Resource.intensity}}</label>
-        <input class="sm-input-long" min="0" type="number" v-model="directionalIntensity" />
+        <label class="label-container">{{ Resource.intensity }}</label>
+        <input
+          class="sm-input-long"
+          min="0"
+          type="number"
+          v-model="directionalIntensity"
+        />
       </div>
     </div>
-    <label class="label-container">{{Resource.obliqueLightWarning}}</label>
+    <label class="label-container">{{ Resource.obliqueLightWarning }}</label>
     <div class="boxchild">
-      <button class="tbtn tbn1" type="button" @click="addLinght">{{Resource.Add}}</button>
-      <button class="tbtn" type="button" @click="clearLightSource">{{Resource.clear}}</button>
+      <el-button type="primary" size="mini" @click="addLinght">{{
+        Resource.Add
+      }}</el-button>
+      <el-button type="primary" size="mini" @click="clearLightSource">{{
+        Resource.clear
+      }}</el-button>
     </div>
   </div>
 </template>
@@ -259,9 +328,8 @@ export default {
         viewer,
         Cesium.DrawMode.Line
       );
-      spotOrDirectionalLightSourceCountHandler = new Cesium.ScreenSpaceEventHandler(
-        scene.canvas
-      );
+      spotOrDirectionalLightSourceCountHandler =
+        new Cesium.ScreenSpaceEventHandler(scene.canvas);
       spotOrDirectionalLightSourceDrawHandler.activeEvt.addEventListener(
         function (isActive) {
           if (isActive == true) {
@@ -327,8 +395,7 @@ export default {
               id: "directional-light-" + new Date().getTime(),
               position: positions[0],
               billboard: {
-                image:
-                  "@/../static/images/lightSource/directionalLight.png",
+                image: "@/../static/images/lightSource/directionalLight.png",
                 scaleByDistance: new Cesium.NearFarScalar(10, 1.0, 1000, 0.1),
                 disableDepthTestDistance: Number.POSITIVE_INFINITY, // 关闭深度检测，使billboard不至于被裁剪
               },
@@ -402,9 +469,8 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("point-light") === 0
       ) {
-        entityPointLightPairs.get(
-          viewer.selectedEntity
-        ).cutoffDistance = Number(val);
+        entityPointLightPairs.get(viewer.selectedEntity).cutoffDistance =
+          Number(val);
       }
     },
     pointLightDecay(val) {
@@ -422,9 +488,8 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("point-light") === 0
       ) {
-        entityPointLightPairs.get(viewer.selectedEntity).intensity = Number(
-          val
-        );
+        entityPointLightPairs.get(viewer.selectedEntity).intensity =
+          Number(val);
       }
     },
     spotLightColor(val) {
@@ -470,9 +535,8 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("spot-light") === 0
       ) {
-        entitySpotLightPairs.get(
-          viewer.selectedEntity
-        ).angle = Cesium.Math.toRadians(Number(val));
+        entitySpotLightPairs.get(viewer.selectedEntity).angle =
+          Cesium.Math.toRadians(Number(val));
       }
     },
     directionalColor(val) {
@@ -491,15 +555,14 @@ export default {
         viewer.selectedEntity.id &&
         viewer.selectedEntity.id.indexOf("directional-light") === 0
       ) {
-        entityDirectionalLightPairs.get(
-          viewer.selectedEntity
-        ).intensity = Number(val);
+        entityDirectionalLightPairs.get(viewer.selectedEntity).intensity =
+          Number(val);
       }
     },
   },
 };
 </script>
 
-<style lang="scss"  scoped>
+<style lang="scss" scoped>
 @import "light";
-</style>
+</style>

src/resource/resourceCN.js

@@ -2,6 +2,10 @@
         DelCollect: "取消收藏",
         AddCollect: "收藏",
         Resource: "资源目录",
+        InputPlaceholder: "请输入查询关键字",
+        PoinyQuery: "数据查询",
+        PlacenameLocation: "兴趣点查询",
+        LayerManage: "数据资源目录",
         LayerOptions: "图层管理",
         Favorite: "个人收藏",
         longitude: '经度(°)',
@@ -138,6 +142,7 @@
         threshold: '亮度阈值',
         bloomIntensity: '泛光强度',
         flyRoute: '飞行线路',
+        fly: '飞行',
         startFly: '开始',
         pauseFly: '暂停',
         stopFly: '停止',

src/store/store.js

@@ -4,6 +4,7 @@ var store2 = {
         isInitViewer: false,
         // 控制界面显隐，0默认隐藏，1显示
         ToolBarShow: false,
+        toolBarActive: 0,
         toolBar: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
         addLayer: [1, 0, 0],
         sceneAtttribute: [1, 0, 0, 0, 0],
@@ -53,42 +54,20 @@ var store2 = {
     },
     // 设置导航工具显隐
     setToolBarAction(newValue) {
-        switch (newValue) {
-            case 0:
-                this.state.toolBar[0] = !this.state.toolBar[0];
-                break;
-            case 1:
-                this.state.toolBar[1] = !this.state.toolBar[1];
-                break;
-            case 2:
-                this.state.toolBar[2] = !this.state.toolBar[2];
-                break;
-            case 3:
-                this.state.toolBar[3] = !this.state.toolBar[3];
-                break;
-            case 4:
-                this.state.toolBar[4] = !this.state.toolBar[4];
-                break;
-            case 5:
-                this.state.toolBar[5] = !this.state.toolBar[5];
-                break;
-            case 6:
-                this.state.toolBar[6] = !this.state.toolBar[6];
-                break;
-            case 7:
-                this.state.toolBar[7] = !this.state.toolBar[7];
-                break;
-            case 8:
-                this.state.toolBar[8] = !this.state.toolBar[8];
-                break;
-            case 9:
-                this.state.toolBar[9] = !this.state.toolBar[9];
-                break;
-            default:
-                this.state.toolBar = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+        if (typeof(newValue) != "undefined") {
+            if (this.state.toolBarActive != newValue) {
+                this.hideToolBar();
+            }
+            this.state.toolBar[newValue] = !this.state.toolBar[newValue];
+        } else {
+            this.hideToolBar();
         }
+        this.state.toolBarActive = newValue;
         this.state.toolBar = [...this.state.toolBar];
     },
+    hideToolBar(newValue) {
+        this.state.toolBar = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    },
     // 设置各功能组件子组件显隐
     setAddLayerAction(newValue) {
         this.state.addLayer = newValue;

src/views/map3d.vue

@@ -62,6 +62,13 @@
           v-html="formattedTime"
         ></div>
       </div>
+      <div class="user">
+        <i
+          class="exit el-icon-switch-button"
+          @click="exit"
+          :title="Resource.exit"
+        ></i>
+      </div>
     </div>
     <div class="routerContainer"><router-view></router-view></div>
     <sm-viewer> </sm-viewer>
@@ -143,11 +150,35 @@ export default {
       const date = new Date();
       return days[date.getDay()];
     },
+    exit() {
+      this.$alert("确认退出登录吗？", "提示", {
+        confirmButtonText: "确定",
+        callback: (action) => {
+          if (action != "cancel") {
+            this.$store.dispatch("LogOut").then(() => {
+              location.href = "/login";
+            });
+          }
+        },
+      });
+    },
   },
 };
 </script>
 
 <style scoped>
+.exit {
+  font-size: 30px;
+  color: cornflowerblue;
+  cursor: pointer;
+}
+.user {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  right: 10px;
+  top: 19px;
+}
 .routerContainer {
   position: absolute;
   width: 100%;
@@ -211,7 +242,7 @@ export default {
 }
 .timeline {
   position: absolute;
-  right: 25px;
+  right: 87px;
   top: 17px;
   height: 38px;
   line-height: 60px;

static/css/index.css

@@ -78,4 +78,8 @@ div::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     background: #2a4fd1b3;
+}
+
+.messageIndex {
+    z-index: 300000000 !important;
 }