添加感知区域

index.html

@@ -158,6 +158,12 @@
             <input type="button" id="hideV2X" value="隐藏V2X" />
             <input type="button" id="removeV2X" value="清除V2X" />
         </div>
+        <div>
+            <input type="button" id="addPolygon" value="绘制感知区域" />
+            <input type="button" id="showPolygon" value="显示感知区域" />
+            <input type="button" id="hidePolygon" value="隐藏感知区域" />
+            <input type="button" id="removePolygon" value="删除感知区域" />
+        </div>
     </div>
     <div id="main-container" style="width:100vw;height:100vh;overflow: hidden;"></div>
 </body>
@@ -178,6 +184,8 @@
     var perceptual = false; //是否加载了感知物
     var perceptualshow = false;//热力图否显示
     var trafficIncidentArr = [];//热力图否显示
+    var polygon = null; // 感知区域
+
     var handler = (e) => {
         alert(JSON.stringify(e))
     };
@@ -702,7 +710,7 @@
     async function addTrafficFlow() {
         const json = {
             id: '21e7a9e6d2884122804788dac1e002cc',
-            url: 'ws://192.168.60.137:31000/ws/streamer/d56e53e5e9cd44f4b66188caa15c2089'
+            url: 'ws://192.168.60.137:31000/ws/streamer/9e841c8a3f5947559797887ba04779b7'
         }
         map.bindVehicle(json)
     }
@@ -1009,6 +1017,46 @@
         map.getVehicle("21e7a9e6d2884122804788dac1e002cc").stopV2x()
     }
 
+    // 绘制感知区域
+    document.getElementById("addPolygon").onclick = addPolygon;
+    async function addPolygon() {
+        const options = {
+            id: "polygons",
+            type: 'polygon3d',
+            position: [
+                [117.31930248, 38.99171243],
+                [117.32246328, 38.99176425],
+                [117.32174648, 38.99001976],
+                [117.31925930, 38.99073655],
+            ],
+            color: [25, 25, 112, 1],    //设置填充颜色
+            maxHeight: 20,
+            extrudedHeight: 60,
+        }
+
+        // 添加感知区域
+        polygon = await map.addPolygonOverlay(options)
+        map.zoomToOverlay(polygon)
+    }
+
+    // 显示感知区域
+    document.getElementById("showPolygon").onclick = showPolygon;
+    function showPolygon() {
+        map.showOverlay(polygon);
+    }
+
+    // 隐藏感知区域
+    document.getElementById("hidePolygon").onclick = hidePolygon;
+    function hidePolygon() {
+        map.hideOverlay(polygon);
+    }
+
+    // 删除感知区域
+    document.getElementById("removePolygon").onclick = removePolygon;
+    function removePolygon() {
+        map.removeOverlay(polygon);
+    }
+
 </script>
 
 </html>
\ No newline at end of file