@evnydd0sf/react-native-amap3d-fix 3.2.4-fix.1

package/lib/src/cluster/index.tsx

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { ViewStyle } from "react-native";
+import Supercluster, { ClusterFeature, ClusterProperties } from "supercluster";
+import { CameraEvent } from "../map-view";
+import { LatLng } from "../types";
+import ClusterView from "./cluster-view";
+
+export interface ClusterParams {
+  /**
+   * 唯一标识
+   */
+  id: number;
+
+  /**
+   * 包含的 Marker 数量
+   */
+  count: number;
+
+  /**
+   * 坐标
+   */
+  position: LatLng;
+}
+
+interface ClusterPoint {
+  /**
+   * 坐标
+   */
+  position: LatLng;
+
+  /**
+   * 携带的数据，可以是任意类型
+   */
+  properties?: any;
+}
+
+interface Props {
+  /**
+   * 聚合半径
+   */
+  radius?: number;
+
+  /**
+   * 聚合点样式
+   */
+  clusterStyle?: ViewStyle;
+
+  /**
+   * 聚合点文本样式
+   */
+  clusterTextStyle?: ViewStyle;
+
+  /**
+   * 坐标点列表
+   */
+  points: ClusterPoint[];
+
+  /**
+   * 渲染 Marker
+   */
+  renderMarker: (item: ClusterPoint) => React.ReactNode;
+
+  /**
+   * 渲染聚合点
+   */
+  renderCluster?: (params: ClusterParams) => React.ComponentType<any>;
+
+  /**
+   * 聚合点点击事件
+   */
+  onPress?: (params: ClusterParams) => void;
+}
+
+interface State {
+  clusters: ClusterFeature<ClusterProperties>[];
+}
+
+export default class Cluster extends React.PureComponent<Props, State> {
+  static defaultProps = { radius: 200 };
+  state: State = { clusters: [] };
+  status?: CameraEvent;
+  cluster?: Supercluster<any, ClusterProperties>;
+
+  componentDidMount() {
+    this.init();
+  }
+
+  componentDidUpdate(props: Props) {
+    if (props.points != this.props.points) {
+      this.init();
+    }
+  }
+
+  async init() {
+    const { radius, points } = this.props;
+    // 如果主线程占用太多计算资源，会导致 ios onLoad 事件无法触发，非常蛋疼
+    // 暂时想到的解决办法是等一个事件循环
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    const options = { radius, minZoom: 3, maxZoom: 21 };
+    this.cluster = new Supercluster<any, ClusterProperties>(options).load(
+      points.map((marker) => ({
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [marker.position.longitude, marker.position.latitude],
+        },
+        properties: marker.properties,
+      }))
+    );
+    if (this.status) {
+      this.update(this.status);
+    }
+  }
+
+  /**
+   * 需要在 MapView.onCameraIdle({ nativeEvent }) 回调里调用，参数为 nativeEvent
+   */
+  async update(status: CameraEvent) {
+    this.status = status;
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    const { cameraPosition, latLngBounds } = status;
+    const { southwest, northeast } = latLngBounds;
+    const clusters = this.cluster!.getClusters(
+      [southwest.longitude, southwest.latitude, northeast.longitude, northeast.latitude],
+      Math.round(cameraPosition.zoom!)
+    );
+    this.setState({ clusters });
+  }
+
+  renderCluster = (cluster: ClusterParams) => {
+    return (
+      <ClusterView
+        key={cluster.id}
+        cluster={cluster}
+        onPress={this.props.onPress}
+        style={this.props.clusterStyle}
+        textStyle={this.props.clusterTextStyle}
+      />
+    );
+  };
+
+  render() {
+    const { renderCluster, renderMarker } = this.props;
+    const render = renderCluster || this.renderCluster;
+    return this.state.clusters.map(({ geometry, properties }) => {
+      const position = {
+        latitude: geometry.coordinates[1],
+        longitude: geometry.coordinates[0],
+      };
+
+      if (properties.point_count > 0) {
+        const { cluster_id, point_count } = properties;
+        return render({ position, id: cluster_id, count: point_count });
+      }
+
+      return renderMarker({ position, properties });
+    });
+  }
+}

package/lib/src/component.ts

