From 8010aeb09c1bb74c3fead7351555fed3363a7c13 Mon Sep 17 00:00:00 2001
From: lys <971387674@qq.com>
Date: Tue, 15 Apr 2025 08:48:48 +0800
Subject: [PATCH] =?UTF-8?q?feature/=E4=B8=9A=E5=8A=A1=E7=BA=BF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/{amap => AmapViewer}/index.ts         | 10 +++++---
 src/pages/demo/threeAmap/index.tsx            | 12 ++++++----
 .../demo/threeAmap/modules/shadow/index.ts    | 24 +++++++++++++++++++
 3 files changed, 39 insertions(+), 7 deletions(-)
 rename src/lib/{amap => AmapViewer}/index.ts (91%)
 create mode 100644 src/pages/demo/threeAmap/modules/shadow/index.ts

diff --git a/src/lib/amap/index.ts b/src/lib/AmapViewer/index.ts
similarity index 91%
rename from src/lib/amap/index.ts
rename to src/lib/AmapViewer/index.ts
index b548fd2..49a7747 100644
--- a/src/lib/amap/index.ts
+++ b/src/lib/AmapViewer/index.ts
@@ -13,14 +13,17 @@ const pluginsList = [
   "AMap.PolyEditor",
   "AMap.PolylineEditor"
 ];
-export default class Amap {
+export default class AmapViewer {
   public id: string;
+  public center: number[];
   public amapDom!: HTMLElement;
   public map!: any;
+  public AMap!: any;
   public normalMarker!: any;
 
-  constructor(id: string) {
+  constructor(id: string, center: number[]) {
     this.id = id;
+    this.center = center;
     this.initAmap();
   }
 
@@ -38,6 +41,7 @@ export default class Amap {
       jsapi.src = url;
       document.head.appendChild(jsapi);
       jsapi.onload = () => {
+        console.log(1111, AMap)
         this.initMap();
       };
       jsapi.onerror = function () {
@@ -51,7 +55,7 @@ export default class Amap {
     this.amapDom = document.getElementById(this.id) as HTMLElement;
     this.map = new AMap.Map(this.amapDom, {
       zoom: 18,
-      center: [118.794694, 32.434165],
+      center: this.center,
       resizeEnable: true,
       viewMode: "3D",
       defaultCursor: "default",
diff --git a/src/pages/demo/threeAmap/index.tsx b/src/pages/demo/threeAmap/index.tsx
index 1f09e4d..f6575eb 100644
--- a/src/pages/demo/threeAmap/index.tsx
+++ b/src/pages/demo/threeAmap/index.tsx
@@ -1,21 +1,25 @@
 import React, { useEffect, useRef } from "react";
-import Amap from "@/lib/amap";
+import AmapViewer from "@/lib/AmapViewer";
+import ShadowMaterialAmap from "./modules/shadow";
 import styles from "./index.less";
 
 interface OwnProps {}
 
 type Props = OwnProps;
 
-const PAGE_ID = "DEMO_THREEAMAP";
+const PAGE_ID = "DEMO_THREEAMAP",
+  CENTER = [118.794694, 32.434165];
 const ThreeAmap: React.FC<Props> = (props) => {
-  const amapRef = useRef<Amap>();
+  const amapRef = useRef<AmapViewer>();
   useEffect(() => {
     init();
     return () => amapRef.current?.destoryMap();
   }, []);
   const init = () => {
-    amapRef.current = new Amap(PAGE_ID);
+    amapRef.current = new AmapViewer(PAGE_ID, CENTER);
     const amap = amapRef.current;
+    const shadowMaterialAmap = new ShadowMaterialAmap(amap);
+    shadowMaterialAmap.CreateGLlayer();
   };
   return (
     <div className={styles.amap_container}>
diff --git a/src/pages/demo/threeAmap/modules/shadow/index.ts b/src/pages/demo/threeAmap/modules/shadow/index.ts
new file mode 100644
index 0000000..320245c
--- /dev/null
+++ b/src/pages/demo/threeAmap/modules/shadow/index.ts
@@ -0,0 +1,24 @@
+import type AmapViewer from "src/lib/AmapViewer";
+
+export default class ShadowMaterialAmap {
+  protected Amap!: any;
+
+  constructor(map: AmapViewer) {
+    this.Amap = map;
+  }
+
+  // 创建 GL 图层
+  public CreateGLlayer() {
+    console.log("gllayer", this.Amap);
+    return;
+    const gllayer = new AMap.GLCustomLayer({
+      zIndex: 10, // 初始化的操作
+      init: (gl: any) => {
+        console.log("gl", gl);
+      },
+      render: () => {
+        console.log(123);
+      }
+    });
+  }
+}