From c1db08709f44b4520b4f387518a65dd85715f037 Mon Sep 17 00:00:00 2001
From: wang_yp <357754663@qq.com>
Date: Sat, 12 Oct 2024 00:01:41 +0800
Subject: [PATCH] fix(amap):core

---
 src/App.tsx                         | 49 +++++++++++++----------------
 src/components/map/MapComponent.tsx |  6 ++--
 src/components/map/mapUtil.ts       | 37 +++++++++++++++++++++-
 src/util/config.ts                  |  4 +--
 src/util/webRtc.ts                  |  2 --
 5 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index da08752..bd6943a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,42 +1,35 @@
 import { Outlet } from "react-router";
-import MyComponent from "./components/errorComp";
-// import MapUtl from "./components/map/mapUtil";
+import MapUtl from "./components/map/mapUtil";
 import { useEffect } from "react";
-// const SocketService = require("./util/socket");
 import SocketService from "./util/socket";
 const socketService = SocketService.getInstance();
-const onMessage = (data: any) => {
-  // console.log("message", data);
+const onMessage = (e: any) => {
+  let data = JSON.parse(e);
+  if (data.type === "accpt") {
+    let body = JSON.parse(data.content.body);
+    console.log(body);
+    MapUtl.addMaker({
+      lng: 103.55,
+      lat: 30.342,
+      title: body?.user_name,
+      users: body,
+    });
+  }
 };
-socketService.on("message", onMessage);
-const onConnected = () => {
-  console.log("connected");
-};
-socketService.on("connected", onConnected);
+console.log("init");
 
-// socketService.
-// socket.onmessage((e) => {
-// const data = JSON.parse(e.data);
-// if (data.type === "heartbeat") {
-//   MapUtl.makerList[0].setPosition([103.55, 30.342]);
-//   var m = MapUtl.amap;
-//   var newIcon = new m.Icon({
-//     image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
-//     size: new m.Size(25, 34), // 图标大小
-//     anchor: new m.Pixel(12, 32), // 图标锚点
-//   });
-//   MapUtl.makerList[0].setIcon(newIcon);
-// }
-// });
+socketService.on("message", onMessage);
 const App = () => {
   useEffect(() => {
-    console.log("app mounted");
+    return () => {
+      console.log("uninstall");
+      
+      socketService.off("message", onMessage);
+    };
   }, []);
   return (
     <>
-      <MyComponent>
-        <Outlet />
-      </MyComponent>
+      <Outlet />
     </>
   );
 };
diff --git a/src/components/map/MapComponent.tsx b/src/components/map/MapComponent.tsx
index 1b767e6..48f2a64 100644
--- a/src/components/map/MapComponent.tsx
+++ b/src/components/map/MapComponent.tsx
@@ -18,7 +18,7 @@ export default function MapContainer() {
       version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: ["AMap.Scale"],
     });
-
+    
     amap = new Amap.Map("container", {
       viewMode: "2D", // 是否为3D地图模式
       zoom: 11, // 初始化地图级别
@@ -27,7 +27,9 @@ export default function MapContainer() {
       resizeEnable: true,
     });
     setmaps(amap);
-    addMaket(Amap,amap);
+    // addMaket(Amap,amap);
+    MapUtl.loadMap = Amap;
+    MapUtl.amap = amap;
     amap.setFitView();
   };
   const addMaket = (m,mp) => {
diff --git a/src/components/map/mapUtil.ts b/src/components/map/mapUtil.ts
index 1c50df9..d936deb 100644
--- a/src/components/map/mapUtil.ts
+++ b/src/components/map/mapUtil.ts
@@ -1,6 +1,41 @@
 class MapUtl {
     static makerList: any[] = [];
-    static amap:any = null;
+    static amap: any = null;
+    static loadMap: any = null;
+
+    static addMaker(data: any) {
+        const { lng, lat, title, users } = data;
+        const marker = new MapUtl.loadMap.Marker({
+            position: new MapUtl.loadMap.LngLat(lng, lat),
+            title: title,
+        });
+        var content = [
+            "<div><b>姓名 :" + users?.user_name + "</b>",
+            "职位 : " + users.pos_held,
+            "电话 : " + users.tel,
+            "</div>",
+        ];
+        var infoWindow = new MapUtl.loadMap.InfoWindow({
+            offset: new MapUtl.loadMap.Pixel(0, -30),
+            autoMove: true,
+            content: content.join("<br/>"),
+        });
+        marker.on("click", (e) => {
+            infoWindow.open(MapUtl.amap, e.target.getPosition());
+        });
+        MapUtl.amap?.add(marker);
+    }
+    static setMakericon = (maker) => {
+        maker.setPosition([103.55, 30.342]);
+        var m = MapUtl.amap;
+        var newIcon = new m.Icon({
+            image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
+            size: new m.Size(25, 34), // 图标大小
+            anchor: new m.Pixel(12, 32), // 图标锚点
+        });
+        maker.setIcon(newIcon);
+    }
+
 }
 
 export default MapUtl;
\ No newline at end of file
diff --git a/src/util/config.ts b/src/util/config.ts
index cb7ee90..064af0c 100644
--- a/src/util/config.ts
+++ b/src/util/config.ts
@@ -3,10 +3,10 @@ class Config {
     // static uploadUrl = "https://rw.quwanya.cn/";
     // static ws = "wss://rw.quwanya.cn/ws";
 
-    // static ws = "wss://rw.quwanya.cn/ws?id=admin";
+    static ws = "ws://127.0.0.1:12214/ws?id=admin";
     static baseUrl = "http://127.0.0.1:12214/";
     static uploadUrl = "http://127.0.0.1:12214/";
-    static ws = "wss://rw.quwanya.cn/ws";
+    // static ws = "wss://rw.quwanya.cn/ws";
     
 }
 export default Config;
diff --git a/src/util/webRtc.ts b/src/util/webRtc.ts
index 66d4c9b..9786b68 100644
--- a/src/util/webRtc.ts
+++ b/src/util/webRtc.ts
@@ -1,8 +1,6 @@
-// import SocketService from "./socket";
 
 import Config from "./config";
 
-// const socketService = SocketService.getInstance();
 class WebRtc {
     private mediaStream: MediaStream | Blob | null = null;
     private pee: RTCPeerConnection | null = null;