查询高亮

src/components/Query/clickQuery/clickQuery.vue

@@ -64,7 +64,10 @@ import MultiLevelQuery from "./MultiLevelQuery.vue";
 
 import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 import * as tdsy from "@/views/cockpit/js/tdsy";
+import * as turf from "@turf/turf";
 let gwtype;
+let query_click = null;
+
 export default {
   name: "clickQuery",
   components: { CockpitVector, MultiLevelQuery },
@@ -167,9 +170,27 @@ export default {
   mounted() {
 
     this.$nextTick((res) => {
+      query_click = new Cesium.CustomDataSource("query_click");
+      viewer.dataSources.add(query_click);
     });
   },
   methods: {
+    isArray2D(arr) {
+      // 首先检查arr是否是数组
+      if (!Array.isArray(arr)) {
+        return false;
+      }
+
+      // 检查数组中的每个元素是否也是数组
+      for (let i = 0; i < arr.length; i++) {
+        if (!Array.isArray(arr[i])) {
+          return false;
+        }
+      }
+
+      // 如果所有元素都是数组，那么arr是二维数组
+      return true;
+    },
     toggleVisibility() {
       this.removeMapLayerQuery();
       store.setToolBarAction(9);
@@ -405,6 +426,60 @@ export default {
               queryByIDParameters
             );
           }
+
+          // 结果高亮
+          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) {
             that.layerList.push(store.state.vectorlayerlist[i]);
             let queryData = [];
@@ -641,6 +716,9 @@ export default {
         return null;
       }
     },
+    convertCoordinates(coordArray) {
+      return coordArray.map(coord => [coord.x, coord.y]);
+    },
     // 取消左键点击查询
     removeMapLayerQuery() {
       this.queryResults = {};
@@ -698,11 +776,22 @@ export default {
       uriArr[8] = "featureResults.rjson?returnContent=true";
       return uriArr.join("/");
     },
+    remove_query_click() {
+      for (var i = 0; i < 10; i++) {
+        query_click.entities.values.forEach((res) => {
+
+          query_click.entities.remove(res);
+
+        })
+      }
+    },
     //地图数据查询事件
     changleQueryItem(item) {
       switch (item.index) {
         case 1: {
           this.mapQuerys("mapLayerQuery"); //图层点击事件
+          this.remove_query_click();
+
           break;
         }
         case 2: {
@@ -715,6 +804,8 @@ export default {
           pick_cockpit_vector.clear_data();//矢量拾取清除
           this.$refs.MultiLevelQuery.clear_data();//多级查询
 
+          this.remove_query_click();
+
           break;
         }
         case 4: {//驾驶舱矢量数据点选查询