安装

npm install @xintao1105/amap-3d

or

yarn add @xintao1105/amap-3d

示例代码

import {
  InitAmap,
  InfoPanel,
  FlyLine,
  Polygon,
  Label,
  PointMarker,
} from "@xintao1105/amap-3d";
import type { initProps, opts } from "@xintao1105/amap-3d";

export class Amap extends React.Component<interProps, interState> {
  // 默认值
  static defaultProps: Partial<interProps> = {
    width: 1000,
    height: 600,
    jsCode: "xxxxxxxxxxxxxxxxxxxxx",
    amapKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
    opts: {
      viewMode: "3D",
      zoom: 5,
      zooms: [2, 24],
      center: [104.877768, 33.44221],
      mapStyle: "grey",
      pitch: 52.3,
      skyColor: "#23303E",
      defaultCursor: "default",
      displayMode: "normal",
      showBg: true,
      showRoad: true,
      showBuilding: true,
      showMark: true,
      showSituation: false,
    },
  };
  private container: any = React.createRef();
  private initAmap: any;
  constructor(props: interProps) {
    super(props);

    this.state = {};
  }

  async componentDidMount() {
    this.initAmap = await new InitAmap({
      jsCode: this.props.jsCode,
      amapKey: this.props.amapKey,
      container: this.container,
      opts: this.props.opts,
    });

    this.initAmap.load((_e: { AMap: any; map: any }) => {
      console.log(_e.AMap);
      console.log(_e.map);
    });
  }

  componentWillUnmount() {
    this.initAmap?.destroy();
  }

  async componentDidUpdate() {}

  render() {
    return (
      <div style={{ width: this.props.width, height: this.props.height }}>
        <div
          ref={(e: any) => (this.container = e)}
          style={{ width: "100%", height: "100%" }}
        ></div>
      </div>
    );
  }
}

参数类型

/**
 * 地图初始化参数
 */
interface opts {
  center?: [Number, Number];
  zoom?: number;
  rotation?: number;
  pitch?: number;
  viewMode?: string | "2D" | "3D";
  terrain?: boolean;
  features?: Array<string>;
  layers?: Array<any>;
  zooms?: [number, number];
  dragEnable?: boolean;
  zoomEnable?: boolean;
  jogEnable?: boolean;
  pitchEnable?: boolean;
  rotateEnable?: boolean;
  animateEnable?: boolean;
  keyboardEnable?: boolean;
  doubleClickZoom?: boolean;
  scrollWheel?: boolean;
  touchZoom?: boolean;
  touchZoomCenter?: boolean;
  showLabel?: boolean;
  defaultCursor?: string;
  isHotspot?: boolean;
  /**
   * 展示模式  "3D" | "3D(矢量地形图渲染" | "3D(卫星地形图渲染)"
   */
  displayMode?: "normal" | "vector" | "terrain";
  mapStyle?:
    | string
    | "normal"
    | "dark"
    | "light"
    | "whitesmoke"
    | "fresh"
    | "grey"
    | "graffiti"
    | "macaron"
    | "blue"
    | "darkblue"
    | "wine";
  wallColor?: string | Array<number>;
  roofColor?: string | Array<number>;
  showBuildingBlock?: boolean;
  showIndoorMap?: boolean;
  skyColor?: string | Array<number>;
  labelRejectMask?: boolean;
  mask?: Array<number>;
  WebGLParams?: object;
  autoRotate?:
    | boolean
    | {
        rotation?: number;
        direction?: string | "clockwise" | "anti-clockwise";
        duration?: number;
      };
  showBg?: boolean;
  showRoad?: boolean;
  showBuilding?: boolean;
  showMark?: boolean;
  showSituation?: boolean;
  /**
   * 显示路网和标记  displayMode: "terrain" (3D(卫星地形图渲染))时生效;
   */
  showRoadNet?: boolean;
}
/**
 * 参数
 */
interface initProps {
  /**
   * 密钥
   * 注意：2021年12月02日之后所申请的 key 必须配备安全密钥 jscode 一起使用
   */
  jsCode?: string;
  /**
   * key
   */
  amapKey: string;
  /**
   * 构造一个地图对象，参数 container 中传入地图容器 DIV 的 ID 值或者 DIV 对象。
   * 注意：地图容器在创建之前必须拥有实际大小，否则可能出现底图无法渲染的问题。
   */
  container: string | HTMLDivElement;
  /**
   * 地图初始化参数对
   */
  opts?: opts;
}