feat(loca): add PulseLinkLayer

packages/amap-loca/src/PulseLinkLayer/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 { PulseLinkLayerProps } from './types';
+
+export const PulseLinkLayer = forwardRef<Loca.PulseLinkLayer, React.PropsWithChildren<PulseLinkLayerProps>>((
+  props = {},
+  ref
+) => {
+  const ins = useRef<Loca.PulseLinkLayer>();
+
+  const { onInstanceCreated } = usePropsReactive(
+    props,
+    ins,
+    {
+      setterMap,
+      converterMap
+    }
+  );
+
+  useEffect(() => {
+    const options = buildCreateOptions<PulseLinkLayerProps, Loca.PulseLinkLayer.Options>(
+      props,
+      allProps,
+      converterMap,
+    );
+
+    ins.current = new window.Loca.PulseLinkLayer(options);
+
+    onInstanceCreated?.(ins.current);
+  }, [])
+
+  useImperativeHandle(
+    ref,
+    () => ins.current,
+    [ins.current]
+  );
+
+  return null;
+})

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

@@ -0,0 +1,25 @@
+export const configurableProps = [
+  /** 动态属性 */
+  'loca',
+  'zIndex',
+  'zooms',
+  'opacity',
+]
+
+export const allProps = configurableProps.concat([
+  'visible',
+]);
+
+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/PulseLinkLayer/demo/demo01.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import { Map } from '@pansy/react-amap';
+import { Button } from 'antd';
+import { Loca, useLoca, ScatterLayer, PulseLinkLayer } from '@pansy/react-amap-loca';
+
+const Demo = () => {
+  const { loca } = useLoca();
+  const [visible, setVisible] = useState(true)
+  const [scatter, setScatter] = useState<Loca.ScatterLayer>();
+  const [pulseLink, setPulseLink] = useState<Loca.PulseLinkLayer>();
+
+  useEffect(() => {
+    if (scatter && loca && pulseLink) {
+      const pointGeo = new window.Loca.GeoJSONSource({
+        url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json',
+      });
+      scatter.setSource(pointGeo);
+
+      scatter.setStyle({
+        unit: 'meter',
+        size: [200000, 200000],
+        borderWidth: 0,
+        texture: 'https://a.amap.com/Loca/static/static/green.png',
+        duration: 2000,
+        animate: true,
+      });
+
+      loca.add(scatter);
+
+      const geo = new window.Loca.GeoJSONSource({
+        url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/data-line-out.json',
+      });
+      pulseLink.setSource(geo);
+      pulseLink.setStyle({
+        unit: 'meter',
+        dash: [40000, 0, 40000, 0],
+        lineWidth: () => {
+          return [8000, 8000];
+        },
+        height: (_, feat) => {
+          return feat.distance / 3 + 10;
+        },
+        smoothSteps: 30,
+        speed: () => {
+          return 1000 + Math.random() * 100000;
+        },
+        flowLength: 100000,
+        lineColors: () => {
+          return ['rgba(44, 119, 248, 0.9)', 'rgba(44, 119, 248, 0.5)', 'rgba(44, 119, 248, 0.2)'];
+        },
+        maxHeightScale: 0.3,
+        headColor: 'rgb(3, 214, 252)',
+        trailColor: 'rgba(255, 255,0,0)',
+      });
+
+      loca.add(pulseLink);
+      loca.animate.start();
+    }
+  }, [scatter, pulseLink, loca])
+
+  return (
+    <>
+      <Button onClick={() => { setVisible((val) => !val) }}>切换显隐</Button>
+      <ScatterLayer
+        zIndex={10}
+        opacity={0.6}
+        visible={visible}
+        zooms={[2, 22]}
+        events={{
+          created: (instance) => {
+            setScatter(instance);
+          }
+        }}
+      />
+
+      <ScatterLayer
+        zIndex={10}
+        opacity={0.6}
+        visible={visible}
+        zooms={[2, 22]}
+        events={{
+          created: (instance) => {
+            setScatter(instance);
+          }
+        }}
+      />
+
+      <PulseLinkLayer
+        zIndex={10}
+        opacity={1}
+        visible={visible}
+        zooms={[2, 22]}
+        depth
+        events={{
+          created: (instance) => {
+            setPulseLink(instance);
+          }
+        }}
+      />
+    </>
+  )
+}
+export default () => {
+  return (
+    <div style={{ height: 500 }}>
+      <Map
+        Loca={{}}
+        viewMode="3D"
+        pitch={35}
+        center={[104.780269, 34.955403]}
+        zoom={5}
+        mapStyle="amap://styles/grey"
+      >
+        <Loca>
+          <Demo />
+        </Loca>
+      </Map>
+    </div>
+  );
+};
+

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

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

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

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

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

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

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

@@ -10,15 +10,15 @@ export const configurableProps = [
 export const allProps = configurableProps.concat([]);
 
 export const setterMap = {
-  // visible(val: boolean, instance: Loca.ScatterLayer) {
-  //   if (instance) {
-  //     if (val) {
-  //       instance.show()
-  //     } else {
-  //       instance.hide()
-  //     }
-  //   }
-  // },
+  visible(val: boolean, instance: Loca.ScatterLayer) {
+    if (instance) {
+      if (val) {
+        instance.show()
+      } else {
+        instance.hide()
+      }
+    }
+  },
 };
 
 export const converterMap = {}

packages/amap-loca/src/index.ts

@@ -1,2 +1,6 @@
 export { Loca, useLoca } from './Loca';
 export { ScatterLayer } from './ScatterLayer';
+export type { ScatterLayerProps } from './ScatterLayer';
+
+export { PulseLinkLayer } from './PulseLinkLayer';
+export type { PulseLinkLayerProps } from './PulseLinkLayer';

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

@@ -9,6 +9,7 @@ declare namespace Loca {
     }
 
     interface Style {
+      unit: string;
       /**
        * 链接线颜色数组。
        * 类型为String时代表单根线的颜色，支持16进制，rgb，rgba和"red"，"blue"等color keywords；
@@ -21,17 +22,27 @@ declare namespace Loca {
        * 高度，单位为米，代表弧顶的高度。
        * 类型为Function时，返回每根线的高度。参数为(index,item)，item中有distance属性，代表两点间的距离（米），可以用该属性处理高度。
        */
-      height?: number;
+      height?: number | ((index: number, item: any) => number);
 
       /**
        * 平滑步数，代表弧线的分隔段数，越大平滑度越好，但更消耗性能，默认为50。
        */
       smoothSteps?: number;
 
+      speed: (index: number, item: any) => number;
+
+      flowLength: number;
+
+      maxHeightScale: number;
+
+      headColor: string;
+
+      trailColor: string;
+
       /**
        * 连接线的头尾宽度设置：[起点宽度，终点宽度];
        */
-      lineWidth?: number;
+      lineWidth?: number | (() => [number, number]);
 
       /**
        * 连接线的虚线配置信息：[实线长度, 虚线长度, 实线长度, 虚线长度];