查询高亮

src/components/Query/clickQuery/MultiLevelQuery.vue

@@ -20,11 +20,12 @@
         </el-tab-pane>
 
         <!-- <el-tab-pane :closable="item.close" :label="item.name" :name="item.name" -->
-        <el-tab-pane  :label="item.name" :name="item.name"
-        
-            v-for="(item, index) in store.state.query_pick_pane" :key="index" v-if="item.show">
+        <el-tab-pane :label="item.name" :name="item.name" v-for="(item, index) in store.state.query_pick_pane" :key="index"
+            v-if="item.show">
 
             <div v-if="item.name != '权属'">
+                <pie class="echart" unit="平方米" :ref="`echartRef`"></pie>
+
                 <el-table :data="tableData" style="width: 100%" :header-cell-style="{
                     background: 'rgba(10, 25, 38, 0.6)',
                     color: '#66b1ff',
@@ -36,10 +37,10 @@
                         :label="header" :prop="header" v-if="header != '空间信息'">
                     </el-table-column>
                 </el-table>
-                <pie class="echart" unit="亩" :ref="`echartRef`"></pie>
             </div>
             <div v-else>
                 <el-tabs @tab-click="handleClickQwnership">
+                    <pie class="echart" unit="平方米" :ref="`qwnership_pie`"></pie>
 
                     <el-tab-pane v-for="(item, index) in qwnershipTabs" :key="index" :label="item.dataname"
                         :name="item.dataname">
@@ -55,7 +56,6 @@
                             </el-table-column>
                         </el-table>
 
-                        <pie class="echart" unit="亩" :ref="`qwnership_pie`"></pie>
 
                     </el-tab-pane>
                 </el-tabs>
