多级查询上图

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-tabs class="multi_level_query_table" v-if="store.state.query_pick_pane.length > 0" 
-        @tab-click="handleClick" @tab-remove="removeTab">
+    <el-tabs class="multi_level_query_table" v-if="store.state.query_pick_pane.length > 0" @tab-click="handleClick"
+        @tab-remove="removeTab">
 
 
         <el-tab-pane :label="store.state.query_pick_last_pane.name" name="second">
@@ -24,7 +24,7 @@
             v-if="item.show">
 
             <div v-if="item.name != '权属'">
-                <pie class="echart" unit="平方米" :ref="`echartRef`"></pie>
+                <pie class="echart" unit="平方米" :ref="`echartRef`" @echartClick="echartClick"></pie>
 
                 <el-table :data="tableData" style="width: 100%" :header-cell-style="{
                     background: 'rgba(10, 25, 38, 0.6)',
@@ -318,6 +318,69 @@ export default {
                     roll: 0
                 },
             });
+        },
+        reset() {
+
+            for (let index = 0; index < 10; index++) {
+                var len = viewer.dataSources.length;
+                if (len > 0) {
+                    for (var n = 0; n < len; n++) {
+
+                        if (viewer.dataSources.get(n) != undefined && viewer.dataSources.get(n).name != undefined && viewer.dataSources.get(n).name === 'MultiLevelQuery_echart') {
+                            viewer.dataSources.remove(viewer.dataSources.get(n));
+                        }
+                    }
+                }
+            }
+
+        },
+        addPolygon(geom, id, colors, fillreset) {
+            let geojson = wellknown.parse(geom);
+            let _this = this;
+            // viewer.entities.removeAll();
+            let scolor = colors
+                ? Cesium.Color.fromCssColorString(colors)
+                : Cesium.Color.RED;
+            let fcolor =
+                colors && !fillreset
+                    ? Cesium.Color.fromCssColorString(colors)
+                    : Cesium.Color.WHITE;
+
+            let polygon = Cesium.GeoJsonDataSource.load(geojson, {
+                clampToGround: true,
+                stroke: scolor,
+                fill: fcolor.withAlpha(0.3), //注意：颜色必须大写，即不能为blue
+                strokeWidth: 5,
+            });
+            polygon.then(function (dataSource) {
+                // dataSource.id = id;
+                // 将数据源添加到Cesium Viewer
+                dataSource.name = 'MultiLevelQuery_echart'
+                viewer.dataSources.add(dataSource);
+                viewer.zoomTo(dataSource);
+                dataSourceList_gh[id] = dataSource;
+                if (id == "all") _this.isshowAll = true;
+
+            });
+        },
+        echartClick(name, { iseyes }) {
+            this.reset();
+
+            this.tableData.forEach((res) => {
+                const keys = Object.keys(res);
+                for (const key of keys) {
+                    let value = res[key];
+                    if (value == name) {
+                        console.log('name: ', name);
+                        console.log('value ', value);
+
+                        this.addPolygon(res.空间信息.split(";")[1], "all", "#ff0000", true);
+                    }
+                }
+
+            })
+
+
         },
         clear_data() {
             const that = this;
@@ -334,6 +397,8 @@ export default {
                 manager_multi_level_query.entities.remove(entities[i]);
             }
 
+            this.reset();
+
         },
         remove_query_click_by_iserver() {
             for (var i = 0; i < 10; i++) {