1.增加测量功能2.空间查询点击结果进行定位高亮显示

src/components/Header/Header.vue

@@ -18,12 +18,15 @@
     </div>
     <!-- 登录dialog -->
     <LoginVue ref="LoginVue"></LoginVue>
+    <ToolBarHeaderVue class="measure"></ToolBarHeaderVue>
   </div>
+
+  
 </template>
 
 <script>
 import LoginVue from "./Login.vue";
-// import ToolBarHeaderVue from "./ToolBarHeader.vue";
+import ToolBarHeaderVue from "./ToolBarHeader.vue";
 // import PoiSearch from "./PoisearchHeader.vue";
 export default {
   name: "Header",
@@ -123,7 +126,7 @@ export default {
   components: {
     LoginVue,
     // Dingwei,
-    // ToolBarHeaderVue,
+    ToolBarHeaderVue,
     // PoiSearch
   },
   //  mounted() {
@@ -379,7 +382,14 @@ export default {
   font-size: 22px;
   letter-spacing: 0.1vw;
 }
+.measure{
+  position: fixed;
+  top: 10vh;
+  left: 10vw;
 
+  background-color: #fff;
+  
+}
 /* .imgClass {
  position: absolute;
  top: 5px;

src/components/Header/ToolBarHeader.vue

@@ -11,7 +11,7 @@
             <!-- 子组件 -->
             <MeasureVue v-show="toolMenuList[1].active"></MeasureVue>
          </li>
-         <li title="回到初始化视角" @click="flyToHome"><i class="iconfont icon-shouye"></i> 主视角</li>
+         <!-- <li title="回到初始化视角" @click="flyToHome"><i class="iconfont icon-shouye"></i> 主视角</li> -->
 
       </ul>
 
@@ -99,9 +99,12 @@ export default {
    margin: 0;
    padding: 0;
    height: 60px;
-   /* width: 280px; */
-   /* background-color: rgba(0, 0, 0, 0.561); */
+   width: 180px;
+   background-color: rgba(0, 0, 0, 0.561);
    border-radius: 4px;
+   z-index: 99999;
+   position: absolute;
+   right: 0;
 }
 
 .ulClass li {

src/components/Platform/ShiKongFenXi/TimeSpatialQuery/TimeSpatialQuery/ResultTablePannle1.vue

@@ -14,9 +14,17 @@
 
             <div class="tableMainClass scrollbarcustom" v-show="isShowMainPannle">
                 <div class="">
-                    <el-table :data="tableData" style="width: 2000px">
+                    <el-table :data="tableData" style="width: 2000px" @row-click="fly">
                         <el-table-column v-for="(item, index) in attrArr" v-if="duizhao[item.prop]" :prop="item.prop"
-                            :label="duizhao[item.prop] ? duizhao[item.prop] : item.prop" :key="index"></el-table-column>
+                            :label="duizhao[item.prop] ? duizhao[item.prop] : item.prop" :key="index" :width="index === 0 ? '60' : ''" align="center">
+                            <template slot-scope="scope">
+                <!-- 判断是否为class_name并且不存在时显示默认值 -->
+                <span v-if="item === 'class_name' && !scope.row[item.prop]">变化区域</span>
+                <!-- 判断item是否为area，并格式化为两位小数 -->
+                <span v-if="scope.row[item.prop] && item === 'area'">{{ scope.row[item.prop].toFixed(2) }}</span>
+                <span v-else>{{ scope.row[item.prop] }}</span>
+              </template>
+                        </el-table-column>
                     </el-table>
                 </div>
             </div>
@@ -29,11 +37,12 @@
 </template>
 
 <script>
-
+import primitiveLayerManager from "../../lib/PrimitiveLayerManager";
 
 export default {
     data() {
         return {
+            attrArr: ['gid', 'id', 'area', 'class_name'],
             isShowMainPannle: true,
             duizhao: {
                 adname: "县名",
@@ -48,16 +57,28 @@ export default {
                 entityname: "类型",
                 id: "id",
                 typename: 'Poi类型'
-            }
-
+            },
+            centroid: '',
+            number: 6,
+            dataAreaSum: 0,  // 初始化为0
         };
     },
+    created() { },
     props: ['attrArr', 'tableData'],
     mounted() {
         console.log(this.attrArr);
         console.log(this.tableData);
-
+        this.calculateTotalArea();
     },
+    watch: {
+    // 监听tableData的变化，如果tableData发生变化，则重新计算总面积
+    tableData: {
+      handler() {
+        this.calculateTotalArea();
+      },
+      deep: true,  // 深度监听，确保监听到tableData中的对象变化
+    }
+  },
     components: {
 
     },
@@ -102,6 +123,62 @@ export default {
             this.$parent.isShowResultPannle = false
         },
 
+        fly(row) {
+      const dataShow = JSON.parse(row.st_asgeojson);
+      this.centroid = dataShow.type === 'MultiPolygon'
+        ? this.calculateCentroid(dataShow.coordinates[0][0])
+        : this.calculateCentroid(dataShow.coordinates[0]);
+      primitiveLayerManager.removeLayerChange('Highlightline');
+      // 突出点击的对象
+      primitiveLayerManager._addSingleLine(this.centroid.line, 'Highlightline');
+      // 定位
+      this.flyTo(this.centroid.centroidX, this.centroid.centroidY);
+    },
+    calculateCentroid(points) {
+      let calculateData = {
+        sumX: 0,
+        sumY: 0,
+        line: [],
+        centroidX: 0,
+        centroidY: 0
+      };
+      const numPoints = points.length;
+      // for循环求和
+      for (let i = 0; i < numPoints; i++) {
+        calculateData.sumX += points[i][0];
+        calculateData.sumY += points[i][1];
+        calculateData.line.push(points[i][0]);
+        calculateData.line.push(points[i][1]);
+      }
+      // 计算平均数
+      calculateData.centroidX = calculateData.sumX / numPoints;
+      calculateData.centroidY = calculateData.sumY / numPoints;
+      return calculateData;
+    },
+    flyTo(lon, lat) {
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(lon, lat, 600),
+        duration: 2,
+      });
+    },
+    closePannle() {
+      this.$bus.emit("TubanInfShow", {
+        isShow: false
+      });
+    },
+    calculateTotalArea() {
+      // 计算area字段的总和，保留小数点后两位
+      this.dataAreaSum = this.tableData.reduce((sum, row) => {
+        return sum + (row.area || 0);  // 如果row.area存在，累加到sum，否则不加
+      }, 0).toFixed(2);  // 保留两位小数
+    },
+    // 判断是否有表格内容，没有就显示xxx
+    caseTypeNamesFormat(row) {
+      let showProp = null
+      row.caseTypeNames ? showProp = row.caseTypeNames : showProp = '---'
+      return showProp
+    },
+
 
 
     }
@@ -128,6 +205,14 @@ export default {
     margin-left: 9px;
 }
 
+.numberData {
+  float: left;
+  line-height: 36px;
+  /* color: #66cffa; */
+  margin-right: 20px;
+  /* margin-left: 20px; */
+}
+
 .layerMenu {
     width: 100%;
     height: 36px;