@@ -0,0 +1,31 @@
+import { PureComponent } from "react";
+import { findNodeHandle, UIManager } from "react-native";
+
+export default class Component<P, S = {}> extends PureComponent<P, S> {
+  /**
+   * 原生 View 名称，继承时必须指定
+   */
+  name = "";
+  mounted = false;
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  /**
+   * 调用原生方法
+   */
+  invoke(name: string, params?: any[]) {
+    if (!this.mounted) return;
+
+    const handle = findNodeHandle(this);
+    if (handle) {
+      const command = UIManager.getViewManagerConfig(this.name).Commands[name];
+      UIManager.dispatchViewManagerCommand(handle, command, params);
+    }
+  }
+}

package/lib/src/heat-map.tsx

@@ -0,0 +1,21 @@
+import { requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface HeatMapProps {
+  /**
+   * 节点坐标
+   */
+  data: LatLng[];
+
+  /**
+   * 半径（米）
+   */
+  radius?: number;
+
+  /**
+   * 透明度
+   */
+  opacity?: number;
+}
+
+export default requireNativeComponent<HeatMapProps>("AMapHeatMap");

package/lib/src/index.ts

@@ -0,0 +1,11 @@
+export { default as Circle } from "./circle";
+export { default as Cluster } from "./cluster";
+export { default as HeatMap } from "./heat-map";
+export { default as MapView } from "./map-view";
+export { default as Marker } from "./marker";
+export { default as MultiPoint } from "./multi-point";
+export { default as Polygon } from "./polygon";
+export { default as Polyline } from "./polyline";
+export * from "./types";
+export { AMapSdk };
+import * as AMapSdk from "./sdk";

package/lib/src/map-view.tsx

@@ -0,0 +1,230 @@
+import * as React from "react";
+import {
+  NativeMethods,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  ViewProps,
+} from "react-native";
+import Component from "./component";
+import { CameraPosition, LatLng, LatLngBounds, MapPoi, MapType, Point } from "./types";
+
+export interface CameraEvent {
+  cameraPosition: CameraPosition;
+  latLngBounds: LatLngBounds;
+}
+
+export interface MapViewProps extends ViewProps {
+  /**
+   * 地图类型
+   */
+  mapType?: MapType;
+
+  /**
+   * 初始状态
+   */
+  initialCameraPosition?: CameraPosition;
+
+  /**
+   * 是否显示当前定位
+   */
+  myLocationEnabled?: boolean;
+
+  /**
+   * 是否显示室内地图
+   */
+  indoorViewEnabled?: boolean;
+
+  /**
+   * 是否显示3D建筑
+   */
+  buildingsEnabled?: boolean;
+
+  /**
+   * 是否显示标注
+   */
+  labelsEnabled?: boolean;
+
+  /**
+   * 是否显示指南针
+   */
+  compassEnabled?: boolean;
+
+  /**
+   * 是否显示放大缩小按钮
+   *
+   * @platform android
+   */
+  zoomControlsEnabled?: boolean;
+
+  /**
+   * 是否显示比例尺
+   */
+  scaleControlsEnabled?: boolean;
+
+  /**
+   * 是否显示定位按钮
+   *
+   * @platform android
+   */
+  myLocationButtonEnabled?: boolean;
+
+  /**
+   * 是否显示路况
+   */
+  trafficEnabled?: boolean;
+
+  /**
+   * 最大缩放级别
+   */
+  maxZoom?: number;
+
+  /**
+   * 最小缩放级别
+   */
+  minZoom?: number;
+
+  /**
+   * 是否启用缩放手势，用于放大缩小
+   */
+  zoomGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用滑动手势，用于平移
+   */
+  scrollGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用旋转手势，用于调整方向
+   */
+  rotateGesturesEnabled?: boolean;
+
+  /**
+   * 是否启用倾斜手势，用于改变视角
+   */
+  tiltGesturesEnabled?: boolean;
+
+  /**
+   * 设定定位的最小更新距离
+   *
+   * @platform ios
+   */
+  distanceFilter?: number;
+
+  /**
+   * 设定最小更新角度，默认为 1 度
+   *
+   * @platform ios
+   */
+  headingFilter?: number;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (event: NativeSyntheticEvent<LatLng>) => void;
+
+  /**
+   * 标注点击事件
+   */
+  onPressPoi?: (event: NativeSyntheticEvent<MapPoi>) => void;
+
+  /**
+   * 长按事件
+   */
+  onLongPress?: (event: NativeSyntheticEvent<LatLng>) => void;
+
+  /**
+   * 地图状态改变事件，随地图状态变化不停地触发
+   */
+  onCameraMove?: (event: NativeSyntheticEvent<CameraEvent>) => void;
+
+  /**
+   * 地图状态改变事件，在停止变化后触发
+   */
+  onCameraIdle?: (event: NativeSyntheticEvent<CameraEvent>) => void;
+
+  /**
+   * 地图初始化完成事件
+   */
+  onLoad?: (event: NativeSyntheticEvent<void>) => void;
+
+  /**
+   * 地图定位更新事件
+   */
+  onLocation?: (event: NativeSyntheticEvent<GeolocationPosition>) => void;
+}
+
+const name = "AMapView";
+const NativeMapView = requireNativeComponent<MapViewProps>(name);
+
+export default class extends Component<MapViewProps> {
+  static defaultProps = {
+    style: { flex: 1 },
+    compassEnabled: true,
+    scaleControlsEnabled: true,
+    distanceFilter: 1,
+  };
+
+  name = name;
+  ref?: (React.Component<MapViewProps> & NativeMethods) | null;
+  state = { loaded: false };
+  callbackMap: { [key: number]: (data: any) => void } = {};
+
+  /**
+   * 移动视角
+   */
+  moveCamera(cameraPosition: CameraPosition, duration = 0) {
+    this.invoke("moveCamera", [cameraPosition, duration]);
+  }
+
+  /**
+   * 点坐标转地理坐标，主要用于地图选点
+   */
+  getLatLng(point: Point): Promise<LatLng> {
+    return this.call("getLatLng", point);
+  }
+
+  callback = ({ nativeEvent }: NativeSyntheticEvent<{ id: number; data: any }>) => {
+    this.callbackMap[nativeEvent.id]?.call(this, nativeEvent.data);
+    delete this.callbackMap[nativeEvent.id];
+  };
+
+  call(name: string, args: any): Promise<any> {
+    const id = Math.random();
+    this.invoke("call", [id, name, args]);
+    return new Promise((resolve) => (this.callbackMap[id] = resolve));
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+    // 无论如何也要在 1 秒后 setLoaded(true) ，防止 onLoad 事件不触发的情况下显示不正常
+    // 目前只在 iOS 上低概率出现
+    setTimeout(() => this.setState({ loaded: true }), 1000);
+  }
+
+  render() {
+    let { style, onLoad } = this.props;
+    if (!this.state.loaded) {
+      style = [style, { width: 1, height: 1 }];
+    }
+    return (
+      <NativeMapView
+        {...this.props}
+        ref={(ref) => (this.ref = ref)}
+        style={style}
+        // @ts-ignore: 内部接口
+        onCallback={this.callback}
+        onPress={(event) => {
+          if (event.nativeEvent.latitude) {
+            this.props.onPress?.call(this, event);
+          }
+        }}
+        onLoad={(event) => {
+          // android 地图部分控件不显示的问题在重新 layout 之后会恢复正常。
+          // 同时也能修复 ios 地图偶尔出现的 layout 异常
+          this.setState({ loaded: true });
+          onLoad?.call(this, event);
+        }}
+      />
+    );
+  }
+}

package/lib/src/marker.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import {
+  ImageSourcePropType,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+  View,
+  ViewStyle,
+} from "react-native";
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+import Component from "./component";
+import { LatLng, Point } from "./types";
+
+export interface MarkerProps {
+  /**
+   * 坐标
+   */ position: LatLng;
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+
+  /**
+   * 透明度 [0, 1]
+   *
+   * @platform android
+   */
+  opacity?: number;
+
+  /**
+   * 是否可拖拽
+   */
+  draggable?: boolean;
+
+  /**
+   * 是否平贴地图
+   *
+   * @platform android
+   */
+  flat?: boolean;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+
+  /**
+   * 覆盖物锚点比例
+   *
+   * @link http://a.amap.com/lbs/static/unzip/Android_Map_Doc/3D/com/amap/api/maps/model/Marker.html#setAnchor-float-float-
+   * @platform android
+   */
+  anchor?: Point;
+
+  /**
+   * 覆盖物偏移位置
+   *
+   * @link http://a.amap.com/lbs/static/unzip/iOS_Map_Doc/AMap_iOS_API_Doc_3D/interface_m_a_annotation_view.html#a78f23c1e6a6d92faf12a00877ac278a7
+   * @platform ios
+   */
+  centerOffset?: Point;
+
+  /**
+   * 自定义 View
+   */
+  children?: React.ReactNode;
+
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+
+  /**
+   * 拖放开始事件
+   */
+  onDragStart?: () => void;
+
+  /**
+   * 拖放进行事件，类似于 mousemove，在结束之前会不断调用
+   */
+  onDrag?: () => void;
+
+  /**
+   * 拖放结束事件
+   */
+  onDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
+}
+
+export default class extends Component<MarkerProps> {
+  name = name;
+
+  /**
+   * 触发自定义 view 更新
+   *
+   * 通常来说，不需要主动调用该方法，对于 android，如果自定义 view 存在异步更新，
+   * 例如，包含一个引用了网络图片的 <Image />，则需要在 view 更新后主动调用该方法触发
+   * icon 更新。
+   */
+  update = () => {
+    setTimeout(() => this.invoke("update"), 0);
+  };
+
+  componentDidUpdate() {
+    if (this.props.children) {
+      this.update();
+    }
+  }
+
+  render() {
+    const props = { ...this.props };
+    Reflect.set(props, "latLng", props.position);
+    // @ts-ignore android 不能用 position 作为属性，会发生冲突，也是个蛋疼的问题
+    delete props.position;
+    if (props.children) {
+      props.children = (
+        <View style={style} onLayout={this.update}>
+          {props.children}
+        </View>
+      );
+    }
+    return <NativeMarker {...props} icon={resolveAssetSource(props.icon)} />;
+  }
+}
+
+const name = "AMapMarker";
+const style: ViewStyle = { position: "absolute", zIndex: -1 };
+const NativeMarker = requireNativeComponent<MarkerProps>(name);

package/lib/src/multi-point.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { ImageSourcePropType, NativeSyntheticEvent, requireNativeComponent } from "react-native";
+// @ts-ignore
+import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
+import { LatLng } from "./types";
+
+const NativeMultiPoint = requireNativeComponent<MultiPointProps>("AMapMultiPoint");
+
+export interface MultiPointProps {
+  /**
+   * 坐标点集合
+   */
+  items?: LatLng[];
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (event: NativeSyntheticEvent<{ index: number }>) => void;
+}
+
+export default (props: MultiPointProps) => {
+  return <NativeMultiPoint {...props} icon={resolveAssetSource(props.icon)} />;
+};

package/lib/src/polygon.tsx

@@ -0,0 +1,31 @@
+import { requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface Polygon {
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 边线宽度
+   */
+  strokeWidth?: number;
+
+  /**
+   * 边线颜色
+   */
+  strokeColor?: string;
+
+  /**
+   * 填充颜色
+   */
+  fillColor?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+}
+
+export default requireNativeComponent<Polygon>("AMapPolygon");

package/lib/src/polyline.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ColorValue, Platform, processColor, requireNativeComponent } from "react-native";
+import { LatLng } from "./types";
+
+export interface PolylineProps {
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 线段宽度
+   */
+  width?: number;
+
+  /**
+   * 线段颜色
+   */
+  color?: ColorValue;
+
+  /**
+   * 层级
+   */
+  zIndex?: number;
+
+  /**
+   * 多段颜色
+   */
+  colors: ColorValue[];
+
+  /**
+   * 是否使用颜色渐变
+   */
+  gradient?: boolean;
+
+  /**
+   * 是否绘制大地线
+   */
+  geodesic?: boolean;
+
+  /**
+   * 是否绘制虚线
+   */
+  dotted?: boolean;
+
+  /**
+   * 点击事件
+   */
+  onPress?: () => void;
+}
+
+export default class extends React.PureComponent<PolylineProps> {
+  static defaultProps = { colors: [] };
+
+  render() {
+    const props = {
+      ...this.props,
+      ...Platform.select({ android: { colors: this.props.colors.map(processColor) } }),
+    };
+    // @ts-ignore
+    return <NativePolyline {...props} />;
+  }
+}
+
+const NativePolyline = requireNativeComponent<PolylineProps>("AMapPolyline");