feature/threejs

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();
+    }
+  }
+}

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%;
+  }
+}

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;

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;