react-native-cn-maps 0.1.0

package/src/MapView.tsx

@@ -0,0 +1,201 @@
+import React from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import NativeMapView, { Commands } from './MapViewNativeComponent';
+import {
+  fromProviderCoordinate,
+  fromProviderRegion,
+  toProviderCoordinate,
+  toProviderRegion,
+} from './coordinate';
+import type {
+  NativeMarker,
+  NativeMarkerPressEvent,
+  NativeRegionChangeEvent,
+} from './MapViewNativeComponent';
+import type {
+  CoordinateSystem,
+  MapProvider,
+  MapViewHandle,
+  MapViewProps,
+  MarkerPressEvent,
+  MarkerProps,
+  RegionChangeEvent,
+} from './types';
+
+const SUPPORTED_PROVIDER: MapProvider = 'amap';
+const DEFAULT_COORDINATE_SYSTEM: CoordinateSystem = 'gcj02';
+
+function isMarkerElement(
+  child: React.ReactNode
+): child is React.ReactElement<MarkerProps> {
+  return (
+    React.isValidElement(child) &&
+    Boolean((child.type as { __MAP_MARKER?: boolean }).__MAP_MARKER)
+  );
+}
+
+function markerColorToString(color: MarkerProps['pinColor']) {
+  if (typeof color === 'string') {
+    return color;
+  }
+
+  return undefined;
+}
+
+export const MapView = React.forwardRef<MapViewHandle, MapViewProps>(
+  function MapView(
+    {
+      provider = SUPPORTED_PROVIDER,
+      coordinateSystem = DEFAULT_COORDINATE_SYSTEM,
+      initialRegion,
+      region,
+      children,
+      onRegionChange,
+      onRegionChangeComplete,
+      ...rest
+    },
+    ref
+  ) {
+    const nativeRef =
+      React.useRef<React.ElementRef<typeof NativeMapView>>(null);
+    const markerHandlers = React.useRef<Record<string, MarkerProps['onPress']>>(
+      {}
+    );
+
+    if (__DEV__ && provider !== SUPPORTED_PROVIDER) {
+      console.warn(
+        `[react-native-cn-maps] provider="${provider}" is reserved but not implemented yet. Falling back to "amap".`
+      );
+    }
+
+    const markers = React.useMemo(() => {
+      const nextHandlers: Record<string, MarkerProps['onPress']> = {};
+      const nativeMarkers: NativeMarker[] = [];
+
+      React.Children.forEach(children, (child, index) => {
+        if (!isMarkerElement(child)) {
+          if (__DEV__ && child != null) {
+            console.warn(
+              '[react-native-cn-maps] Only <Marker /> children are rendered in the current MapView milestone.'
+            );
+          }
+          return;
+        }
+
+        const identifier = child.props.identifier ?? String(index);
+        const coordinate = toProviderCoordinate(
+          child.props.coordinate,
+          coordinateSystem
+        );
+
+        if (child.props.onPress) {
+          nextHandlers[identifier] = child.props.onPress;
+        }
+
+        nativeMarkers.push({
+          identifier,
+          latitude: coordinate.latitude,
+          longitude: coordinate.longitude,
+          title: child.props.title,
+          description: child.props.description,
+          pinColor: markerColorToString(child.props.pinColor),
+          draggable: child.props.draggable,
+        });
+      });
+
+      markerHandlers.current = nextHandlers;
+      return nativeMarkers;
+    }, [children, coordinateSystem]);
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        animateToRegion(nextRegion, duration = 500) {
+          const providerRegion = toProviderRegion(nextRegion, coordinateSystem);
+
+          if (providerRegion && nativeRef.current) {
+            Commands.animateToRegion(
+              nativeRef.current,
+              providerRegion.latitude,
+              providerRegion.longitude,
+              providerRegion.latitudeDelta,
+              providerRegion.longitudeDelta,
+              duration
+            );
+          }
+        },
+      }),
+      [coordinateSystem]
+    );
+
+    const handleRegionChange = React.useCallback(
+      (event: NativeSyntheticEvent<NativeRegionChangeEvent>) => {
+        onRegionChange?.({
+          nativeEvent: {
+            ...event.nativeEvent,
+            region: fromProviderRegion(
+              event.nativeEvent.region,
+              coordinateSystem
+            ),
+          },
+        } satisfies RegionChangeEvent);
+      },
+      [coordinateSystem, onRegionChange]
+    );
+
+    const handleRegionChangeComplete = React.useCallback(
+      (event: NativeSyntheticEvent<NativeRegionChangeEvent>) => {
+        onRegionChangeComplete?.({
+          nativeEvent: {
+            ...event.nativeEvent,
+            region: fromProviderRegion(
+              event.nativeEvent.region,
+              coordinateSystem
+            ),
+          },
+        } satisfies RegionChangeEvent);
+      },
+      [coordinateSystem, onRegionChangeComplete]
+    );
+
+    const handleMarkerPress = React.useCallback(
+      (event: NativeSyntheticEvent<NativeMarkerPressEvent>) => {
+        const handler = markerHandlers.current[event.nativeEvent.identifier];
+
+        if (!handler) {
+          return;
+        }
+
+        const coordinate = fromProviderCoordinate(
+          event.nativeEvent.coordinate,
+          coordinateSystem
+        );
+
+        handler({
+          nativeEvent: {
+            identifier: event.nativeEvent.identifier,
+            coordinate,
+          },
+        } satisfies MarkerPressEvent);
+      },
+      [coordinateSystem]
+    );
+
+    return (
+      <NativeMapView
+        {...rest}
+        ref={nativeRef}
+        provider={SUPPORTED_PROVIDER}
+        coordinateSystem={coordinateSystem}
+        initialRegion={toProviderRegion(initialRegion, coordinateSystem)}
+        region={toProviderRegion(region, coordinateSystem)}
+        markers={markers}
+        onRegionChange={onRegionChange ? handleRegionChange : undefined}
+        onRegionChangeComplete={
+          onRegionChangeComplete ? handleRegionChangeComplete : undefined
+        }
+        onMarkerPress={handleMarkerPress}
+      />
+    );
+  }
+);

