Add area feature

index.html

@@ -45,7 +45,27 @@
       id="control-box"
       class="fixed border rounded-2xl shadow-xl bottom-4 left-4 right-4 backdrop-blur-xl bg-white bg-opacity-70"
     >
+      <span id="hint">双击区域即可编辑，或点击 New 创建新区域</span>
       <div class="flex flex-row flex-nowrap items-center p-4">
+        <button
+          class="rounded-xl transition-all hover:bg-slate-200 p-2 mb-6 mx-1"
+          onclick="createPolygon()"
+        >
+          New
+        </button>
+        <!-- <button
+          class="rounded-xl transition-all hover:bg-slate-200 p-2 mb-6 mx-1"
+          onclick="startEdit()"
+        >
+          Edit
+        </button> -->
+        <button
+          class="rounded-xl transition-all hover:bg-slate-200 p-2 mb-6 mx-1"
+          onclick="stopEdit()"
+        >
+          Stop
+        </button>
+
         <button
           class="h-7 w-7 rounded-full transition-all hover:bg-slate-200 mb-6 mx-1"
           id="toggle-play-btn"
@@ -152,7 +172,8 @@
         securityJsCode: data.gaode.securityJsCode,
       };
     </script>
-    <script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193"></script>
+    <script src="https://webapi.amap.com/maps?v=2.0&key=13471667a960ce7a08b3dfdd9a4fb193&plugin=AMap.PolygonEditor"></script>
+    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
 
     <script>
       var chartEle = document.getElementById("linegraph");
@@ -171,12 +192,6 @@
             type: "cross",
           },
         },
-        // toolbox: {
-        //   show: true,
-        //   feature: {
-        //     saveAsImage: {},
-        //   },
-        // },
         xAxis: {
           type: "category",
           boundaryGap: false,
@@ -317,6 +332,81 @@
           chartBox.style.display = temp;
         }
       }
+
+      var path1 = [
+        [112.964433, 28.22664],
+        [112.956805, 28.191032],
+        [112.950826, 28.118326],
+        [112.941137, 28.103233],
+        [112.93098, 28.109704],
+        [112.899239, 28.11641],
+        [112.879673, 28.149904],
+        [112.886771, 28.170875],
+        [112.862953, 28.188488],
+        [112.85079, 28.223915],
+        [112.852851, 28.234087],
+        [112.88032, 28.225005],
+      ];
+      var path2 = [
+        [112.975993, 28.226261],
+        [112.969743, 28.205509],
+        [112.967603, 28.184652],
+        [112.960208, 28.139103],
+        [113.014548, 28.151931],
+        [113.019324, 28.195638],
+        [113.018336, 28.23149],
+      ];
+      var polygon1 = new AMap.Polygon({
+        path: path1,
+      });
+      var polygon2 = new AMap.Polygon({
+        path: path2,
+      });
+
+      map.add([polygon1, polygon2]);
+      map.setFitView();
+      var polyEditor = new AMap.PolygonEditor(map);
+
+      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 退出编辑";
+        });
+      });
+
+      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();
+        polyEditor.open();
+
+        var hint = document.getElementById("hint");
+        hint.innerText = "正在创建一个新区域，右键完成，点击 Stop 退出编辑";
+      }
+
+      function startEdit() {
+        polyEditor.open();
+        hint.innerText = "正在编辑区域，点击 Stop 退出编辑";
+      }
+
+      function stopEdit() {
+        polyEditor.close();
+        hint.innerText = "双击区域即可编辑，或点击 New 创建新区域";
+      }
     </script>
   </body>
 </html>