feat(react-amap-loca): add useLoca、Loca、ScatterLayer

.dumirc.ts

@@ -20,16 +20,19 @@ export default defineConfig({
     ],
   },
   alias: {
-    '@pansy/react-amap': join(__dirname, 'packages/amap/src'),
-    '@pansy/react-amap-ui': join(__dirname, 'packages/amap-ui/src'),
-    '@pansy/react-amap-core': join(__dirname, 'packages/core/src'),
-    '@pansy/amap-api-loader': join(__dirname, 'packages/api-loader/src'),
+    // '@pansy/react-amap': join(__dirname, 'packages/amap/src'),
+    // '@pansy/react-amap/es': join(__dirname, 'packages/amap/src'),
+    // '@pansy/react-amap-ui': join(__dirname, 'packages/amap-ui/src'),
+    '@pansy/react-amap-loca': join(__dirname, 'packages/amap-loca/src'),
+    // '@pansy/react-amap-core': join(__dirname, 'packages/core/src'),
+    // '@pansy/amap-api-loader': join(__dirname, 'packages/api-loader/src'),
   },
   resolve: {
     docDirs: ['docs'],
     atomDirs: [
       { type: 'component', dir: 'packages/amap/src' },
-      { type: 'component', dir: 'packages/amap-ui/src' }
+      { type: 'component', dir: 'packages/amap-ui/src' },
+      { type: 'component', dir: 'packages/amap-loca/src' }
     ],
     codeBlockMode: 'passive',
   },

package.json

@@ -1,9 +1,4 @@
 {
-  "name": "@pansy/workspace",
-  "private": true,
-  "repository": "[email protected]:pansyjs/react-amap.git",
-  "author": "wangxingkang <[email protected]>",
-  "license": "MIT",
   "scripts": {
     "start": "dumi dev",
     "build": "pnpm -r --filter @pansy/* run build",
@@ -19,6 +14,7 @@
     "@pansy/amap-types": "workspace:*",
     "@pansy/react-amap": "workspace:*",
     "@pansy/react-amap-ui": "workspace:*",
+    "@pansy/react-amap-loca": "workspace:*",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@walrus/cli": "1.3.4",

packages/amap-loca/.redbudrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'redbud';
+
+export default defineConfig({
+  extends: '../../.redbudrc.base.ts'
+});

packages/amap-loca/README.md

@@ -0,0 +1 @@
+# react-amap-loca

packages/amap-loca/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@pansy/react-amap-loca",
+  "version": "0.0.0",
+  "files": [
+    "es",
+    "lib"
+  ],
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
+  "scripts": {
+    "build": "redbud build"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "peerDependencies": {
+    "@pansy/react-amap": "^2"
+  },
+  "dependencies": {
+    "@pansy/amap-types": "^2.17.3",
+    "@pansy/react-amap-core": "^1.3.8"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  }
+}

packages/amap-loca/src/Loca/Loca.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect, useRef } from 'react';
+import { useMap } from '@pansy/react-amap';
+
+interface BaseLocaProps {
+  onCreate?: (loca: Loca.Container) => void;
+  children?: React.ReactNode;
+}
+
+export const BaseLoca: React.FC<BaseLocaProps> = (
+  props = {},
+) => {
+  const { onCreate } = props;
+  const { map } = useMap();
+  const locaIns = useRef<Loca.Container>();
+
+  useEffect(() => {
+    if (map) {
+      locaIns.current = new window.Loca.Container({
+        map,
+      });
+      onCreate?.(locaIns.current)
+    }
+  }, [map])
+
+  return (
+    <>{props.children}</>
+  );
+}

packages/amap-loca/src/Loca/context.ts

@@ -0,0 +1,11 @@
+import { useContext, createContext }  from 'react';
+
+export interface LocaContextProps {
+  loca: Loca.Container;
+}
+
+export const LocaContext = createContext<LocaContextProps>({} as LocaContextProps);
+
+export const useLoca = () => {
+  return useContext(LocaContext);
+};

packages/amap-loca/src/Loca/index.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useImperativeHandle, forwardRef } from 'react';
+import { BaseLoca } from './Loca';
+import { LocaContext } from './context';
+
+export const Loca = forwardRef<Loca.Container, React.PropsWithChildren<{}>>((props, ref) => {
+  const [loca, setLoca] = useState<Loca.Container>();
+
+  useImperativeHandle(
+    ref,
+    () => loca,
+    [loca]
+  );
+
+  return (
+    <LocaContext.Provider
+      value={{
+        loca,
+      }}
+    >
+      <BaseLoca
+        {...props}
+        onCreate={(ins) => {
+          setLoca(ins);
+        }}
+      />
+    </LocaContext.Provider>
+  )
+})
+
+export { useLoca } from './context';

packages/amap-loca/src/ScatterLayer/ScatterLayer.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef, useEffect, useRef, useImperativeHandle } from 'react';
+import { buildCreateOptions } from '@pansy/react-amap/es/utils/control';
+import { usePropsReactive } from '@pansy/react-amap-core';
+import { allProps, converterMap, setterMap } from './config';
+
+import type { ScatterLayerProps } from './types';
+
+export const ScatterLayer = forwardRef<Loca.ScatterLayer, React.PropsWithChildren<ScatterLayerProps>>((
+  props = {},
+  ref
+) => {
+  const ins = useRef<Loca.ScatterLayer>();
+
+  const { onInstanceCreated } = usePropsReactive(
+    props,
+    ins,
+    {
+      setterMap,
+      converterMap
+    }
+  );
+
+  useEffect(() => {
+    const options = buildCreateOptions<ScatterLayerProps, Loca.ScatterLayer.Options>(
+      props,
+      allProps,
+      converterMap,
+    );
+
+    ins.current = new window.Loca.ScatterLayer(options);
+
+    onInstanceCreated?.(ins.current);
+  }, [])
+
+  useImperativeHandle(
+    ref,
+    () => ins.current,
+    [ins.current]
+  );
+
+  return null;
+})

