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

package/lib/src/map-viewNativeComponent.ts

@@ -0,0 +1,232 @@
+import * as React from "react";
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float, Int32, DirectEventHandler } from "react-native/Libraries/Types/CodegenTypes";
+import codegenNativeCommands from "react-native/Libraries/Utilities/codegenNativeCommands";
+
+
+export type LatLng = Readonly<{
+    latitude: Float;
+    longitude: Float;
+}>
+
+/**
+ * 地图标注点
+ */
+export type MapPoi = Readonly<{
+    /**
+     * 标注点 ID
+     */
+    id: string;
+
+    /**
+     * 标注点名称
+     */
+    name: string;
+
+    /**
+     * 标注点坐标
+     */
+    position: {
+        latitude: Float;
+        longitude: Float;
+    }
+}>
+
+
+export type CameraPosition = Readonly<{
+    /**
+     * 中心坐标
+     */
+    targetValue?: {
+        latitude: Float;
+        longitude: Float;
+    }
+
+    /**
+     * 缩放级别
+     */
+    zoom?: Float;
+
+    /**
+     * 朝向、旋转角度
+     */
+    bearing?: Float;
+
+    /**
+     * 倾斜角度
+     */
+    tilt?: Float;
+}>
+
+export type voidEvent = Readonly<{}>
+
+export type Location = Readonly<{
+    accuracy: Float;
+    altitude: Float;
+    heading: Float;
+    speed: Float;
+    latitude: Float;
+    longitude: Float;
+}>
+
+export interface MapViewProps extends ViewProps {
+    /**
+     * 地图类型
+     */
+    mapType?: Int32;
+
+    /**
+     * 初始状态
+     */
+    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?: Float;
+
+    /**
+     * 最小缩放级别
+     */
+    minZoom?: Float;
+
+    /**
+     * 是否启用缩放手势，用于放大缩小
+     */
+    zoomGesturesEnabled?: boolean;
+
+    /**
+     * 是否启用滑动手势，用于平移
+     */
+    scrollGesturesEnabled?: boolean;
+
+    /**
+     * 是否启用旋转手势，用于调整方向
+     */
+    rotateGesturesEnabled?: boolean;
+
+    /**
+     * 是否启用倾斜手势，用于改变视角
+     */
+    tiltGesturesEnabled?: boolean;
+
+    /**
+     * 设定定位的最小更新距离
+     *
+     * @platform ios
+     */
+    distanceFilter?: Float;
+
+    /**
+     * 设定最小更新角度，默认为 1 度
+     *
+     * @platform ios
+     */
+    headingFilter?: Float;
+
+    /**
+     * 点击事件
+     */
+    onPress?: (DirectEventHandler<LatLng>);
+
+    /**
+     * 标注点击事件
+     */
+    onPressPoi?: (DirectEventHandler<MapPoi>);
+
+    /**
+     * 长按事件
+     */
+    onLongPress?: (DirectEventHandler<LatLng>);
+
+    /**
+     * 地图状态改变事件，随地图状态变化不停地触发
+     */
+    onCameraMove?: (DirectEventHandler<CameraPosition>);
+
+    /**
+     * 地图状态改变事件，在停止变化后触发
+     */
+    onCameraIdle?: (DirectEventHandler<CameraPosition>);
+
+    /**
+     * 地图初始化完成事件
+     */
+    onLoad?: (DirectEventHandler<voidEvent>);
+
+    /**
+     * 地图定位更新事件
+     */
+    onLocation?: (DirectEventHandler<Location>);
+}
+
+export default codegenNativeComponent<MapViewProps>("AMapView") as HostComponent<MapViewProps>;
+type MapViewControlType = HostComponent<MapViewProps>;
+
+export interface NativeCommands {
+    moveCamera: (
+      viewRef: React.ElementRef<MapViewControlType>,
+      latitude: Float,
+      longitude: Float,
+      zoom: Float,
+      bearing: Float,
+      tilt: Float,
+      duration: Float
+    ) => void
+}
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ["moveCamera"],
+});

package/lib/src/marker.tsx

@@ -0,0 +1,32 @@
+
+
+import AMapMarker ,{MarkerProps,LatLng,voidEvent} from './markerNativeComponent'
+import React , {Component}  from 'react';
+import type * as ReactNative from "react-native";
+
+export default class Marker extends Component<MarkerProps> {
+ 
+  constructor(props: MarkerProps) {
+    super(props);
+  }
+
+  name = name;
+
+
+  render() {
+    return (
+      <AMapMarker {...this.props} 
+      onPress={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
+        console.info("AMapViewEventType map3d demo onpress marker")
+        this.props.onPress?.call(this, event);
+        
+      }}
+      onDragEnd={(event: ReactNative.NativeSyntheticEvent<LatLng>) => {
+        console.info("AMapViewEventType map3d demo onDragEnd")
+        this.props.onDragEnd?.call(this, event);
+      }}
+      />
+    );
+  }
+}
+const name = "AMapMarker";

