@react-native-ohos/react-native-amap3d 3.2.5-rc.1

package/harmony/rn_amap3d/src/main/module.json5

@@ -0,0 +1,17 @@
+{
+  "module": {
+    "name": "rn_amap3d",
+    "type": "har",
+    "deviceTypes": [
+      "default",
+      "tablet",
+      "2in1"
+    ],
+    "requestPermissions": [
+      {
+        "name": 'ohos.permission.INTERNET',
+      }
+    ]
+  },
+
+}

package/harmony/rn_amap3d/src/main/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from package"
+    }
+  ]
+}

package/harmony/rn_amap3d/src/main/resources/en_US/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from package"
+    }
+  ]
+}

package/harmony/rn_amap3d/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "page_show",
+      "value": "page from package"
+    }
+  ]
+}

package/harmony/rn_amap3d/ts.ts

@@ -0,0 +1,28 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+
+export * from "./src/main/ets/AMap3DPackage";
+
+export * from "./src/main/ets/AMap3DModule";

package/lib/src/NativeAMapSdk.ts

@@ -0,0 +1,9 @@
+import type { TurboModule } from "react-native";
+import { TurboModuleRegistry } from "react-native";
+
+export interface Spec extends TurboModule {
+  initSDK(sdk : string): void;
+  getVersion(): Promise<string>;
+}
+
+export default TurboModuleRegistry.get<Spec>("AMapSdk");

package/lib/src/circle.tsx

@@ -0,0 +1,17 @@
+
+import AMapCircle ,{CircleProps} from './circleNativeComponent'
+import React , {Component}  from 'react';
+
+
+export default class Circle extends Component<CircleProps> {
+ 
+  constructor(props: CircleProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AMapCircle {...this.props} />
+    );
+  }
+}

package/lib/src/circleNativeComponent.ts

@@ -0,0 +1,47 @@
+import * as React from "react";
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float,Int32 } from "react-native/Libraries/Types/CodegenTypes";
+
+    type LatLng = Readonly<{
+        latitude: Float;
+        longitude: Float;
+    }>
+
+export interface CircleProps extends ViewProps {
+  /**
+   * 圆点坐标
+   */
+  center: LatLng;
+
+  /**
+   * 半径（米）
+   */
+  radius: Float;
+
+  /**
+   * 边线宽度
+   */
+  strokeWidth?: Float;
+
+  /**
+   * 边线颜色
+   */
+  strokeColor?: string;
+
+  /**
+   * 填充颜色
+   */
+  fillColor?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: Int32;
+}
+
+export default codegenNativeComponent<CircleProps>("AMapCircle")as HostComponent<CircleProps>; 

package/lib/src/cluster/cluster-view.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { StyleSheet, Text, View, ViewStyle } from "react-native";
+import { ClusterParams } from ".";
+import Marker from "../marker";
+
+interface Props {
+  cluster: ClusterParams;
+  style?: ViewStyle;
+  textStyle?: ViewStyle;
+  onPress?: (params: ClusterParams) => void;
+}
+
+export default class ClusterView extends React.PureComponent<Props> {
+  onPress = () => {
+    this.props.onPress?.call(this, this.props.cluster);
+  };
+
+  renderClusterView = () => {
+    const { count } = this.props.cluster;
+    const size = 36 + Math.log2(count);
+    const clusterStyle = { width: size, height: size, borderRadius: size / 2 };
+    return (
+      <View style={[style.cluster, clusterStyle, this.props.style]}>
+        <Text style={[style.text, this.props.textStyle]}>{count}</Text>
+      </View>
+    );
+  };
+
+  render() {
+    return (
+      <Marker onPress={this.onPress} position={this.props.cluster.position}>
+        {this.renderClusterView()}
+      </Marker>
+    );
+  }
+}
+
+const style = StyleSheet.create({
+  cluster: {
+    borderWidth: 4,
+    borderColor: "#fff",
+    backgroundColor: "rgba(245,83,61,0.9)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  text: { color: "#fff", fontWeight: "600" },
+});

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,17 @@
+
+import AHeatMap ,{HeatMapProps} from './heat-mapNativeComponent'
+import React , {Component}  from 'react';
+
+
+export default class HatMap extends Component<HeatMapProps> {
+ 
+  constructor(props: HeatMapProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AHeatMap {...this.props} />
+    );
+  }
+}