package/src/MapViewNativeComponent.ts

@@ -0,0 +1,79 @@
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type CodegenTypes,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+
+export type NativeRegion = Readonly<{
+  latitude: CodegenTypes.Double;
+  longitude: CodegenTypes.Double;
+  latitudeDelta: CodegenTypes.Double;
+  longitudeDelta: CodegenTypes.Double;
+}>;
+
+export type NativeMarker = Readonly<{
+  identifier: string;
+  latitude: CodegenTypes.Double;
+  longitude: CodegenTypes.Double;
+  title?: string;
+  description?: string;
+  pinColor?: string;
+  draggable?: CodegenTypes.WithDefault<boolean, false>;
+}>;
+
+export type NativeRegionChangeEvent = Readonly<{
+  region: Readonly<{
+    latitude: CodegenTypes.Double;
+    longitude: CodegenTypes.Double;
+    latitudeDelta: CodegenTypes.Double;
+    longitudeDelta: CodegenTypes.Double;
+  }>;
+  isGesture?: boolean;
+}>;
+
+export type NativeMarkerPressEvent = Readonly<{
+  identifier: string;
+  coordinate: Readonly<{
+    latitude: CodegenTypes.Double;
+    longitude: CodegenTypes.Double;
+  }>;
+}>;
+
+export interface NativeProps extends ViewProps {
+  provider?: CodegenTypes.WithDefault<string, 'amap'>;
+  coordinateSystem?: CodegenTypes.WithDefault<string, 'gcj02'>;
+  initialRegion?: NativeRegion;
+  region?: NativeRegion;
+  markers?: ReadonlyArray<NativeMarker>;
+  showsUserLocation?: CodegenTypes.WithDefault<boolean, false>;
+  zoomEnabled?: CodegenTypes.WithDefault<boolean, true>;
+  scrollEnabled?: CodegenTypes.WithDefault<boolean, true>;
+  rotateEnabled?: CodegenTypes.WithDefault<boolean, true>;
+  pitchEnabled?: CodegenTypes.WithDefault<boolean, true>;
+  onRegionChange?: CodegenTypes.DirectEventHandler<NativeRegionChangeEvent>;
+  onRegionChangeComplete?: CodegenTypes.DirectEventHandler<NativeRegionChangeEvent>;
+  onMarkerPress?: CodegenTypes.DirectEventHandler<NativeMarkerPressEvent>;
+}
+
+type ComponentType = HostComponent<NativeProps>;
+
+interface NativeCommands {
+  animateToRegion: (
+    viewRef: React.ElementRef<ComponentType>,
+    latitude: CodegenTypes.Double,
+    longitude: CodegenTypes.Double,
+    latitudeDelta: CodegenTypes.Double,
+    longitudeDelta: CodegenTypes.Double,
+    duration: CodegenTypes.Int32
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['animateToRegion'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'RNMapsMapView'
+) as ComponentType;

package/src/coordinate.ts

@@ -0,0 +1,123 @@
+import type { CoordinateSystem, LatLng, Region } from './types';
+
+const A = 6378245.0;
+const EE = 0.00669342162296594323;
+const PI = Math.PI;
+
+function isOutsideChina(latitude: number, longitude: number) {
+  return (
+    longitude < 72.004 ||
+    longitude > 137.8347 ||
+    latitude < 0.8293 ||
+    latitude > 55.8271
+  );
+}
+
+function transformLatitude(x: number, y: number) {
+  let ret =
+    -100.0 +
+    2.0 * x +
+    3.0 * y +
+    0.2 * y * y +
+    0.1 * x * y +
+    0.2 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(y * PI) + 40.0 * Math.sin((y / 3.0) * PI)) * 2.0) / 3.0;
+  ret +=
+    ((160.0 * Math.sin((y / 12.0) * PI) + 320 * Math.sin((y * PI) / 30.0)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+function transformLongitude(x: number, y: number) {
+  let ret =
+    300.0 +
+    x +
+    2.0 * y +
+    0.1 * x * x +
+    0.1 * x * y +
+    0.1 * Math.sqrt(Math.abs(x));
+  ret +=
+    ((20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0) /
+    3.0;
+  ret +=
+    ((20.0 * Math.sin(x * PI) + 40.0 * Math.sin((x / 3.0) * PI)) * 2.0) / 3.0;
+  ret +=
+    ((150.0 * Math.sin((x / 12.0) * PI) + 300.0 * Math.sin((x / 30.0) * PI)) *
+      2.0) /
+    3.0;
+  return ret;
+}
+
+export function wgs84ToGcj02(coordinate: LatLng): LatLng {
+  const { latitude, longitude } = coordinate;
+
+  if (isOutsideChina(latitude, longitude)) {
+    return coordinate;
+  }
+
+  let dLat = transformLatitude(longitude - 105.0, latitude - 35.0);
+  let dLon = transformLongitude(longitude - 105.0, latitude - 35.0);
+  const radLat = (latitude / 180.0) * PI;
+  let magic = Math.sin(radLat);
+  magic = 1 - EE * magic * magic;
+  const sqrtMagic = Math.sqrt(magic);
+  dLat = (dLat * 180.0) / (((A * (1 - EE)) / (magic * sqrtMagic)) * PI);
+  dLon = (dLon * 180.0) / ((A / sqrtMagic) * Math.cos(radLat) * PI);
+
+  return {
+    latitude: latitude + dLat,
+    longitude: longitude + dLon,
+  };
+}
+
+export function gcj02ToWgs84(coordinate: LatLng): LatLng {
+  const converted = wgs84ToGcj02(coordinate);
+
+  return {
+    latitude: coordinate.latitude * 2 - converted.latitude,
+    longitude: coordinate.longitude * 2 - converted.longitude,
+  };
+}
+
+export function toProviderCoordinate(
+  coordinate: LatLng,
+  coordinateSystem: CoordinateSystem
+): LatLng {
+  return coordinateSystem === 'wgs84' ? wgs84ToGcj02(coordinate) : coordinate;
+}
+
+export function fromProviderCoordinate(
+  coordinate: LatLng,
+  coordinateSystem: CoordinateSystem
+): LatLng {
+  return coordinateSystem === 'wgs84' ? gcj02ToWgs84(coordinate) : coordinate;
+}
+
+export function toProviderRegion(
+  region: Region | undefined,
+  coordinateSystem: CoordinateSystem
+): Region | undefined {
+  if (!region) {
+    return undefined;
+  }
+
+  return {
+    ...region,
+    ...toProviderCoordinate(region, coordinateSystem),
+  };
+}
+
+export function fromProviderRegion(
+  region: Region,
+  coordinateSystem: CoordinateSystem
+): Region {
+  return {
+    ...region,
+    ...fromProviderCoordinate(region, coordinateSystem),
+  };
+}

package/src/index.tsx

@@ -0,0 +1,15 @@
+export { MapView as default, MapView } from './MapView';
+export { default as Marker, Marker as MapMarker } from './MapMarker';
+export type { MapMarkerProps } from './MapMarker';
+export type {
+  CoordinateSystem,
+  LatLng,
+  MapEvent,
+  MapProvider,
+  MapViewHandle,
+  MapViewProps,
+  MarkerPressEvent,
+  MarkerProps,
+  Region,
+  RegionChangeEvent,
+} from './types';

package/src/types.ts

@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react';
+import type { ColorValue, ViewProps } from 'react-native';
+
+export type MapProvider = 'amap' | 'baidu' | 'tencent';
+
+export type CoordinateSystem = 'gcj02' | 'wgs84';
+
+export type LatLng = {
+  latitude: number;
+  longitude: number;
+};
+
+export type Region = LatLng & {
+  latitudeDelta: number;
+  longitudeDelta: number;
+};
+
+export type MapEvent<T = Record<string, unknown>> = {
+  nativeEvent: T;
+};
+
+export type RegionChangeEvent = MapEvent<{
+  region: Region;
+  isGesture?: boolean;
+}>;
+
+export type MarkerPressEvent = MapEvent<{
+  coordinate: LatLng;
+  identifier: string;
+}>;
+
+export type MapViewProps = ViewProps & {
+  provider?: MapProvider;
+  coordinateSystem?: CoordinateSystem;
+  initialRegion?: Region;
+  region?: Region;
+  showsUserLocation?: boolean;
+  zoomEnabled?: boolean;
+  scrollEnabled?: boolean;
+  rotateEnabled?: boolean;
+  pitchEnabled?: boolean;
+  children?: ReactNode;
+  onRegionChange?: (event: RegionChangeEvent) => void;
+  onRegionChangeComplete?: (event: RegionChangeEvent) => void;
+};
+
+export type MarkerProps = ViewProps & {
+  coordinate: LatLng;
+  identifier?: string;
+  title?: string;
+  description?: string;
+  pinColor?: ColorValue;
+  draggable?: boolean;
+  onPress?: (event: MarkerPressEvent) => void;
+};
+
+export type MapViewHandle = {
+  animateToRegion: (region: Region, duration?: number) => void;
+};