package/lib/src/markerNativeComponent.ts

@@ -0,0 +1,105 @@
+import * as React from "react";
+// @ts-ignore
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float , DirectEventHandler} from "react-native/Libraries/Types/CodegenTypes";
+
+export type LatLng = Readonly<{
+    latitude: Float;
+    longitude: Float;
+}>
+
+type Point = Readonly<{
+    x: Float;
+    y: Float;
+}>
+
+type ImageSourcePropType = Readonly<{
+    uri: string;
+    width?: Float;
+    height?: Float;
+    scale?: Float;
+    method?: string;
+    body?: string;
+    bundle?: string;
+}>
+  
+export type voidEvent = Readonly<{}>
+
+export interface MarkerProps extends ViewProps {
+  /**
+   * 坐标
+   */ 
+  position: LatLng;
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+  
+  /**
+   * 透明度 [0, 1]
+   *
+   * @platform android
+   */
+  opacity?: Float;
+
+  /**
+   * 是否可拖拽
+   */
+  draggable?: boolean;
+
+  /**
+   * 是否平贴地图
+   *
+   * @platform android
+   */
+  flat?: boolean;
+
+  /**
+   * 层级
+   */
+  zIndex?: Float;
+
+  /**
+   * 覆盖物锚点比例
+   *
+   * @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;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (DirectEventHandler<voidEvent>);
+
+  /**
+   * 拖放开始事件
+   */
+  onDragStart?: (DirectEventHandler<voidEvent>);
+
+  /**
+   * 拖放进行事件，类似于 mousemove，在结束之前会不断调用
+   */
+  onDrag?: (DirectEventHandler<voidEvent>);
+
+  /**
+   * 拖放结束事件
+   */
+  onDragEnd?: (DirectEventHandler<LatLng>);
+}
+
+export default codegenNativeComponent<MarkerProps>("AMapMarker") as HostComponent<MarkerProps>; 

package/lib/src/multi-point.tsx

@@ -0,0 +1,17 @@
+
+import AMapMultiPoint ,{MultiPointProps} from './multi-pointNativeComponent'
+import React , {Component}  from 'react';
+
+
+export default class MultiPoint extends Component<MultiPointProps> {
+ 
+  constructor(props: MultiPointProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AMapMultiPoint {...this.props} />
+    );
+  }
+}

package/lib/src/multi-pointNativeComponent.ts

@@ -0,0 +1,51 @@
+import * as React from "react";
+// @ts-ignore
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float ,Int32, DirectEventHandler} from "react-native/Libraries/Types/CodegenTypes";
+
+type LatLng = Readonly<{
+    latitude: Float;
+    longitude: Float;
+}>
+
+type ImageSourcePropType = Readonly<{
+    uri: string;
+    width?: Float;
+    height?: Float;
+    scale?: Float;
+    method?: string;
+    body?: string;
+    //cache?: string;
+    bundle?: string;
+    //headers?: object;
+}>
+
+type onPressEvent = Readonly<{
+    index: Int32;
+}>
+
+
+export interface MultiPointProps extends ViewProps{
+  /**
+   * 坐标点集合
+   */
+  items?: LatLng[];
+
+  /**
+   * 图标
+   */
+  icon?: ImageSourcePropType;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (DirectEventHandler<onPressEvent>);
+}
+
+
+export default codegenNativeComponent<MultiPointProps>("AMapMultiPoint") as HostComponent<MultiPointProps>; 

package/lib/src/polygon.tsx

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

package/lib/src/polygonNativeComponent.ts

@@ -0,0 +1,42 @@
+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 PolygonProps extends ViewProps {
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 边线宽度
+   */
+  strokeWidth?: Float;
+
+  /**
+   * 边线颜色
+   */
+  strokeColor?: string;
+
+  /**
+   * 填充颜色
+   */
+  fillColor?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: Int32;
+}
+
+export default codegenNativeComponent<PolygonProps>("AMapPolygon")as HostComponent<PolygonProps>; 

package/lib/src/polyline.tsx

