v2x效果

index.html

@@ -121,7 +121,8 @@
             <input type="button" id="setday" value="取消夜景" />
         </div>
         <div>
-            <input type="button" id="addTrafficFlow" value="联网车辆渲染" />
+            <input type="button" id="addTrafficFlow" value="全部车辆" />
+            <input type="button" id="addTrafficFlow6" value="6号车" />
             <input type="button" id="removeTrafficFlow" value="清除联网车辆" />
             <input type="button" id="focusCar1" value="定位车辆（第一人称）" />
             <input type="button" id="focusCar3" value="定位车辆（第三人称）" />
@@ -161,8 +162,9 @@
         </div>
         <div>
             <input type="button" id="startV2X" value="开始V2X" />
-            <!-- <input type="button" id="hideV2X" value="隐藏V2X" /> -->
             <input type="button" id="removeV2X" value="清除V2X" />
+            <input type="button" id="startCommunication" value="开始通信效果" />
+            <input type="button" id="removeCommunication" value="清除通信效果" />
         </div>
         <div>
             <input type="button" id="addPolygon" value="绘制感知区域" />
@@ -702,7 +704,16 @@
     async function addTrafficFlow() {
         const json = {
             id: '21e7a9e6d2884122804788dac1e002cc',
-            url: 'ws://192.168.60.137:31000/ws/streamer/7b246f3660c747fa8716d1971e349518'
+            url: 'ws://192.168.60.137:31000/ws/streamer/a9219e09346a44a28ee3d0aed79c27ea' // 全部车辆
+        }
+        map.bindVehicle(json)
+    }
+
+    document.getElementById("addTrafficFlow6").onclick = addTrafficFlow6;
+    async function addTrafficFlow6() {
+        const json = {
+            id: '21e7a9e6d2884122804788dac1e002cc',
+            url: 'ws://192.168.60.137:31000/ws/streamer/e7c584dd5d294347bbc3ccec2f0aa8ea' // 6号车
         }
         map.bindVehicle(json)
     }
@@ -797,11 +808,18 @@
         }
         const json = {
             id: "111", //ID
-            // url: "ws://192.168.60.137:33011/InfoTrans", // 
-            url: 'ws://192.168.60.137:31000/ws/streamer/bccfcc892d424160a50a802a12d4c5f7'
+            url: 'ws://192.168.60.137:31000/ws/streamer/86bf3faefe5f423483e4cd4d9782b046', // 全路口
+            // url: 'ws://192.168.60.137:31000/ws/streamer/eccd0f8b060d4bb088a1b9af1ad4070f', // 6号路口
         };
         perceptualroad.bindObjects(json);
         perceptual = true; //是否加载了感知物
+
+        // let options = {
+        //     position: [117.34671, 38.9990358, 100.53],
+        //     orientation: [-34.930073, -44.426579],
+        // };
+        // camera.flyTo(options);
+
     }
     // 显示感知目标物
     document.getElementById("showPerceptual").onclick = showPerceptual;
@@ -1138,14 +1156,92 @@
     // 开始V2V
     document.getElementById("startV2X").onclick = startV2X;
     function startV2X() {
-        let options = {
-            color: [255, 255, 0, 1],
-            vehicleId: "仿AYZQS001", //鄂A17U5N
-            objectId: "1200000479", // 连接车辆的效果
-            // vehicleId: "测试车辆001", //鄂A17U5N
-            name: '注意行人'
+        // let options = {
+        //     color: [255, 255, 0, 1],
+        //     vehicleId: "仿AYZQS001", //鄂A17U5N
+        //     objectId: "1200000479", // 连接车辆的效果
+        //     // vehicleId: "测试车辆001", //鄂A17U5N
+        //     name: '注意行人'
+        // };
+        // map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
+
+        // 257	XM140001
+        // 259	XM140002
+        // 261	XM140003
+        // 263	XM140004
+        // 265	XM140005
+        // 267	XM140006
+        // 269	XM140007
+        // 271	XM140008
+        // 219	仿AYZQS001
+        // 221	仿A-0234DA
+
+        const url = 'wss://itg-dev.cu-sc.com:13443/WSPLUS/socket?token=111&msgType=4&reType=51world&vehicleId=267'
+
+        // 创建一个WebSocket实例
+        socket = new WebSocket(url);
+
+        // 当WebSocket打开时执行
+        socket.onopen = function (event) {
+            console.log("socket连接成功!");
         };
-        map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
+
+        // 当接收到消息时执行
+        socket.onmessage = function (event) {
+            const data = JSON.parse(event.data)
+            const { objects, endTime, typeName, id } = data
+
+            // objects 如果只有一项，则是单车预警；如果有两项，则需要有两个车辆的通信效果
+            const mainCar = objects[0]
+            let options = {
+                id: id,
+                color: [255, 255, 0, 1],
+                vehicleId: mainCar.id,
+                name: typeName
+            };
+            map.getVehicle("21e7a9e6d2884122804788dac1e002cc").startV2x(options);
+
+            if (objects.length > 1) {
+                const options2 = {
+                    vehicleId: [mainCar.id, objects[1].id],//车辆ID
+                    color: [255, 0, 0, 1],
+                }
+                map.renderCommunication(options2)
+
+                if (objects.length > 1) {
+                    console.log('开始', mainCar.id, objects[1].id, data)
+                } else {
+                    console.log('开始', mainCar.id, data)
+                }
+            }
+
+            if (endTime) {
+                map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x(mainCar.id)
+
+                const options2 = {
+                    vehicleId: [mainCar.id, objects[1].id],//车辆ID
+                }
+                map.stopCommunication(options2)
+
+                if (objects.length > 1) {
+                    console.log('结束结束结束', mainCar.id, objects[1].id)
+                } else {
+                    console.log('结束结束结束', mainCar.id)
+                }
+            };
+        }
+    }
+
+    // 开始通信效果
+    document.getElementById("startCommunication").onclick = startCommunication;
+    function startCommunication() {
+        map.renderCommunication(options2)
+    }
+
+    // 清除通信效果
+    document.getElementById("removeCommunication").onclick = removeCommunication;
+    function removeCommunication() {
+        map.removeCommunication()
     }
 
     // 隐藏V2V