面板内容
9 |
8 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/src/components/Template/index.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import React from 'react';
3 | import { CLS_PREFIX } from './constant';
4 | import './index.less';
5 | import type { TemplateProps } from './types';
6 |
7 | export const Template: React.FC10 | {title} 11 |
12 | ); 13 | }; 14 | -------------------------------------------------------------------------------- /src/components/Control/GeoLocateControl/type.ts: -------------------------------------------------------------------------------- 1 | import type { IGeoLocateOption, GeoLocate } from '@antv/l7'; 2 | import type { CSSProperties, ReactNode } from 'react'; 3 | import type { IControlCallback } from '../../../types'; 4 | 5 | /** 6 | * 组件类型定义 7 | */ 8 | export interface GeoLocateControlProps 9 | extends OmitLarkMap
18 |自定义内容
13 |
7 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/src/components/Layers/CompositeLayers/BubbleLayer/types.ts:
--------------------------------------------------------------------------------
1 | import type {
2 | BubbleLayer,
3 | BubbleLayerOptions,
4 | ColorAttr,
5 | SizeAttr,
6 | SourceOptions,
7 | TextLayerOptions,
8 | } from '@antv/l7-composite-layers';
9 | import type { LayerCommonProps, LayerEventCallback } from '../../../../types';
10 |
11 | export type { SourceOptions, ColorAttr, SizeAttr, TextLayerOptions };
12 |
13 | /**
14 | * 组件类型定义
15 | */
16 | export interface BubbleLayerProps extends BubbleLayerOptions, LayerCommonProps{ body }
' 18 | notify_footer: '前往 [**LarkMap Releases**]({ release_url }) 查看完整信息.' 19 | at_all: false 20 | -------------------------------------------------------------------------------- /src/components/Layers/BaseLayers/LineLayer/index.tsx: -------------------------------------------------------------------------------- 1 | import { LineLayer as L7LineLayer } from '@antv/l7-composite-layers'; 2 | import { forwardRef, memo, useImperativeHandle } from 'react'; 3 | import { useCreateLayer, useLayerEvent } from '../../hooks'; 4 | import type { LineLayerProps } from './types'; 5 | 6 | export const LineLayer = memo( 7 | forwardRef
7 | 
,
12 | 
,
13 | ]}
14 | />
15 |
16 | );
17 | };
18 |
--------------------------------------------------------------------------------
/docs/common/layer/line-layer/animate.md:
--------------------------------------------------------------------------------
1 | `boolean｜AnimateAttr` optional
2 |
3 | 水波动画，AnimateAttr 配置如下：
4 |
5 | | 属性 | 描述 | 类型 | 默认值 | 是否必填 |
6 | | ----------- | ------------------------ | --------- | ------- | -------- |
7 | | enable | 是否开启动画 | `boolean` | `false` | optional |
8 | | interval | 轨迹间隔, 取值区间 0 - 1 | `number` | | optional |
9 | | duration | 动画时间，单位秒 | `number` | | optional |
10 | | trailLength | 轨迹长度 取值区间 0 - 1 | `number` | | optional |
11 |
12 | ```js
13 | {
14 | animate: {
15 | duration: 4,
16 | interval: 0.2,
17 | trailLength: 0.1,
18 | }
19 | }
20 | ```
21 |
--------------------------------------------------------------------------------
/docs/examples/ukcommute/constants.tsx:
--------------------------------------------------------------------------------
1 | import type { LarkMapProps, LineLayerProps } from '@antv/larkmap';
2 |
3 | const config: LarkMapProps = {
4 | mapType: 'Gaode',
5 | mapOptions: {
6 | style: 'dark',
7 | center: [-0.9, 52.5],
8 | zoom: 6,
9 | pitch: 40,
10 | },
11 | };
12 |
13 | const layerConfig: Omit,
12 | ,
13 | ]}
14 | />
15 | 杭州
19 | lat: {lngLat.lat}
17 | lng: {lngLat.lng}
18 | 
35 |
--------------------------------------------------------------------------------
/src/components/LayerPopup/utils.ts:
--------------------------------------------------------------------------------
1 | import type { ReactNode } from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | /**
5 | * 将 render 中的 JSX 格式转换成 DOM 和 Portal 的形式
6 | * @param render
7 | * @param tag
8 | */
9 | export const getElementTypePortal = (
10 | render: ReactNode | ((...args: any[]) => ReactNode),
11 | tag: keyof HTMLElementTagNameMap,
12 | ) => {
13 | // 若 render 为函数格式，则在其每次调用时重新生成 dom 和 portal
14 | if (render instanceof Function) {
15 | const dom = document.createElement(tag);
16 | return (...args: any[]) => {
17 | const reactNode = render(...args);
18 | const portal = ReactDOM.createPortal(reactNode, dom);
19 | ReactDOM.render(portal, dom);
20 | return dom;
21 | };
22 | } else {
23 | const dom = document.createElement(tag);
24 | const portal = ReactDOM.createPortal(render, dom);
25 | ReactDOM.render(portal, dom);
26 | return dom;
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/docs/common/layer/attribute/color.md:
--------------------------------------------------------------------------------
1 | `string|ColorStyleAttribute|Function` optional default: `'#5FD3A6'`
2 |
3 | 元素颜色。
4 |
5 | ```js
6 | { color: 'red', }
7 | ```
8 |
9 | #### `color.`field
10 |
11 | `string` optional
12 |
13 | 元素颜色值映射关联字段。
14 |
15 | ```js
16 | {
17 | source: {
18 | data: [{ c: 'red', t: 20, n: 'chengdu' }],
19 | // ...
20 | },
21 | color: { field: 'c', }
22 | }
23 | ```
24 |
25 | #### `color.`value
26 |
27 | `string|string[]|Function` optional
28 |
29 | 元素颜色值映射值。
30 |
31 | ```js
32 | {
33 | color: {
34 | field: 't',
35 | value: ({ t }) => {
36 | return t > 20 ? 'red': 'blue'
37 | }
38 | }
39 | }
40 | ```
41 |
42 | #### `color.`scale
43 |
44 |
45 |
46 | ```js
47 | {
48 | color: {
49 | field: 't',
50 | value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
51 | scale: { type: 'quantile' }
52 | }
53 | }
54 | ```
55 |
--------------------------------------------------------------------------------
/src/components/Layers/BaseLayers/RasterLayer/demos/rasterImage.tsx:
--------------------------------------------------------------------------------
1 | import type { LarkMapProps, RasterLayerProps } from '@antv/larkmap';
2 | import { LarkMap, RasterLayer } from '@antv/larkmap';
3 | import React from 'react';
4 |
5 | const config: LarkMapProps = {
6 | mapType: 'Map',
7 | mapOptions: {
8 | center: [120.210792, 30.246026] as [number, number],
9 | zoom: 9,
10 | },
11 | };
12 |
13 | const layerOptions: Omit
21 | {labels.map((item, index) => (
22 |
28 | );
29 | };
30 |
--------------------------------------------------------------------------------
/src/components/Layers/CompositeLayers/ChoroplethLayer/index.tsx:
--------------------------------------------------------------------------------
1 | import { ChoroplethLayer as L7ChoroplethLayer } from '@antv/l7-composite-layers';
2 | import { forwardRef, memo, useImperativeHandle } from 'react';
3 | import { LayerEventMap } from '../../hooks/use-layer-event/constant';
4 | import { useCreateLayer, useLayerEvent } from '../../hooks';
5 | import type { ChoroplethLayerProps } from './types';
6 |
7 | const ChoroplethLayerEventMap = Object.assign(LayerEventMap, { onSelect: 'select', onUnselect: 'unselect' });
8 |
9 | export const ChoroplethLayer = memo(
10 | forwardRef
23 | {renderIcon(icons[index])}
24 |
26 | ))}
27 | {item}
25 |
7 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: release
2 |
3 | on:
4 | workflow_dispatch:
5 | release:
6 | types: [created, edited]
7 |
8 | jobs:
9 | build:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v2
13 | - uses: actions/setup-node@v2
14 | with:
15 | node-version: 18
16 | - run: npm install
17 | - run: npm run ci
18 |
19 | publish-site:
20 | needs: build
21 | runs-on: ubuntu-latest
22 | steps:
23 | - uses: actions/checkout@v2
24 | - uses: actions/setup-node@v2
25 | with:
26 | node-version: 18
27 | - run: npm install
28 | - run: npm run docs:build
29 | - run: |
30 | cd docs-dist
31 | git init
32 | git config --local user.name antv
33 | git config --local user.email antv@antfin.com
34 | git add .
35 | git commit -m "update by release action"
36 | - uses: ad-m/github-push-action@master
37 | with:
38 | github_token: ${{secrets.GITHUB_TOKEN}}
39 | directory: docs-dist
40 | branch: gh-pages
41 | force: true
42 |
--------------------------------------------------------------------------------
/docs/common/layer/heatmap-layer/size.md:
--------------------------------------------------------------------------------
1 | ### `options.`size
2 |
3 | `number|SizeStyleAttribute|Function` optional
4 |
5 | 当 shape 为普通热力（heatmap、heatmap3D）时，size 代表热力大小，配置如下：
6 |
7 | | 属性 | 描述 | 类型 | 默认值 | 是否必填 |
8 | | ----- | -------------------- | -------------------- | -------- | -------- |
9 | | field | 热力大小映射字段 | `string` | | required |
10 | | value | 热力大小数据映射区间 | `number[]｜Function` | `[0, 1]` | optional |
11 |
12 | ```js
13 | {
14 | source: {
15 | data: [{ lng: 104.101, lat: 30.649, t: 24.6, n: 'chengdu' }],
16 | parser: { type: 'json', x: 'lng', y: 'lat' }
17 | },
18 | size: {
19 | field: 't',
20 | value: [0, 1],
21 | },
22 | }
23 | ```
24 |
25 | 当 shape 为 3D 网格/蜂窝热力时，size 表示高度，shape 为 2D 时，size 无需设置
26 |
27 | ```js
28 | {
29 | size: {
30 | field: 'value',
31 | value: ({ value }) => value * 2
32 | }
33 | }
34 | ```
35 |
36 | #### `size.`field
37 |
38 | `string` required
39 |
40 | 网格大小映射字段。
41 |
42 | #### `size.`value
43 |
44 | `number|number[]|Function` optional
45 |
46 | 网格大小值映射值。
47 |
48 | #### `size.`scale
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/components/Control/CustomControl/index.tsx:
--------------------------------------------------------------------------------
1 | import type React from 'react';
2 | import { useCallback, useMemo, useRef } from 'react';
3 | import { createPortal } from 'react-dom';
4 | import type { IControlOption } from '@antv/l7';
5 | import { useControl } from '../../LarkMap/hooks';
6 | import { getStyleText } from '../../../utils';
7 | import type { CustomControlProps } from './types';
8 |
9 | export const CustomControl: React.FC
7 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/components/Layers/BaseLayers/PolygonLayer/demos/default.tsx:
--------------------------------------------------------------------------------
1 | import type { PolygonLayerProps } from '@antv/larkmap';
2 | import { LarkMap, PolygonLayer } from '@antv/larkmap';
3 | import React, { useEffect, useState } from 'react';
4 |
5 | const layerOptions: Omit
24 | 主地图与其余地图缩放层级差为 2
25 |
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/.fatherrc.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'father';
2 | import { IFatherBundlessConfig } from 'father/dist/types';
3 |
4 | const less2CssConfig: IFatherBundlessConfig = {
5 | transformer: 'babel', // 使用 babel 编译
6 | extraBabelPlugins: [
7 | [
8 | './scripts/babel-less-to-css.js', // 把文件中的 '.less' 字符转为 '.css'
9 | { test: '\\.less' },
10 | ],
11 | ],
12 | };
13 |
14 | export default defineConfig({
15 | esm: {
16 | output: 'es',
17 | ...less2CssConfig,
18 | },
19 | cjs: {
20 | output: 'lib',
21 | ...less2CssConfig,
22 | alias: {
23 | // lodash-es 不支持 cjs 产物，将打包产物修改为从 lodash 引入
24 | 'lodash-es': 'lodash',
25 | },
26 | },
27 | plugins: [
28 | // less 编译为 css
29 | './scripts/father-plugin-less.js',
30 | ],
31 | // https://github.com/umijs/father/blob/master/docs/config.md#umd
32 | umd: {
33 | name: 'LarkMap',
34 | output: 'dist',
35 | extractCSS: true,
36 | externals: {
37 | lodash: '_',
38 | 'lodash-es': '_',
39 | react: 'React',
40 | 'react-dom': 'ReactDOM',
41 | '@antv/l7': 'L7',
42 | '@antv/l7-draw': { root: ['L7', 'Draw'], commonjs2: '@antv/l7-draw', commonjs: '@antv/l7-draw' },
43 | },
44 | chainWebpack(memo) {
45 | memo
46 | .plugin('webpack-bundle-analyzer')
47 | .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [
48 | { analyzerMode: 'static', openAnalyzer: false },
49 | ]);
50 | return memo;
51 | },
52 | },
53 | });
54 |
--------------------------------------------------------------------------------
/src/components/Control/hooks/useL7ComponentEvent.ts:
--------------------------------------------------------------------------------
1 | import { useUnmount } from 'ahooks';
2 | import type EventEmitter from 'eventemitter3';
3 | import { useEffect, useMemo } from 'react';
4 |
5 | type CallbackFunction = (...args: any[]) => any;
6 |
7 | /**
8 | * 为 Control 绑定对应事件的回调，并且在回调函数发生更新时重新绑定
9 | * @param control
10 | * @param props
11 | */
12 | export const useL7ComponentEvent =
26 |
27 |
29 |
30 |
32 |
33 |
35 |
37 | 主地图
28 |地图2
31 |地图3
34 |
22 | 设置zoomGap：
23 |
44 | );
45 | };
46 |
--------------------------------------------------------------------------------
/src/components/LarkMap/hooks/use-layer-list/demos/default.tsx:
--------------------------------------------------------------------------------
1 | import { CustomControl, LarkMap, PolygonLayer, useLayerList } from '@antv/larkmap';
2 | import { Card } from 'antd';
3 | import React, { useEffect, useState } from 'react';
4 | import { LineLayerOptions, PolygonLayerOptions } from './constants';
5 |
6 | const CustomComponent = () => {
7 | const layerList = useLayerList();
8 |
9 | useEffect(() => {
10 | console.log(layerList);
11 | }, [layerList]);
12 |
13 | return (
14 |
24 |
32 |
34 |
40 |
42 |
43 | 主地图
33 |地图2
41 |当前已有图层：
17 |-
18 | {layerList.map((layer) => {
19 | return
- {layer.name} ; 20 | })} 21 |
19 | {labels.map((item, index) => (
20 |
31 | );
32 | }
33 | function Renders() {
34 | if (Array.isArray(colors)) {
35 | return Conent(colors);
36 | }
37 | const colorGradient = getGradientColors(colors.startColor, colors.endColor, labels.length);
38 | return Conent(colorGradient);
39 | }
40 | return
21 |
27 |
29 | ))}
30 | {item}
28 |
24 |
25 |
26 |
46 | );
47 | };
48 |
--------------------------------------------------------------------------------
/src/components/Layers/BaseLayers/TextLayer/demos/default.tsx:
--------------------------------------------------------------------------------
1 | import type { TextLayerProps } from '@antv/larkmap';
2 | import { LarkMap, TextLayer } from '@antv/larkmap';
3 | import React, { useEffect, useState } from 'react';
4 |
5 | const layerOptions: Omit
27 |
34 |
36 |
42 |
44 |
45 | 地图1
35 |地图2
43 |`"additive"｜`
`"subtractive"｜`
`"min"｜`
`"max"｜`
`"none"` | `"normal"` | 37 | | source | 数据配置，详情可见 [Source](#source) | `SourceOptions` | `(必选)` | 38 | | style | 元素样式，详情可见 [Style](#style) | `ImageLayerStyleOptions` | -- | 39 | | onCreated | 图层初始化完成后回调，用于获取 layer 对象 | `(layer: ImageLayer) => void` | -- | 40 | 41 | #### source 42 | 43 | 44 | 45 | #### style 46 | 47 | 48 | 49 | ### Event 50 | 51 | 52 | 53 | ### FAQ 54 | 55 | #### 1. 如何获取图层实例？ 56 | 57 | 详见 [获取图层实例](/components/layers/composite-layers/bubble-layer#1-如何获取图层实例) 58 | -------------------------------------------------------------------------------- /src/components/Control/LogoControl/index.tsx: -------------------------------------------------------------------------------- 1 | import type { ILogoControlOption } from '@antv/l7'; 2 | import { Logo as L7Logo } from '@antv/l7'; 3 | import { omitBy } from 'lodash-es'; 4 | import type React from 'react'; 5 | import { useEffect, useMemo, useState } from 'react'; 6 | import { getStyleText } from '../../../utils'; 7 | import { useScene } from '../../LarkMap/hooks'; 8 | import { useL7ComponentEvent, useL7ComponentUpdate } from '../hooks'; 9 | import type { LogoControlProps } from './types'; 10 | 11 | export const LogoControl: React.FC