框选区域绘制添加

src/components/Query/clickQuery/clickQuery.vue

@@ -105,10 +105,19 @@ import * as pick_cockpit_vector from "./pick_cockpit_vector.js";
 import * as tdsy from "@/views/cockpit/js/tdsy";
 import * as turf from "@turf/turf";
 import { bbox } from "@/utils/MapHelper/help.js";
+import {
+  polygon,
+  area,
+  booleanContains,
+  intersect,
+} from "@turf/turf";
 let gwtype;
 let query_click = null;
 let manager_layer_png = null;
 let dataSourceLayer = null;
+var handlerPolygon;
+var handleInput;
+var polygonEntity = null;
 export default {
   name: "clickQuery",
   components: { CockpitVector, MultiLevelQuery },
@@ -146,6 +155,12 @@ export default {
           iconName: "el-icon-tickets",
           isSelect: false,
         },
+        {
+          index: 6,
+          lable: "框选",
+          iconName: "el-icon-edit-outline",
+          isSelect: false,
+        },
         {
           index: 2,
           lable: "模型",
@@ -537,19 +552,34 @@ export default {
         obj.source.split(",") == `${obj.fwgzkj}:${obj.fwmc}`
       );
       let that = this;
-      let queryByIDParameters = {
-        getFeatureMode: "BUFFER",
-        // getFeatureMode: "SPATIAL",
+      // let queryByIDParameters = {
+      //   getFeatureMode: "BUFFER",
+      //   // getFeatureMode: "SPATIAL",
+      //   spatialQueryMode: "INTERSECT",
+      //   datasetNames: [`${obj.fwgzkj}:${obj.fwmc}`], //obj.source.split(","),
+      //   geometry: {
+      //     parts: [1],
+      //     points: [{ y: xy.lat, x: xy.lng }],
+      //     type: "POINT",
+      //   },
+      //   bufferDistance: 0.00005,
+      //   hasGeometry: true,
+      // };
+            let queryByIDParameters = {
+        // getFeatureMode: "BUFFER",
+        getFeatureMode: "SPATIAL",
         spatialQueryMode: "INTERSECT",
         datasetNames: [`${obj.fwgzkj}:${obj.fwmc}`], //obj.source.split(","),
         geometry: {
           parts: [1],
-          points: [{ y: xy.lat, x: xy.lng }],
-          type: "POINT",
+          // points: [{ y: xy.lat, x: xy.lng }],
+          points: [{"x":109.512284320217,"y":18.2979368144667},{"x":109.5159110704939,"y":18.286557933355265},{"x":109.527722824416,"y":18.29157815286776}],
+          type: "REGION",
         },
         bufferDistance: 0.00005,
         hasGeometry: true,
       };
+      console.log('zouzhele');
       let e;
 
       if (obj.type == "S3M") {
@@ -909,9 +939,149 @@ export default {
           this.$refs.MultiLevelQuery.init_handler();
           break;
         }
+        case 6: {
+          //联级查询
+          // this.$refs.MultiLevelQuery.init_handler();
+          this.drawPolygon()
+          console.log('框选事件');
+          break;
+        }
         default:
           break;
       }
+    },
+
+        /**
+     * 点击绘制多边形
+     */
+     drawPolygon() {
+      viewer.entities.removeAll();
+      if (polygonEntity) {
+        viewer.entities.remove(polygonEntity)
+      }
+      this.startPolygon();
+    },
+        /**
+     * 绘制多边形
+     */
+     startPolygon() {
+      var that = this;
+      debugger
+      if (handleInput) {
+        handleInput.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+        handleInput.destroy();
+        handleInput=null;
+      }
+      handlerPolygon = new Cesium.DrawHandler(
+        viewer,
+        Cesium.DrawMode.Polygon,
+        0
+      );
+      handlerPolygon.activate()
+      handlerPolygon.activeEvt.addEventListener(function (isActive) {
+        if (isActive == true) {
+          viewer.enableCursorStyle = false;
+          viewer._element.style.cursor = "";
+          // var nodes = document.getElementsByTagName('body')
+          // if (nodes.length > 0)
+          //     nodes[0].className.replace('drawCur','drawCur')
+        } else {
+          viewer.enableCursorStyle = true;
+          // var nodes = document.getElementsByTagName('body')
+          // if (nodes.length > 0) {
+          //     nodes[0].className.replace('drawCur','')
+          // }
+        }
+      });
+      handlerPolygon.movingEvt.addEventListener(function (windowPosition) {
+        // if (this.handlerPolygon.isDrawing) {
+        //     window.createTooltip.showAt(windowPosition, '点击确定多边形顶点,右键单击结束绘制,');
+        // } else {
+        //     window.createTooltip.showAt(windowPosition, '点击绘制第一个点,');
+        // }
+      });
+      handlerPolygon.drawEvt.addEventListener(function (result) {
+
+        // handlerPolygon.polygon.show = false;
+        // handlerPolygon.polyline.show = false;
+
+
+        var nPositions = [];
+        var nRegions = []
+        // that.regions = [];
+        for (var pt of result.object.positions) {
+          var cartographic = Cesium.Cartographic.fromCartesian(pt);
+          var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+          var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+          var height = cartographic.height;
+          // that.regions.push({ x: longitude, y: latitude });
+          nPositions.push(longitude)
+          nPositions.push(latitude)
+          nRegions.push({'x':longitude,'y':latitude})
+        }
+
+        // that.regions.push(that.regions[0]);
+
+        viewer.entities.removeAll();
+        polygonEntity = new Cesium.Entity({
+          id: 'polygon',
+          // position: Cesium.Cartesian3.fromDegreesArray([
+          //   centerX,
+          //   centerY,
+          // ]),
+          // classificationType: ClassificationType.TERRAIN,
+          polygon: {
+            hierarchy: new Cesium.PolygonHierarchy(
+              new Cesium.Cartesian3.fromDegreesArray(nPositions)
+            ),
+            // positions: new Cesium.Cartesian3.fromDegreesArray(positions),
+            material: Cesium.Color.WHITE.withAlpha(0.3),
+            outline: true,
+            outlineColor: Cesium.Color.RED,
+            outlineWidth: 2.0,
+          },
+        });
+        viewer.entities.add(polygonEntity)
+        console.log(nRegions,'nRegions');
+
+        let queryByIDParameters = {
+        // getFeatureMode: "BUFFER",
+        getFeatureMode: "SPATIAL",
+        spatialQueryMode: "INTERSECT",
+        datasetNames: [`${obj.fwgzkj}:${obj.fwmc}`], //obj.source.split(","),
+        geometry: {
+          parts: [1],
+          // points: [{ y: xy.lat, x: xy.lng }],
+          points: nRegions,
+          type: "REGION",
+        },
+        bufferDistance: 0.00005,
+        hasGeometry: true,
+      };
+
+
+
+
+
+
+
+
+
+
+
+
+
+        // that.curProjectInfo.regions = that.regions;
+
+
+        // that.regions = [];
+        // that.regions.push(that.positions);
+        // viewer.flyTo(polygonEntity)//绘制完毕飞入绘制的多边形
+
+        handlerPolygon.clear()
+        handlerPolygon.deactivate();
+        
+      });
     },
   },
   beforeDestroy() {