Add area count feature

index.html

@@ -333,62 +333,114 @@
         }
       }
 
-      var path1 = [
+      // var path1 = [
-        [112.964433, 28.22664],
+      //   [112.964433, 28.22664],
-        [112.956805, 28.191032],
+      //   [112.956805, 28.191032],
-        [112.950826, 28.118326],
+      //   [112.950826, 28.118326],
-        [112.941137, 28.103233],
+      //   [112.941137, 28.103233],
-        [112.93098, 28.109704],
+      //   [112.93098, 28.109704],
-        [112.899239, 28.11641],
+      //   [112.899239, 28.11641],
-        [112.879673, 28.149904],
+      //   [112.879673, 28.149904],
-        [112.886771, 28.170875],
+      //   [112.886771, 28.170875],
-        [112.862953, 28.188488],
+      //   [112.862953, 28.188488],
-        [112.85079, 28.223915],
+      //   [112.85079, 28.223915],
-        [112.852851, 28.234087],
+      //   [112.852851, 28.234087],
-        [112.88032, 28.225005],
+      //   [112.88032, 28.225005],
-      ];
+      // ];
-      var path2 = [
+      // var path2 = [
-        [112.975993, 28.226261],
+      //   [112.975993, 28.226261],
-        [112.969743, 28.205509],
+      //   [112.969743, 28.205509],
-        [112.967603, 28.184652],
+      //   [112.967603, 28.184652],
-        [112.960208, 28.139103],
+      //   [112.960208, 28.139103],
-        [113.014548, 28.151931],
+      //   [113.014548, 28.151931],
-        [113.019324, 28.195638],
+      //   [113.019324, 28.195638],
-        [113.018336, 28.23149],
+      //   [113.018336, 28.23149],
-      ];
+      // ];
-      var polygon1 = new AMap.Polygon({
+      // var polygon1 = new AMap.Polygon({
-        path: path1,
+      //   path: path1,
-      });
+      // });
-      var polygon2 = new AMap.Polygon({
+      // var polygon2 = new AMap.Polygon({
-        path: path2,
+      //   path: path2,
-      });
+      // });
 
-      map.add([polygon1, polygon2]);
+      // map.add([polygon1, polygon2]);
-      map.setFitView();
+      // map.setFitView();
       var polyEditor = new AMap.PolygonEditor(map);
 
-      polyEditor.addAdsorbPolygons([polygon1, polygon2]);
+      // polyEditor.addAdsorbPolygons([polygon1, polygon2]);
       polyEditor.on("add", function (data) {
         console.log(data);
         var polygon = data.target;
         polyEditor.addAdsorbPolygons(polygon);
+
         polygon.on("dblclick", () => {
           polyEditor.setTarget(polygon);
           polyEditor.open();
           hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
         });
+
+        polygon.on("mouseover", () => {
+          var counts = [];
+          var seriesData = [];
+          for (var i = 0; i < heatmapData.length; i++) {
+            var heatmapPoints = heatmapData[i];
+            var totalCount = 0;
+
+            for (var j = 0; j < heatmapPoints.length; j++) {
+              var point = heatmapPoints[j];
+              if (pointInPolygon(point, polygon.getPath())) {
+                totalCount += point.count;
+              }
+            }
+
+            counts.push({
+              hour: i,
+              totalcount: totalCount,
+            });
+            seriesData.push(totalCount);
+          }
+
+          let slider = document.getElementById("control-bar");
+          var currentHour = slider.value;
+          var currentTotalCount = counts[currentHour].totalcount;
+          console.log(
+            "Total Count at Hour " + currentHour + ": " + currentTotalCount
+          );
+          option.series[0].data = seriesData;
+          chart.setOption(option);
+        });
       });
 
-      polygon1.on("dblclick", () => {
+      function pointInPolygon(point, polygon) {
-        polyEditor.setTarget(polygon1);
+        var x = point.lng,
-        polyEditor.open();
+          y = point.lat;
-        hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
+        var n = polygon.length;
-      });
+        var inside = false;
-      polygon2.on("dblclick", () => {
+
-        polyEditor.setTarget(polygon2);
+        for (var i = 0, j = n - 1; i < n; j = i++) {
-        polyEditor.open();
+          var xi = polygon[i].lng,
-        hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
+            yi = polygon[i].lat;
-      });
+          var xj = polygon[j].lng,
+            yj = polygon[j].lat;
+
+          if (yi > y != yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi) {
+            inside = !inside;
+          }
+        }
+        return inside;
+      }
+
+      // polygon1.on("dblclick", () => {
+      //   polyEditor.setTarget(polygon1);
+      //   polyEditor.open();
+      //   hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
+      // });
+      // polygon2.on("dblclick", () => {
+      //   polyEditor.setTarget(polygon2);
+      //   polyEditor.open();
+      //   hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
+      // });
+
       function createPolygon() {
         polyEditor.close();
         polyEditor.setTarget();
@@ -398,11 +450,6 @@
         hint.innerText = "正在创建一个新区域，右键完成，点击 Stop 退出编辑";
       }
 
-      function startEdit() {
-        polyEditor.open();
-        hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
-      }
-
       function stopEdit() {
         polyEditor.close();
         hint.innerText = "双击区域即可编辑，或点击 New 创建新区域";