图版上图查询功能

src/components/Query/clickQuery/CockpitVector.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="CockpitVectorBox">
+    <span class="clearBtn" @click="cockpit">
+      <i class="iconfont iconSize el-icon-thumb" style="margin-top: 0px"></i>
+      图斑详情查询
+    </span>
     <div class="cockpit_vector">
       <el-table
         :header-cell-style="{
@@ -10,7 +14,7 @@
           fontWeight: '400',
         }"
         :data="
-          store.state.vectorData.filter(
+          baseData.filter(
             (item) =>
               item.name !== 'id' &&
               item.name !== 'geom' &&
@@ -21,7 +25,7 @@
               item.name !== 'xmmc' &&
               item.name !== 'zlmj' &&
               item.name !== 'tzje' &&
-              item.name !== 'dataid'&&
+              item.name !== 'dataid' &&
               item.name !== 'did'
           )
         "
@@ -57,9 +61,18 @@ import * as wellknown from "wellknown";
 import * as turf from "@turf/turf";
 import * as echarts from "echarts";
 import { name } from "file-loader";
+import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 let pick_entity = null;
 export default {
   components: {},
+  props: {
+    baseData: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
   data() {
     return {
       restaurants: [],
@@ -99,6 +112,10 @@ export default {
   },
   //方法集合
   methods: {
+    cockpit() {
+      //驾驶舱矢量数据点选查询
+      pick_cockpit_vector.init_handler();
+    },
     build_data(geojson) {
       geojson.coordinates.forEach((res) => {
         const twoDArray = res[0];
@@ -335,6 +352,19 @@ export default {
   top: 6rem;
   width: 100%;
   height: 100%;
+  .clearBtn {
+    cursor: pointer;
+    background-color: #3f94f53f;
+    border: 1px solid #3f93f5;
+    color: #b6e0ff;
+    padding: 5px 15px;
+    display: inline-block;
+    margin: 10px 0;
+
+    &:hover {
+      font-weight: bold;
+    }
+  }
 }
 
 .list_vector {

src/components/Query/clickQuery/clickQuery.vue

@@ -50,7 +50,7 @@
       </el-collapse>
     </div>
 
-    <CockpitVector v-if="store.state.vectorData.length > 0"></CockpitVector>
+    <!-- <CockpitVector v-if="store.state.vectorData.length > 0"></CockpitVector> -->
     <MultiLevelQuery ref="MultiLevelQuery" />
   </div>
 </template>
@@ -113,12 +113,12 @@ export default {
           iconName: "el-icon-office-building",
           isSelect: false,
         },
-        // {
-        //   index: 4,
-        //   lable: "矢量",
-        //   iconName: "el-icon-picture",
-        //   isSelect: false,
-        // },
+        {
+          index: 4,
+          lable: "矢量",
+          iconName: "el-icon-picture",
+          isSelect: false,
+        },
         {
           index: 5,
           lable: "联级查询",
@@ -204,7 +204,6 @@ export default {
       this.remove_query_click();
       store.setToolBarAction(9);
       tdsy.remove(false);
-      store.state.vectorData = [];
     },
     addGeometrys(fill) {
       viewer.entities.removeAll();

src/views/LandscapeProject/index.vue

@@ -81,26 +81,6 @@
         </div>
       </div>
     </div>
-    <!-- <div
-      class="sm-panel sm-function-module-query"
-      v-if="store.state.vectorData.length > 0"
-      v-drag
-    >
-      <div class="sm-panel-header">
-        <span>山水工程详情</span>
-      </div>
-      <el-tabs
-        type="border-card"
-        class="xz_box info"
-        v-model="activeTabs"
-        stretch
-      >
-        <el-tab-pane label="基本信息" name="base">
-          <CockpitVector></CockpitVector>
-        </el-tab-pane>
-        <el-tab-pane label="全过程管理信息" name="qgc"> </el-tab-pane>
-      </el-tabs>
-    </div> -->
   </div>
 </template>
 

src/views/cockpit/common/VectorSpace/BoxCommonVector.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="ghzc BoxCommonVector" v-if="title">
-    <div class="innerContainerVector leftPaneVector" v-drag>
+  <div class="ghzc BoxCommonVector">
+    <div class="innerContainerVector leftPaneVector" v-drag v-if="title">
       <h2 class="PangetitleVector darg-div">
         <span class="pange_textVector">{{ title }}</span>
         <slot name="title"></slot>
@@ -98,13 +98,10 @@
       </template>
       <slot name="all"></slot>
     </div>
-    <div
-      class="sm-panel sm-function-module-query"
-      v-if="store.state.vectorData.length > 0"
-      v-drag
-    >
+    <div class="sm-panel sm-function-module-query" v-if="isShallow" v-drag>
       <div class="sm-panel-header">
         <span>详情</span>
+        <i class="el-icon-close" @click="isShallow = false"></i>
       </div>
       <el-tabs
         type="border-card"
@@ -113,7 +110,7 @@
         stretch
       >
         <el-tab-pane label="基本信息" name="base">
-          <CockpitVector></CockpitVector>
+          <CockpitVector :baseData="store.state.vectorData"></CockpitVector>
         </el-tab-pane>
         <!-- -->
         <el-tab-pane
@@ -160,6 +157,7 @@ export default {
       searchs: [],
       searchform: {},
       xzqTreeData: [],
+      isShallow: false,
       activeTabs: "base",
     };
   },
@@ -415,6 +413,9 @@ export default {
               { isfly: true, sw: 5 },
               (data) => {
                 layerSources["h_" + item.index] = data;
+                data.entities.values.forEach((entity) => {
+                  entity.properties = item;
+                });
               }
             );
           }
@@ -432,6 +433,7 @@ export default {
         });
       });
       store.state.vectorData = arr;
+      this.isShallow = true;
       // store.setActiveToolBar(9);
     },
     addpolygon(item) {
@@ -622,6 +624,7 @@ export default {
       this.searchs = newVal.searchs;
       this.searchform = newVal.searchform;
       this.state = "";
+      this.isShallow = false;
       if (newVal.goitem) {
         this.draw_vector_server(newVal.mapType, newVal.goitem);
       } else if (newVal.tableData && newVal.tableData.length > 0) {
@@ -906,5 +909,16 @@ div::-webkit-scrollbar {
 /deep/ .el-table .warning-row {
   background: rgb(102, 177, 255) !important;
 }
+/deep/ .el-icon-close:before {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: larger;
+  font-weight: bold;
+
+  &:hover {
+    color: aqua;
+  }
+}
 </style>
   

src/views/cockpit/tdsy.vue

@@ -230,61 +230,14 @@ export default {
   beforeMount() { }, //生命周期 - 挂载之前
   methods: {
     flyDetails(item) {
-      this.drawWktPloygon(item.geom, "#66b1ff", item.id);
-      let arr = [];
-      Object.keys(item).forEach((key) => {
-        if ( key != '用地类型') {
-          arr.push({
-            name: key,
-            value: item[key],
-          });
-        }
-      });
       store.setViewerFlagb(false);
-      store.state.vectorData = arr;
-      store.setActiveToolBar(9);
+      store.setToolBarShow(false);
+      store.setXzqh_flag(false);
       store.setCockpit_vector({
-        title: "",})
-    },
-    drawWktPloygon(item, itemColor, id) {
-      let geom = {
-        type: "FeatureCollection",
-        features: [
-          {
-            type: "Feature",
-            geometry: parse(item),
-          },
-        ],
-      };
-      this.loadGeoJSON(geom, itemColor, id);
-    },
-
-    // 加载GeoJSON数据
-    loadGeoJSON(geojson, yanse, id) {
-      const dataSource = new Cesium.GeoJsonDataSource();
-      dataSource
-        .load(geojson, {
-          clampToGround: true,
-          stroke: Cesium.Color.fromCssColorString(yanse),
-          fill: Cesium.Color.fromCssColorString("rgba(10, 95, 152, 0.4)"), //注意：颜色必须大写，即不能为blue
-          strokeWidth: 2,
-          // 恒定高度
-          height: 1.1,
-          // 是否显示
-          show: true,
-          // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
-          zIndex: 10,
-        })
-        .then((data) => {
-          viewer.dataSources.add(data);
-          viewer.flyTo(data, {
-            offset: new Cesium.HeadingPitchRange(0, -45, 1000),
-          });
-          if (id) {
-            this.tempdataSourcesId = id;
-            dataSources[id] = dataSource;
-          }
-        });
+        title: "",
+        tableData: [item],
+        goitem: item,
+      });
     },
     async init_info(params) {
       // const that = this;

src/views/viewer.vue

@@ -144,7 +144,7 @@ export default {
             store.setViewerFlagb(!store.state.viewer_flag);
             store.setToolBarShow(!store.state.viewer_flag);
             tdsy.remove(true);
-            store.state.vectorData = [];
+         
 
             // store.setToolBarShow(true);
 
@@ -551,7 +551,6 @@ export default {
         cockpit.hidden_xzqh(false);
         cockpit.hidden_wall(false);
         tdsy.remove(true);
-        store.state.vectorData = [];
 
     } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
 };