packages/amap-loca/src/ScatterLayer/config.ts

@@ -0,0 +1,24 @@
+export const configurableProps = [
+  /** 动态属性 */
+  'loca',
+  'zIndex',
+  'visible',
+  'zooms',
+  'opacity',
+]
+
+export const allProps = configurableProps.concat([]);
+
+export const setterMap = {
+  // visible(val: boolean, instance: Loca.ScatterLayer) {
+  //   if (instance) {
+  //     if (val) {
+  //       instance.show()
+  //     } else {
+  //       instance.hide()
+  //     }
+  //   }
+  // },
+};
+
+export const converterMap = {}

packages/amap-loca/src/ScatterLayer/demo/demo01.tsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { Map } from '@pansy/react-amap';
+import { Loca, useLoca, ScatterLayer } from '@pansy/react-amap-loca';
+
+const Scatter = () => {
+  const { loca } = useLoca();
+  const [scatter, setScatter] = useState<Loca.ScatterLayer>();
+
+  useEffect(() => {
+    if (scatter && loca) {
+      const geo = new window.Loca.GeoJSONSource({
+        url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/sz_road_F.json',
+      });
+      scatter.setSource(geo);
+
+      scatter.setStyle({
+        unit: 'meter',
+        size: [2600, 2600],
+        borderWidth: 0,
+        texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
+        duration: 2000,
+        animate: true,
+      });
+
+      loca.add(scatter);
+      loca.animate.start();
+    }
+  }, [scatter, loca])
+
+  return (
+    <ScatterLayer
+      zIndex={111}
+      opacity={1}
+      visible={true}
+      zooms={[2, 22]}
+      events={{
+        created: (instance) => {
+          setScatter(instance);
+        }
+      }}
+    />
+  )
+}
+
+export default () => {
+  return (
+    <div style={{ height: 500 }}>
+      <Map
+        zoom={11.7}
+        Loca={{}}
+        center={[113.97199630737305, 22.5807295363949]}
+        pitch={40}
+        mapStyle="amap://styles/grey"
+        viewMode="3D"
+      >
+        <Loca>
+          <Scatter />
+        </Loca>
+      </Map>
+    </div>
+  );
+};
+

packages/amap-loca/src/ScatterLayer/index.md

@@ -0,0 +1,21 @@
+---
+title: ScatterLayer
+nav:
+  title: 组件
+  path: /components
+order: 1
+group:
+  path: /loca
+  title: Loca
+  order: 1500
+---
+
+# ScatterLayer 动画图层
+
+大地面上的点，可展示三种类型：颜色圆、图标、动画图标
+
+## 代码示例
+
+### 闪烁效果
+
+<code src="./demo/demo01.tsx"></code>

packages/amap-loca/src/ScatterLayer/index.tsx

@@ -0,0 +1,2 @@
+export { ScatterLayer } from './ScatterLayer';
+export type { ScatterLayerProps } from './types';

packages/amap-loca/src/ScatterLayer/types.ts

@@ -0,0 +1,9 @@
+export interface EventMap {
+  /** 创建事件 */
+  created?: (instance: Loca.ScatterLayer) => void;
+}
+
+export interface ScatterLayerProps extends Omit<Loca.ScatterLayer.Options, 'renderOptions'> {
+  /** 绑定事件 */
+  events?: EventMap;
+}

packages/amap-loca/src/index.ts

@@ -0,0 +1,2 @@
+export { Loca, useLoca } from './Loca';
+export { ScatterLayer } from './ScatterLayer';

packages/amap/src/map/context.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import { useContext, createContext }  from 'react';
 
 export interface MapContextProps {
   map: AMap.Map;
   AMap: typeof AMap;
 }
 
-export const MapContext = React.createContext<MapContextProps>({} as MapContextProps);
+export const MapContext = createContext<MapContextProps>({} as MapContextProps);
 
 export const useMap = () => {
-  return React.useContext(MapContext);
+  return useContext(MapContext);
 };

packages/types/loca/core/Container.d.ts

@@ -49,7 +49,7 @@ declare namespace Loca {
      */
     static pointLight: Container.Light;
 
-    static animate: {
+    animate: {
       /**
        * 开启动画
        */

packages/types/loca/layer/Layer.d.ts

@@ -97,14 +97,14 @@ declare namespace Loca {
      * @param duration 淡入效果，单位毫秒。
      * @param callback  完全显示之后执行的回调函数
      */
-    show(duration: number, callback: () => void): void;
+    show(duration?: number, callback?: () => void): void;
 
     /**
      * 设置图层的 visible 为 false，图层不可见。
      * @param duration 淡出效果，单位毫秒。
      * @param callback  完全隐藏之后执行的回调函数
      */
-    hide(duration: number, callback: () => void): void;
+    hide(duration?: number, callback?: () => void): void;
 
     /**
      * 从地图上移除图层