feat: 添加客流图层 (#176)

Co-authored-by: yzg1025 <yzg17803834564>
Co-authored-by: websybin <[email protected]>
Co-authored-by: yanxiong <[email protected]>
Co-authored-by: [email protected] <[email protected]>

.gitignore

@@ -31,3 +31,4 @@ yarn.lock
 .umi-production
 .umi-test
 .env.local
+.vscode

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/larkmap",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "description": "A React toolkit for geospatial visualization based on L7",
   "license": "MIT",
   "main": "lib/index.js",
@@ -125,4 +125,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

src/components/Layers/CompositeLayers/FlowLayer/constants.ts

@@ -0,0 +1,46 @@
+import { LayerEventMap } from '../../hooks/use-layer-event/constant';
+import type { IMapEvent } from './types';
+
+export const FlowLayerEventMap: IMapEvent = {
+  // 通用事件
+  onRemove: LayerEventMap.onRemove,
+  onShow: LayerEventMap.onShow,
+  onHide: LayerEventMap.onHide,
+  onDataUpdate: LayerEventMap.onDataUpdate,
+  onLegend: LayerEventMap.onLegend,
+  onLegendColor: LayerEventMap.onLegendColor,
+  onLegendSize: LayerEventMap.onLegendSize,
+  // 客流点点击事件
+  onCircleLayerClick: 'circleLayer:' + LayerEventMap.onClick,
+  onCircleLayerUnClick: 'circleLayer:' + LayerEventMap.onUnClick,
+  onCircleLayerDblClick: 'circleLayer:' + LayerEventMap.onDblClick,
+  onCircleLayerUndblclick: 'circleLayer:' + LayerEventMap.onUndblclick,
+  onCircleLayerContextMenu: 'circleLayer:' + LayerEventMap.onContextMenu,
+  onCircleLayerUnContextMenu: 'circleLayer:' + LayerEventMap.onUnContextMenu,
+  onCircleLayerMouseEnter: 'circleLayer:' + LayerEventMap.onMouseEnter,
+  onCircleLayerMouseMove: 'circleLayer:' + LayerEventMap.onMouseMove,
+  onCircleLayerMouseOut: 'circleLayer:' + LayerEventMap.onMouseOut,
+  onCircleLayerMouseUp: 'circleLayer:' + LayerEventMap.onMouseUp,
+  onCircleLayerMouseDown: 'circleLayer:' + LayerEventMap.onMouseDown,
+  onCircleLayerUnMousemove: 'circleLayer:' + LayerEventMap.onUnMousemove,
+  onCircleLayerUnMouseup: 'circleLayer:' + LayerEventMap.onUnMouseup,
+  onCircleLayerUnMousedown: 'circleLayer:' + LayerEventMap.onUnMousedown,
+  onCircleLayerUnPick: 'circleLayer:' + LayerEventMap.onUnPick,
+
+  // 客流线点击事件
+  onLineLayerClick: 'lineLayer:' + LayerEventMap.onClick,
+  onLineLayerUnClick: 'lineLayer:' + LayerEventMap.onUnClick,
+  onLineLayerDblClick: 'lineLayer:' + LayerEventMap.onDblClick,
+  onLineLayerUndblclick: 'lineLayer:' + LayerEventMap.onUndblclick,
+  onLineLayerContextMenu: 'lineLayer:' + LayerEventMap.onContextMenu,
+  onLineLayerUnContextMenu: 'lineLayer:' + LayerEventMap.onUnContextMenu,
+  onLineLayerMouseEnter: 'lineLayer:' + LayerEventMap.onMouseEnter,
+  onLineLayerMouseMove: 'lineLayer:' + LayerEventMap.onMouseMove,
+  onLineLayerMouseOut: 'lineLayer:' + LayerEventMap.onMouseOut,
+  onLineLayerMouseUp: 'lineLayer:' + LayerEventMap.onMouseUp,
+  onLineLayerMouseDown: 'lineLayer:' + LayerEventMap.onMouseDown,
+  onLineLayerUnMousemove: 'lineLayer:' + LayerEventMap.onUnMousemove,
+  onLineLayerUnMouseup: 'lineLayer:' + LayerEventMap.onUnMouseup,
+  onLineLayerUnMousedown: 'lineLayer:' + LayerEventMap.onUnMousedown,
+  onLineLayerUnPick: 'lineLayer:' + LayerEventMap.onUnPick,
+};

src/components/Layers/CompositeLayers/FlowLayer/demos/default.tsx

@@ -0,0 +1,43 @@
+import { FlowLayer, LarkMap } from '@antv/larkmap';
+import React, { useEffect, useState } from 'react';
+
+export default () => {
+  const [source, setSource] = useState({
+    data: [],
+    parser: {
+      type: 'json',
+      x: 'f_lon',
+      y: 'f_lat',
+      x1: 't_lon',
+      y1: 't_lat',
+      weight: 'weight',
+    },
+  });
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/bmw-prod/f4f3e99a-1d6c-4ab0-b08f-ec730c576b62.json')
+      .then((response) => response.json())
+      .then((data: any) => {
+        setSource((prevState) => ({ ...prevState, data }));
+      });
+  }, []);
+
+  return (
+    <LarkMap
+      mapType="Gaode"
+      mapOptions={{
+        style: 'dark',
+        center: [121.29, 31.14],
+      }}
+      style={{ height: '50vh' }}
+    >
+      {source.data.length !== 0 && (
+        <FlowLayer
+          source={source}
+          onCircleLayerClick={(e) => console.log('circle layer click', e)}
+          onLineLayerClick={(e) => console.log('line layer click', e)}
+        />
+      )}
+    </LarkMap>
+  );
+};