绘制内容结算0107

src/AppJK.vue

@@ -20,7 +20,6 @@ export default {
         let app = {
           debug: false,
           Invoke: (options) => {
-            // console.log(options);
             if(!Array.isArray(options))
               options = [options];
             options.forEach(function(item)
@@ -55,7 +54,6 @@ export default {
           },
           SendOutMessage: (msg) => {
             msg = JSON.stringify(msg);
-            console.log("发送消息" + msg);
             //如果被嵌入Iframe响应跨域消息
             if (window.CityGIS.hasIframe()) {
               return $.when(window.parent.postMessage(msg, "*")).then(function(){
@@ -83,7 +81,6 @@ export default {
             bus.emit('CreateMap');
             //监听回传信息
             bus.on('SendMessage', (data) => {
-              // console.log(data);
               window.CityGIS.SendOutMessage(data).then((data) => {
                 console.log("回传成功:" + JSON.stringify(data));
               },(err) => {

src/components/mapJK.vue

@@ -56,6 +56,7 @@ import {
 } from "../service/http.js";
 import FeaturePointsPlottingEvent from "../units/map/FeaturePointsPlottingEvent.js";
 import FeaturePolygonPlottingEvent from "../units/map/FeaturePolygonPlottingEvent.js";
+import HeatMap from "../units/map/HeatMap.js";
 export default {
   name: "mapJK",
   setup(){
@@ -154,6 +155,9 @@ export default {
           case "WaterEffect":
             waterEffect(params);
             break;
+          case "HeatMap":
+            heatMap(params);
+            break;
           case "Measurement":
             measurement(params);
             break;
@@ -396,6 +400,31 @@ export default {
           }
         }
       }
+
+      function heatMap(params){
+        debugger
+        params.id = "heatMap";
+        if(!params.visible){
+          let layer = m_map.layers.find(item => item.id === params.id);
+          m_map.remove(layer);
+          return
+        }
+        if(params.visible){
+          let layer = m_map.layers.find(item => item.id === params.id);
+          if(typeof layer === "undefined"){
+            let heatMap = new HeatMap({
+              id:params.id,
+              url:params.url,
+              waveDirection:params.waveDirection,
+              waveStrength:params.waveStrength,
+              color:params.color
+            })
+            layer = heatMap.layer;
+            m_map.add(layer);
+          }
+        }
+      }
+
       function measurement(params){
         let status = params.status;
         let type = params.type;
@@ -537,7 +566,6 @@ export default {
 
 
       function showThreeCubeDetail(params){
-        console.log("进来了",params)
         let status = params.status;
         let id = params.id;
         if(status == "hide"){
@@ -555,6 +583,7 @@ export default {
             view: m_view,
             points:params.points,
             size,
+            bus
           });
           addThreeCubeDetailEvent.start();
           addThreeCubeDetailInstance[id] = addThreeCubeDetailEvent;
@@ -663,10 +692,11 @@ export default {
             item.color = [1,0,0]
           })
           // 初始化 AddThreeCubeEvent，暂时不启动
-          addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
+          let addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
             view: m_view,
             points:res.data.data.list,
             size,
+            bus
           });
           addThreeCubeDetailEvent.start();
         })
@@ -735,10 +765,11 @@ export default {
             item.color = [0,0,1]
           })
           // 初始化 AddThreeCubeEvent，暂时不启动
-          addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
+          let addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
             view: m_view,
             points:res.data.data.list,
             size,
+            bus
           });
           addThreeCubeDetailEvent.start();
         })
@@ -787,10 +818,11 @@ export default {
             item.color = [1,1,0]
           })
           // 初始化 AddThreeCubeEvent，暂时不启动
-          addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
+          let addThreeCubeDetailEvent = new AddThreeCubeDetailEvent({
             view: m_view,
             points:res.data.data.list,
             size,
+            bus
           });
           addThreeCubeDetailEvent.start();
         })
@@ -1201,62 +1233,69 @@ export default {
       }
       function flyGLTF(params){
         let id = params.id;
+        let uavid = params.uavid;
         let status = params.status;
         if(status == "hide"){
-          if(flyGLTFInstances[id]){
-            flyGLTFInstances[id].clear();
-            delete flyGLTFInstances[id];
+          if(flyGLTFInstances[uavid]){
+            flyGLTFInstances[uavid].clear();
+            delete flyGLTFInstances[uavid];
           }
           return
         }
         let point = params.point;
-        if(flyGLTFInstances[id]){
-          flyGLTFInstances[id].updatePath(point);
+        if(flyGLTFInstances[uavid]){
+          flyGLTFInstances[uavid].updatePath(point);
         }else{
           let flyGLTFEvent = new FlyGLTFEvent({
-            view:m_view
+            view:m_view,
+            uavid,
+            bus,
           })
           flyGLTFEvent.start();
           flyGLTFEvent.updatePath(point);
-          flyGLTFInstances[id] = flyGLTFEvent;
+          flyGLTFInstances[uavid] = flyGLTFEvent;
         }
       }
 
 
       function getRealFlyPoint(params){
         const connectWebSocket = () => {
-          socket = new WebSocket('ws://58.34.215.19:19259/aircraftRouteSpeedWebSocket');
-
-          socket.onopen = () => {
-            console.log('WebSocket 连接成功');
-            socket.send(JSON.stringify({}))
-          };
-
-          socket.onmessage = (messageEvent) => {
-            let messages = JSON.parse(messageEvent.data).data;
-            messages.forEach(message => {
-              flyGLTF({
-                id:message.id,
-                status:"show",
-                point:message.position_cj
+          if(socket){
+            socket.send(JSON.stringify(params.flyList));
+          }else{
+            socket = new WebSocket('ws://58.34.215.19:19259/aircraftRouteSpeedWebSocket');
+
+            socket.onopen = () => {
+              console.log('WebSocket 连接成功');
+              socket.send(JSON.stringify(params.flyList));
+            };
+
+            socket.onmessage = (messageEvent) => {
+              let messages = JSON.parse(messageEvent.data).data;
+              messages.forEach(message => {
+                flyGLTF({
+                  id:message.id,
+                  uavid:message.uavid,
+                  status:"show",
+                  point:message.position_cj
+                })
               })
-            })
-            console.log('收到消息:', messageEvent.data);
-          };
+            };
 
-          socket.onerror = (error) => {
-            console.error('WebSocket 出错:', error);
-          };
+            socket.onerror = (error) => {
+              console.error('WebSocket 出错:', error);
+            };
 
-          socket.onclose = () => {
-            console.log('WebSocket 连接已关闭');
-          };
+            socket.onclose = () => {
+              console.log('WebSocket 连接已关闭');
+            };
+          }
         };
         connectWebSocket();
       }
 
       function changePointStatus(params){
-        flyGLTFInstances[params.id].followPath(params.isFollow);
+        flyGLTFInstances[params.uavid].followPath(params.isFollow);
       }
 
 

src/config/basicTool.json

@@ -42,7 +42,7 @@
             "title":"BaseMap",
             "visible": true,
             "opacity": 1,
-            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzYyNDc0MTMsImtleSI6IjkzNDkzMzIxIiwic2VydmljZU5vIjoiRDkwMDEwMDcxMjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.TwTfoKsUR4EdsQkwTEAKU_Tbw5daQ1fQcV81z31BO4g",
+            "url": "https://cimweb.zjw.sh.cegn.cn:2008/MapServiceProxy/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3MzY0ODgzOTEsImtleSI6IjkzNDkzMzIxIiwic2VydmljZU5vIjoiRDkwMDEwMDcxMjAyMzA4MDEiLCJ1c2VybmFtZSI6InB0Z2wifQ.n4_MSJ1nd3g5cz78r6YOuuzdngYU1UMMpuQmeDMG-8k",
             "token": ""
           }
         }
@@ -89,6 +89,19 @@
           }
         }
       },
+      {
+        "code": "1-38",
+        "title": "热力图",
+        "data": {
+          "ActionName": "HeatMap",
+          "Parameters": {
+            "id": "heatMapLayer",
+            "title": "热力图",
+            "url": "***",
+            "visible": true
+          }
+        }
+      },
       {
         "code": "1-5",
         "title": "测量",
@@ -1270,6 +1283,12 @@
           "ActionName": "GetRealFlyPoint",
           "Parameters": {
             "status": "show",
+            "flyList": [
+              {
+                "id":"f188b918-0422-4e6b-9d2a-9fc383748418",
+                "uavid":"59d272f0-a3a2-4439-9bd9-4e4264611939"
+              }
+            ],
             "token": ""
           }
         }

src/units/map/AddThreeCubeDetailEvent.js

@@ -2,10 +2,11 @@ import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode.js';
 import * as webgl from "@arcgis/core/views/3d/webgl.js";
 import {ThreeCubeDetailClass} from "../threejs/threeCubeDetail.js";
 import * as THREE from 'three';
-
+let bus_1;
 class AddThreeCubeDetailEvent{
     constructor(options){
         this.view = options.view;
+        this.bus = options.bus;
         this.points = options.points || []; // 初始点位（可为空）
         this.size = options.size; // 初始大小（可根据需求调整）
         this.addThreeCubeEvent = null;
@@ -14,6 +15,7 @@ class AddThreeCubeDetailEvent{
 
     start() {
         let that = this;
+        bus_1 = this.bus;
         if (this.addThreeCubeEvent) {
             this.clear();
         }
@@ -30,12 +32,26 @@ class AddThreeCubeDetailEvent{
                 lastSelectedIndex : null,
                 selectedIndex : null,
                 raycaster : new THREE.Raycaster(), // 射线投射器
-                mouse : new THREE.Vector2() // 鼠标位置
+                mouse : new THREE.Vector2(), // 鼠标位置
+                callBackFunction:this.showInfoWithReturn
             });
             this.addThreeCubeEvent.addPoints(this.points);
         })
     }
 
+    showInfoWithReturn(item){
+        if(item){
+            // this.callBackFunctionTwo(item.gridCode)
+            debugger
+            bus_1.emit('SendMessage', {
+                action:"SelectedCubeInfo",
+                data:{
+                    "grid":item.gridCode
+                }
+            })
+        }
+    }
+
     add(points){
         this.addThreeCubeEvent.addPoints(points);
     }
@@ -43,6 +59,7 @@ class AddThreeCubeDetailEvent{
 
     clear(){
         if(this.addThreeCubeEvent){
+            this.addThreeCubeEvent.mouseClickEvent.remove();
             this.addThreeCubeEvent.destroy();
             this.addThreeCubeEvent = null;
         }

src/units/map/FlyGLTFEvent.js

@@ -1,15 +1,19 @@
 import RenderNode from '@arcgis/core/views/3d/webgl/RenderNode.js'
 import * as webgl from "@arcgis/core/views/3d/webgl.js";
 import {FlyGLTFClass} from "../threejs/flyGLTF.js";
-
+import * as THREE from 'three';
+let bus_1;
 class FlyGLTFEvent{
     constructor(options) {
         this.view = options.view;
         this.path = options.path ||[];
+        this.uavid = options.uavid;
+        this.bus = options.bus;
         this.flyGLTFEvent = null;
         this.followTimer = null;
     }
     start(){
+        bus_1 = this.bus;
         if(this.flyGLTFEvent){
             this.clear();
         }
@@ -24,9 +28,27 @@ class FlyGLTFEvent{
             pathProgress : 0, //路径速度
             pathCurve : null, //路径曲线
             targetObject : null, //路径飞行的目标对象
-            _camera : null
+            _camera : null,
+            raycaster : new THREE.Raycaster(), // 射线投射器
+            mouse : new THREE.Vector2(), // 鼠标位置
+            uavid: this.uavid,
+            callBackFunction:this.showInfoWithReturn
         })
     }
+    showInfoWithReturn(item){
+        if(item){
+            // this.callBackFunctionTwo(item.gridCode)
+            debugger
+            bus_1.emit('SendMessage', {
+                action:"SelectedUAVInfo",
+                data:{
+                    "uavId":item
+                }
+            })
+        }
+    }
+
+
     updatePath(point){
         if(this.path.length == 0 ||this.path.length == 1){
             this.path.push(point);

src/units/map/HeatMap.js

@@ -0,0 +1,39 @@
+import FeatureLayer from '@arcgis/core/layers/FeatureLayer'
+class HeatMap{
+    constructor(options) {
+        this.id = options.id
+        this.url = options.url;
+        this.layer = null;
+        this.heatMap();
+    }
+    heatMap(){
+        this.layer = new FeatureLayer({
+            id:this.id,
+            url:this.url,
+            elevationInfo:{
+                mode:"on-the-ground"
+            },
+            renderer:{
+                type: "heatmap",
+                colorStops: [
+                    { ratio: 0, color: "rgba(255, 255, 255, 0)" },
+                    { ratio: 0.2, color: "rgba(255, 255, 255, 1)" },
+                    { ratio: 0.5, color: "rgba(255, 140, 0, 1)" },
+                    { ratio: 0.8, color: "rgba(255, 140, 0, 1)" },
+                    { ratio: 1, color: "rgba(255, 0, 0, 1)" }
+                ],
+                maxPixelIntensity: 100,
+                minPixelIntensity: 0,
+                blurRadius: 10
+            },
+            "fields": [
+                {
+                    "name": "FID",
+                    "type": "oid"
+                }
+            ],
+            "objectIdField": "FID",
+        })
+    }
+}
+export default HeatMap

src/units/threejs/flyGLTF.js

@@ -13,6 +13,11 @@ export const FlyGLTFClass = {
         this.pathCurve = options.pathCurve; //路径曲线
         this.targetObject = options.targetObject; //路径飞行的目标对象
         this._camera = options._camera;
+        this.raycaster =  options.raycaster; // 射线投射器
+        this.mouse =  options.mouse; // 鼠标位置
+        this.callBackFunction = options.callBackFunction; // 回调函数
+        this.mouseClickEvent = null;
+        this.uavid = options.uavid;
     },
     initialize(){
         this.mixer = new THREE.AnimationMixer();
@@ -55,6 +60,9 @@ export const FlyGLTFClass = {
         //this.initPathCurve();
 
         this.resetWebGLState();
+
+        // 使用 ArcGIS 的事件机制来监听点击
+        this.mouseClickEvent = this.view.on("click", this.onMouseClick.bind(this));
     },
 
     loadGLTF(){
@@ -116,6 +124,40 @@ export const FlyGLTFClass = {
 
     },
 
+    // 点击事件处理函数
+    onMouseClick(event) {
+        // 获取点击位置的屏幕坐标
+        let mouse = []
+        this.webgl.toRenderCoordinates(
+            this.view,
+            [event.mapPoint.x, event.mapPoint.y, event.mapPoint.z],
+            0,
+            this.view.spatialReference,
+            mouse,
+            0,
+            1
+        );
+
+        const mousePoint = new THREE.Vector3(mouse[0], mouse[1], mouse[2]);
+
+        // 获取摄像机位置
+        const cameraPosition = new THREE.Vector3().setFromMatrixPosition(this._camera.matrixWorld);
+
+        // 计算射线方向
+        const rayDirection = new THREE.Vector3().subVectors(mousePoint, cameraPosition).normalize();
+
+        // 设置射线起点和方向
+        this.raycaster.set(cameraPosition, rayDirection);
+        //this.visualizeRay()
+        // 检测射线与网格的相交
+        const intersects = this.raycaster.intersectObject(this.targetObject);
+        if (intersects.length > 0) {
+            this.callBackFunction(this.uavid);
+        } else {
+            console.log("未选中任何无人机");
+        }
+    },
+
     // 设置面板类似
     setPanelType(panelType) {
         this.panelType = panelType;
@@ -176,7 +218,7 @@ export const FlyGLTFClass = {
         this.path = path;
         this.pathProgress = 0;   // 重置路径进度
         this.startTime = Date.now(); // 路径开始时间
-        this.duration = 1000;
+        this.duration = 2500;
       if(this.path.length > 1){
           //用于存储路径的点
           const points = this.path.map(point => {

src/units/threejs/pathPipe.js

@@ -130,7 +130,7 @@ export const PathPipeClass = {
             side: THREE.DoubleSide,
             blending: THREE.AdditiveBlending,
             transparent: true,
-            depthWrite: true,
+            depthWrite: false,
             depthTest:true
         });
         return material;

src/units/threejs/threeCubeDetail.js

@@ -12,6 +12,8 @@ export const ThreeCubeDetailClass = {
         this.selectedIndex = options.selectedIndex;
         this.raycaster =  options.raycaster; // 射线投射器
         this.mouse =  options.mouse; // 鼠标位置
+        this.callBackFunction = options.callBackFunction; // 回调函数
+        this.mouseClickEvent = null;
     },
 
     initialize() {
@@ -55,9 +57,9 @@ export const ThreeCubeDetailClass = {
         const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
         directionalLight.position.set(10, 10, 10);
         this.scene.add(directionalLight);
-
+        debugger
         // 使用 ArcGIS 的事件机制来监听点击
-        this.view.on("click", this.onMouseClick.bind(this));
+        this.mouseClickEvent = this.view.on("click", this.onMouseClick.bind(this));
     },
 
     createInstancedMesh() {
@@ -219,8 +221,7 @@ export const ThreeCubeDetailClass = {
         if (intersects.length > 0) {
             const instanceIndex = intersects[0].instanceId;
             const selectedCube = this.points[instanceIndex];
-            console.log("Selected Cube Info:", selectedCube);
-
+            this.callBackFunction(selectedCube);
             // 高亮选中格子
             this.highlightCube(instanceIndex);
         } else {