@@ -326,6 +326,12 @@ export default {
 
             this.remove_query_click_by_iserver();
 
+            // 图标
+            var entities = manager_multi_level_query.entities.values;
+            for (var i = entities.length - 1; i >= 0; i--) {
+                manager_multi_level_query.entities.remove(entities[i]);
+            }
+
         },
         remove_query_click_by_iserver() {
             for (var i = 0; i < 10; i++) {
@@ -340,8 +346,8 @@ export default {
 
 
             const that = this;
-            this.check_list_active=[];
-            this.check_list=[];
+            this.check_list_active = [];
+            this.check_list = [];
 
             that.clear_data();
             if (that.handler_multi_level_query == null) {
@@ -437,13 +443,30 @@ export default {
 
                 }
 
-                this.highlightResults(longitude, latitude);
+                // this.highlightResults(longitude, latitude);
+                this.highlightResultsPng(longitude, latitude);
 
                 that.handler_multi_level_query.destroy();
                 that.handler_multi_level_query = null;
             }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
 
+        },
+        highlightResultsPng(longitude, latitude) {
+            manager_multi_level_query.entities.add({
+                name: "manager_multi_level_query",
+                position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
+                billboard: {
+                    // 图像地址，URI或Canvas的属性
+                    image: "./static/images/overview/go.png",
+                    height: 34,
+                    width: 36,
+                    scale: 1.0,
+                    zIndex: 2,
+                    show: true
+                },
+
+            })
         },
         updateShowProperties(firstArray, secondArray) {
             // 创建一个映射表，用于快速查找第一个数组中的元素  
@@ -457,7 +480,7 @@ export default {
 
             // 返回更新后的secondArray，虽然原始数组被直接修改  
             return secondArray;
-        }, 
+        },
         handleClick(tab, event) {
             let index = Number(tab.index) - 1
 
@@ -516,7 +539,9 @@ export default {
         setEchart_qwnership(data, type, index) {
             this.$nextTick(() => {
                 let max = index == 0 ? 3 : 10
-                let legend_right = index == 0 ? "2%" : "10%"
+                // let legend_right = index == 0 ? "2%" : "10%"
+                let legend_right = "10%"
+
                 this.$refs.qwnership_pie[index].setOptions({ data, type, max, legend_right });
             });
         },
@@ -636,6 +661,9 @@ export default {
         this.$nextTick(() => {
             query_click_by_iserver = new Cesium.CustomDataSource("query_click_by_iserver");
             viewer.dataSources.add(query_click_by_iserver);
+
+            manager_multi_level_query = new Cesium.CustomDataSource("manager_multi_level_query");
+            viewer.dataSources.add(manager_multi_level_query);
         })
 
     }, //生命周期 - 挂在完成

src/components/Query/clickQuery/clickQuery.vue

@@ -67,6 +67,7 @@ import * as tdsy from "@/views/cockpit/js/tdsy";
 import * as turf from "@turf/turf";
 let gwtype;
 let query_click = null;
+let manager_layer_png = null;
 
 export default {
   name: "clickQuery",
@@ -172,6 +173,10 @@ export default {
     this.$nextTick((res) => {
       query_click = new Cesium.CustomDataSource("query_click");
       viewer.dataSources.add(query_click);
+
+      manager_layer_png = new Cesium.CustomDataSource("manager_layer_png");
+      viewer.dataSources.add(manager_layer_png);
+
     });
   },
   methods: {
@@ -428,56 +433,58 @@ export default {
           }
 
           // 结果高亮
-          const outputCoords = this.convertCoordinates(e.features[0].geometry.points);
-
-          outputCoords.push(outputCoords[0])
-
-          let f = { "type": "Polygon", "coordinates": [outputCoords] };
-          let result = turf.buffer(f, 1 / 99999, {
-            units: "kilometers",
-          });
-
-          let positions = [];
-          const twoDArray = result.geometry.coordinates[0];
-          const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
 
-          positions = oneDArray;
-
-
-          if (this.isArray2D(oneDArray)) {
-            const oneDArray2 = oneDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
-            positions = oneDArray2;
-
-          } else {
-
-          }
-          query_click.entities.add({
-            polygon: {
-              // 获取指定属性（positions，holes（图形内需要挖空的区域））
-              hierarchy: {
-                positions: Cesium.Cartesian3.fromDegreesArray(positions)
-              },
-              // 边框
-              outline: false,
-              // 边框颜色
-              outlineColor: Cesium.Color.RED,
-              // 边框尺寸
-              outlineWidth: 10,
-              // 填充的颜色，withAlpha透明度
-              material: Cesium.Color.RED,
-
-              // 是否被提供的材质填充
-              fill: true,
-              // 恒定高度
-              height: 1.1,
-              // 显示在距相机的距离处的属性，多少区间内是可以显示的
-              // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
-              // 是否显示
-              show: true,
-              // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
-              zIndex: 10
-            }
-          });
+          this.highlightResultsPng(xy.lng, xy.lat);
+          // const outputCoords = this.convertCoordinates(e.features[0].geometry.points);
+
+          // outputCoords.push(outputCoords[0])
+
+          // let f = { "type": "Polygon", "coordinates": [outputCoords] };
+          // let result = turf.buffer(f, 1 / 99999, {
+          //   units: "kilometers",
+          // });
+
+          // let positions = [];
+          // const twoDArray = result.geometry.coordinates[0];
+          // const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+
+          // positions = oneDArray;
+
+
+          // if (this.isArray2D(oneDArray)) {
+          //   const oneDArray2 = oneDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
+          //   positions = oneDArray2;
+
+          // } else {
+
+          // }
+          // query_click.entities.add({
+          //   polygon: {
+          //     // 获取指定属性（positions，holes（图形内需要挖空的区域））
+          //     hierarchy: {
+          //       positions: Cesium.Cartesian3.fromDegreesArray(positions)
+          //     },
+          //     // 边框
+          //     outline: false,
+          //     // 边框颜色
+          //     outlineColor: Cesium.Color.RED,
+          //     // 边框尺寸
+          //     outlineWidth: 10,
+          //     // 填充的颜色，withAlpha透明度
+          //     material: Cesium.Color.RED,
+
+          //     // 是否被提供的材质填充
+          //     fill: true,
+          //     // 恒定高度
+          //     height: 1.1,
+          //     // 显示在距相机的距离处的属性，多少区间内是可以显示的
+          //     // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(1000, 10000000),
+          //     // 是否显示
+          //     show: true,
+          //     // 顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。
+          //     zIndex: 10
+          //   }
+          // });
 
 
           if (e && e.totalCount > 0) {
@@ -627,6 +634,22 @@ export default {
         }
       }
     },
+    highlightResultsPng(longitude, latitude) {
+      manager_layer_png.entities.add({
+        name: "manager_layer_png",
+        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 40),
+        billboard: {
+          // 图像地址，URI或Canvas的属性
+          image: "./static/images/overview/go.png",
+          height: 34,
+          width: 36,
+          scale: 1.0,
+          zIndex: 2,
+          show: true
+        },
+
+      })
+    },
     addLayerList(label) {
       if (this.layerList.findIndex((a) => a.label == label) >= 0) return;
       let layers = store.state.vectorlayerlist.filter(
@@ -791,6 +814,13 @@ export default {
 
         })
       }
+
+
+      // 图标
+      var entities = manager_layer_png.entities.values;
+      for (var i = entities.length - 1; i >= 0; i--) {
+        manager_layer_png.entities.remove(entities[i]);
+      }
     },
     //地图数据查询事件
     changleQueryItem(item) {

src/components/echartsTemplate/pie.vue

@@ -67,7 +67,7 @@ let option = {
           fontSize: 14,
           padding: [5, 4],
           align: "center",
-          width: 40,
+          width: 100,
         },
         unit: {
           color: "#fff", //#BCD3E5