From 262b4f1ef781426e6a29b3bf6c328d6018f6c9ff Mon Sep 17 00:00:00 2001
From: lys <971387674@qq.com>
Date: Mon, 14 Apr 2025 16:15:33 +0800
Subject: [PATCH] feature/threejs

---
 src/lib/amap/index.ts               | 94 +++++++++++++++++++++++++++++
 src/pages/demo/threeAmap/index.less | 12 ++++
 src/pages/demo/threeAmap/index.tsx  | 27 +++++++++
 typings.d.ts                        | 22 +++----
 4 files changed, 144 insertions(+), 11 deletions(-)
 create mode 100644 src/lib/amap/index.ts
 create mode 100644 src/pages/demo/threeAmap/index.less
 create mode 100644 src/pages/demo/threeAmap/index.tsx

diff --git a/src/lib/amap/index.ts b/src/lib/amap/index.ts
new file mode 100644
index 0000000..b548fd2
--- /dev/null
+++ b/src/lib/amap/index.ts
@@ -0,0 +1,94 @@
+const AMAP_KEY = "2cc032a62120824fd454d1f35789ef32"; //https://console.amap.com/dev/key/app获取高德地图开发key
+const pluginsList = [
+  "AMap.PolyEditor",
+  "AMap.CustomLayer",
+  "AMap.ControlBar",
+  "AMap.Heatmap",
+  "Map3D",
+  "AMap.GLCustomLayer",
+  "AMap.Buildings",
+  "AMap.Size",
+  "AMap.LngLat",
+  "AMap.3DTilesLayer",
+  "AMap.PolyEditor",
+  "AMap.PolylineEditor"
+];
+export default class Amap {
+  public id: string;
+  public amapDom!: HTMLElement;
+  public map!: any;
+  public normalMarker!: any;
+
+  constructor(id: string) {
+    this.id = id;
+    this.initAmap();
+  }
+
+  private initAmap() {
+    this.initAmapFile();
+  }
+
+  private initAmapFile() {
+    if ((window as any).AMap && (window as any).Loca) {
+      this.initMap();
+    } else {
+      const url = `https://webapi.amap.com/maps?v=2.0&key=${AMAP_KEY}`;
+      const jsapi = document.createElement("script");
+      jsapi.charset = "utf-8";
+      jsapi.src = url;
+      document.head.appendChild(jsapi);
+      jsapi.onload = () => {
+        this.initMap();
+      };
+      jsapi.onerror = function () {
+        console.log(new Error("地图API文件加载失败"));
+      };
+    }
+  }
+
+  private initMap() {
+    // 获取画布dom
+    this.amapDom = document.getElementById(this.id) as HTMLElement;
+    this.map = new AMap.Map(this.amapDom, {
+      zoom: 18,
+      center: [118.794694, 32.434165],
+      resizeEnable: true,
+      viewMode: "3D",
+      defaultCursor: "default",
+      pitch: 42.0,
+      mapStyle: "amap://styles/light" || "amap://styles/grey",
+      expandZoomRange: true,
+      rotation: 4.9,
+      skyColor: "#c8edff",
+      showBuildingBlock: false, // 不显示默认建筑物
+      features: ["bg", "road", "point"], // 不显示默认建筑物
+      mask: null
+    });
+    // 添加卫星地图
+    const satelliteLayer = new AMap.TileLayer.Satellite();
+    this.map.add([satelliteLayer]);
+
+    this.map.on("click", (e: any) => {
+      const { lng, lat } = e.lnglat;
+      console.log(e);
+      const marker = new AMap.Marker({
+        map: this.map,
+        position: [lng, lat],
+        label: {
+          content: `[${lng},${lat}]`,
+          direction: "top"
+        }
+      });
+      if (this.normalMarker) this.map.remove(this.normalMarker);
+    });
+    // 图层设置
+    this.normalMarker = new AMap.Marker({ offset: [70, -15], zooms: [1, 22] });
+  }
+
+  public destoryMap() {
+    if (this.map) {
+      this.map.clearMap();
+      this.map.destroy();
+    }
+  }
+}
diff --git a/src/pages/demo/threeAmap/index.less b/src/pages/demo/threeAmap/index.less
new file mode 100644
index 0000000..80c6ecb
--- /dev/null
+++ b/src/pages/demo/threeAmap/index.less
@@ -0,0 +1,12 @@
+.amap_container {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
+
+:global {
+  #DEMO_THREEAMAP {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/pages/demo/threeAmap/index.tsx b/src/pages/demo/threeAmap/index.tsx
new file mode 100644
index 0000000..1f09e4d
--- /dev/null
+++ b/src/pages/demo/threeAmap/index.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from "react";
+import Amap from "@/lib/amap";
+import styles from "./index.less";
+
+interface OwnProps {}
+
+type Props = OwnProps;
+
+const PAGE_ID = "DEMO_THREEAMAP";
+const ThreeAmap: React.FC<Props> = (props) => {
+  const amapRef = useRef<Amap>();
+  useEffect(() => {
+    init();
+    return () => amapRef.current?.destoryMap();
+  }, []);
+  const init = () => {
+    amapRef.current = new Amap(PAGE_ID);
+    const amap = amapRef.current;
+  };
+  return (
+    <div className={styles.amap_container}>
+      <div id={PAGE_ID} />
+    </div>
+  );
+};
+
+export default ThreeAmap;
diff --git a/typings.d.ts b/typings.d.ts
index 3d61f7e..0662cf2 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -1,18 +1,18 @@
-declare module 'lodash';
-declare module '*.json';
-declare module '*.css';
-declare module '*.less';
-declare module '*.jpg';
-declare module '*.gif';
-declare module '*.png';
-declare module '*.svg' {
-  export function ReactComponent(
-    props: React.SVGProps<SVGSVGElement>,
-  ): React.ReactElement;
+declare module "lodash";
+declare module "*.json";
+declare module "*.css";
+declare module "*.less";
+declare module "*.jpg";
+declare module "*.gif";
+declare module "*.png";
+declare module "*.svg" {
+  export function ReactComponent(props: React.SVGProps<SVGSVGElement>): React.ReactElement;
+
   const url: string;
   export default url;
 }
 
 declare const _;
+declare var AMap: any;
 
 declare var $: JQueryStatic;