@@ -0,0 +1,21 @@
+import AMapPolyline ,{PolylineProps,voidEvent} from './polylineNativeComponent'
+import React , {Component}  from 'react';
+import type * as ReactNative from "react-native";
+
+export default class Polyline extends Component<PolylineProps> {
+ 
+  constructor(props: PolylineProps) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <AMapPolyline {...this.props} 
+      onPress={(event: ReactNative.NativeSyntheticEvent<voidEvent>) => {
+        console.info("AMapViewEventType map3d polyline onPress-----------")
+        this.props.onPress?.call(this, event);
+      }}
+      />
+    );
+  }
+}

package/lib/src/polylineNativeComponent.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { ColorValue } from "react-native";
+
+import {
+    HostComponent,
+    ViewProps,
+} from "react-native";
+
+import codegenNativeComponent from "react-native/Libraries/Utilities/codegenNativeComponent"
+import { Float , Int32,DirectEventHandler} from "react-native/Libraries/Types/CodegenTypes";
+
+type LatLng = Readonly<{
+    latitude: Float;
+    longitude: Float;
+}>
+
+export type voidEvent = Readonly<{}>
+
+export interface PolylineProps extends ViewProps{
+  /**
+   * 节点坐标
+   */
+  points: LatLng[];
+
+  /**
+   * 线段宽度
+   */
+  width?: Float;
+
+  /**
+   * 线段颜色
+   */
+  color?: string;
+
+  /**
+   * 层级
+   */
+  zIndex?: Int32;
+
+  /**
+   * 多段颜色
+   */
+  colors?: string[];
+
+  /**
+   * 是否使用颜色渐变
+   */
+  gradient?: boolean;
+
+  /**
+   * 是否绘制大地线
+   */
+  geodesic?: boolean;
+
+  /**
+   * 是否绘制虚线
+   */
+  dotted?: boolean;
+
+  /**
+   * 点击事件
+   */
+  onPress?: (DirectEventHandler<voidEvent>) ;
+}
+
+
+export default codegenNativeComponent<PolylineProps>("AMapPolyline") as HostComponent<PolylineProps>; 

package/lib/src/types.ts

@@ -0,0 +1,34 @@
+/**
+ * 地图类型
+ */
+export enum MapType {
+  /**
+   * 普通地图
+   */
+  Standard = 1,
+
+  /**
+   * 卫星地图
+   */
+  Satellite,
+
+  /**
+   * 夜间地图
+   */
+  Night,
+
+  /**
+   * 导航地图
+   */
+  Navi,
+
+  /**
+   * 公交地图
+   */
+  Bus,
+  
+  /**
+   * 夜间导航地图
+   */
+  NaviNight
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@react-native-ohos/react-native-amap3d",
+  "version": "3.2.5-rc.1",
+  "description": "react-native 高德地图组件，支持 harmonyOS",
+  "license": "MIT",
+  "keywords": [
+    "react-native",
+    "amap",
+    "maps",
+    "mapview"
+  ],
+  "main": "lib/src",
+  "files": [
+    "lib/src",
+    "react-native.config.js",
+    "react-native-amap3d.podspec",
+    "harmony"
+  ],
+  "homepage": "https://github.com/react-native-oh-library/react-native-amap3d",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/react-native-oh-library/react-native-amap3d"
+  },
+  "scripts": {
+    "start": "react-native start",
+    "reload": "adb reverse tcp:8081 tcp:8081 && adb shell input text rr"
+  },
+  "harmony": {
+    "alias": "react-native-amap3d"
+  },
+  "dependencies": {
+    "supercluster": "^7.1.4",
+    "react-native-amap3d": "3.2.4"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@react-native-picker/picker": "^2.4.8",
+    "@react-navigation/native": "^6.1.3",
+    "@react-navigation/native-stack": "^6.9.9",
+    "@types/react-native": "^0.71.2",
+    "@types/supercluster": "^7.1.0",
+    "react": "18.2.0",
+    "react-native": "^0.71.2",
+    "react-native-safe-area-context": "^4.5.0",
+    "react-native-screens": "^3.19.0"
+  },
+  "prettier": {
+    "printWidth": 100
+  }
+}

package/react-native.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      ios: { project: "lib/ios/react-native-amap3d.podspec" },
+      android: { sourceDir: "lib/android" },
+    },
+  },
+  dependencies: {
+    "react-native-amap3d": {
+      root: __dirname,
+      platforms: {
+        android: {
+          sourceDir: __dirname + "/lib/android",
+          packageImportPath: "import qiuxiang.amap3d.AMap3DPackage;",
+          packageInstance: "new AMap3DPackage()",
+        },
+      },
+    },
+  },
+};