package/lib/src/heat-mapNativeComponent.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float } from "react-native/Libraries/Types/CodegenTypes";
+
+type LatLng = Readonly<{
+    latitude: Float;
+    longitude: Float;
+}>
+
+export interface HeatMapProps extends ViewProps {
+  /**
+   * 节点坐标
+   */
+  data: LatLng[];
+
+  /**
+   * 半径（米）
+   */
+  radius?: Float;
+
+  /**
+   * 透明度
+   */
+  opacity?: Float;
+}
+
+
+export default codegenNativeComponent<HeatMapProps>("AMapHeatMap") as HostComponent<HeatMapProps>; 
+

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 * from "./map-viewNativeComponent";
+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"
+

package/lib/src/map-view.tsx

@@ -0,0 +1,73 @@
+
+import AMapView, { Location, MapViewProps, voidEvent } from './map-viewNativeComponent'
+import React, { Component } from 'react';
+import type * as ReactNative from "react-native";
+import {NativeMethods} from "react-native";
+import { LatLng, CameraPosition, LatLngBounds, onCameraEvent, MapPoi, Commands } from './map-viewNativeComponent'
+
+export default class MapView extends Component<MapViewProps> {
+  constructor(props: MapViewProps) {
+    super(props);
+  }
+
+  ref: React.ElementRef<typeof AMapView> | null = null;
+
+  /**
+   * 移动视角
+   */
+  moveCamera(cameraPosition: CameraPosition, duration = 0) {
+    console.info("AMapViewEventType map3d demo moveCamera")
+      if (this.ref) {
+		    Commands.moveCamera(
+          this.ref,
+          cameraPosition,
+          duration
+		  );
+      }
+  }
+
+  render() {
+    return (
+      <AMapView {...this.props} ref={(ref) => (this.ref = ref)}
+        {...this.props}
+        onPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
+          console.info("AMapViewEventType map3d demo 10.11")
+          if (event.nativeEvent.latitude) {
+            this.props.onPress?.call(this, event);
+          }
+        }}
+        onLongPress={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
+          console.info("AMapViewEventType map3d demo long event 11.32")
+          if (event.nativeEvent.latitude) {
+            this.props.onLongPress?.call(this, event);
+          }
+        }}
+        onCameraMove={(event: ReactNative.NativeSyntheticEvent<CameraPosition>) => {
+          console.info("AMapViewEventType map3d demo Move start event")
+          if (event.nativeEvent.targetValue?.latitude) {
+            this.props.onCameraMove?.call(this, event);
+          }
+        }}
+        onCameraIdle={(event: ReactNative.NativeSyntheticEvent<CameraPosition>) => {
+          console.info("AMapViewEventType map3d demo Move end event")
+          if (event.nativeEvent.targetValue?.latitude) {
+            this.props.onCameraIdle?.call(this, event);
+          }
+        }}
+        onPressPoi={(event: ReactNative.NativeSyntheticEvent<MapPoi>) => {
+          console.info("AMapViewEventType map3d demo MapPoi")
+          if (event.nativeEvent.position.latitude) {
+            this.props.onPressPoi?.call(this, event);
+          }
+        }}
+        onLocation={(event: ReactNative.NativeSyntheticEvent<Location>) => {
+          console.info("AMapViewEventType map3d demo onLocation")
+          this.props.onLocation?.call(this, event);
+        }}
+        onLoad={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
+          this.props.onLoad?.call(this, event);
+        }}
+      />
+    );
+  }
+}