### Install LarkMap with npm or yarn

Source: https://github.com/antvis/larkmap/blob/main/docs/guide/index.md

This snippet shows how to install the LarkMap library and its dependency, L7, using either npm or yarn package managers. These are essential steps before you can start using LarkMap in your React project.

```bash
$ npm install -S @antv/l7 @antv/larkmap
# or
$ yarn add @antv/l7 @antv/larkmap
```

--------------------------------

### LarkMap Usage via CDN

Source: https://github.com/antvis/larkmap/blob/main/docs/guide/index.md

This example illustrates how to use LarkMap by including it directly via Content Delivery Network (CDN) links in an HTML file. It loads React, ReactDOM, L7, L7-Draw, and LarkMap, then initializes the LarkMap component in the DOM. This method is useful for quick demos or projects not using a module bundler.

```html
<script src="https://gw.alipayobjects.com/os/lib/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@antv/l7@^2/dist/l7.js"></script>
<script src="https://unpkg.com/@antv/l7-draw@^3/dist/l7-draw.min.js"></script>
<script src="https://unpkg.com/@antv/larkmap@^1/dist/larkmap.min.js"></script>
<script>
  const { LarkMap } = window.LarkMap;
  const config = {
    mapType: 'Gaode',
    mapOptions: {
      style: 'light',
      center: [120.210792, 30.246026],
      zoom: 9,
      // token: '你的 token',
    },
  };
  const APP = React.createElement(LarkMap, {
    ...config,
    style: { height: '300px' },
  });

  ReactDOM.render(APP, document.getElementById('root'));
</script>
```

--------------------------------

### Basic LarkMap Usage in React

Source: https://github.com/antvis/larkmap/blob/main/docs/guide/index.md

Demonstrates the fundamental way to integrate LarkMap into a React application. It imports the LarkMap component and configures it with map type, style, center coordinates, and zoom level. This example sets up a basic interactive map.

```jsx
import React from 'react';
import { LarkMap } from '@antv/larkmap';

const config = {
  mapType: 'Gaode',
  mapOptions: {
    style: 'light',
    center: [120.210792, 30.246026],
    zoom: 10,
  },
};

export default () => {
  return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
};
```

--------------------------------

### Local Development Commands

Source: https://github.com/antvis/larkmap/blob/main/README.md

A set of npm scripts for managing the local development environment. Includes commands for installing dependencies, starting the development server, running linters and unit tests, and compiling the package for distribution.

```bash
# Install project dependencies
npm install

# Run website
npm run start

# Run lint & unit tests
npm run ci

# Compile package
npm run build
```

--------------------------------

### Install @antv/larkmap

Source: https://github.com/antvis/larkmap/blob/main/README.md

Installs the LarkMap package and its required L7 dependency using npm. This command fetches and sets up the necessary libraries for using LarkMap in your project.

```bash
npm install @antv/l7 @antv/larkmap
```

--------------------------------

### ContextMenu Default Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/ContextMenu/index.md

Demonstrates the default usage of the ContextMenu component.

```typescript
/* Code from ./demos/default.tsx */
```

--------------------------------

### Default BubbleLayer Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/CompositeLayers/BubbleLayer/index.md

A default example demonstrating the basic usage of the BubbleLayer component. This snippet is referenced from an external file.

```tsx
// Code from ./demos/default.tsx not provided in the input text.
```

--------------------------------

### Install LarkMap with npm

Source: https://github.com/antvis/larkmap/blob/main/README.en-US.md

Installs the necessary LarkMap and L7 packages using npm. These are the core dependencies for using LarkMap in your React project.

```bash
$ npm install @antv/l7 @antv/larkmap
```

--------------------------------

### LineLayer Default Example (TypeScript)

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/LineLayer/index.md

Demonstrates the default usage of the LineLayer component. This example showcases basic line data visualization with default configurations, illustrating how to initialize and render a line layer.

```typescript
import { LineLayer } from '@antv/larkmap';

// Assuming you have a map instance and data
// const map = new LarkMap(...);
// const data = [...];

// Example usage:
<LineLayer
  id="my-line-layer"
  source={data}
  color="#5FD3A6"
  size="1"
  animate={true}
  onCreated={(layer) => {
    console.log('LineLayer created:', layer);
  }}
/>;
```

--------------------------------

### Local Development Commands for LarkMap

Source: https://github.com/antvis/larkmap/blob/main/README.en-US.md

Provides essential commands for local development, including installing dependencies, running the development server, linting, testing, and building the package.

```bash
# Install project dependencies
$ npm install

# Run website
$ npm run start

# Run lint & unit tests
$ npm run ci

# Compile package
$ npm run build
```

--------------------------------

### PolygonLayer Default Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/PolygonLayer/index.md

Demonstrates the default usage of the PolygonLayer component for displaying polygon data. This example showcases basic configuration and rendering.

```tsx
import React from 'react';
import { Map, PolygonLayer } from '@larkmap/react';

const App = () => {
  const polygonData = [
    {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          properties: { name: 'Polygon 1' },
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [100, 10], [101, 10], [101, 11], [100, 11], [100, 10]
              ]
            ]
          }
        }
      ]
    }
  ];

  return (
    <Map style={{ height: '100vh', width: '100%' }}>
      <PolygonLayer
        id="polygon-layer-1"
        source={{
          data: polygonData,
          parser: {
            type: 'geojson'
          }
        }}
        color="#5FD3A6"
        size={10}
        visible={true}
        autoFit={true}
      />
    </Map>
  );
};

export default App;
```

--------------------------------

### HeatmapLayer Default Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/HeatmapLayer/index.md

Demonstrates the default usage of the HeatmapLayer component for point data aggregation. The actual code is referenced from an external file.

```TSX
// Code from ./demos/default.tsx
```

--------------------------------

### ContextMenu Custom Menu Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/ContextMenu/index.md

Shows how to customize the menu items in the ContextMenu component.

```typescript
/* Code from ./demos/custom.tsx */
```

--------------------------------

### Set ImageLayer Opacity

Source: https://github.com/antvis/larkmap/blob/main/docs/common/layer/image-layer/style.md

Example of setting the opacity for an ImageLayer style in JavaScript.

```js
{
  style: {
    opacity: 0.8,
  }
}
```

--------------------------------

### IconFontLayer Default Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/CompositeLayers/IconFontLayer/index.md

Demonstrates the default usage of the IconFontLayer component for displaying iconfont annotations. This snippet showcases basic configuration and rendering.

```tsx
import { IconFontLayer } from '@antv/larkmap';

// Assuming 'map' is an initialized LarkMap instance
const iconFontLayer = new IconFontLayer(map, {
  source: {
    data: [
      { id: '1', icon: 'star', x: 100, y: 100 },
      { id: '2', icon: 'heart', x: 120, y: 120 },
    ],
    parser: {
      type: 'json',
      x: 'x',
      y: 'y',
    },
  },
  icon: {
    field: 'icon',
    value: ['star', 'heart'],
  },
  radius: 15,
});

iconFontLayer.addToMap();
```

--------------------------------

### Instantiate LarkMap with AMapLoader

Source: https://github.com/antvis/larkmap/blob/main/src/components/LarkMap/index.md

Demonstrates how to instantiate the LarkMap component by dynamically loading the Gaode Map API using AMapLoader and passing the map instance to the LarkMap component. This example shows setting map options like style, center, and zoom level.

```tsx
import AMapLoader from '@amap/amap-jsapi-loader';
import { GaodeMap } from '@antv/l7';
import { LarkMap } from '@antv/larkmap';
import React from 'react';

/**
 * 或者通过 AMapLoader
 */
const getMapInstance = () => {
  return AMapLoader.load({
    key: '你申请的 Key', // 申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    return new GaodeMap({
      mapInstance: new AMap.Map('container', {
        zoom: 16, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
      }),
    });
  });
};

export default () => {
  return <LarkMap id="container" map={getMapInstance} style={{ height: '300px' }} />;
};
```

--------------------------------

### PointLayerStyleOptions Configuration Example

Source: https://github.com/antvis/larkmap/blob/main/docs/common/layer/point-layer/style.md

This snippet demonstrates the structure for configuring `PointLayerStyleOptions` in Larkmap. It shows how to set properties like opacity, stroke color, and stroke width for point elements.

```JavaScript
{
  style: {
    opacity: 0.8,
    stroke: 'white',
    strokeWidth: 2,
  }
}
```

--------------------------------

### Apply Line Styles

Source: https://github.com/antvis/larkmap/blob/main/docs/common/layer/line-layer/style.md

Example of how to apply LineLayerStyleOptions to a style object in JavaScript.

```js
{
  style: {
    opacity: 0.8,
    lineType: 'dash',
    dashArray: [2, 2]
  }
}
```

--------------------------------

### ImageLayer API Documentation - Larkmap

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/ImageLayer/index.md

Provides detailed documentation for the ImageLayer component's parameters, including their types, default values, and descriptions. This API reference covers configuration options for data sources, styling, and layer behavior.

```APIDOC
ImageLayer:
  Parameters:
    ref: Component Ref
      Type: Ref<ImageLayer>
      Default: --
    id: Layer ID
      Type: string
      Default: --
    name: Layer Name
      Type: string
      Default: --
    zIndex: Layer Z-index
      Type: number
      Default: --
    visible: Whether the layer is visible
      Type: boolean
      Default: true
    minZoom: Minimum zoom level for layer visibility
      Type: number
      Default: --
    maxZoom: Maximum zoom level for layer visibility
      Type: number
      Default: --
    autoFit: Automatically fit the map view to the layer's data extent after loading. Note: When enabled, the map will also zoom to the layer's data boundary when the layer data is updated.
      Type: boolean
      Default: false
    blend: Blend effect for layer elements
      Type: "normal" | "additive" | "subtractive" | "min" | "max" | "none"
      Default: "normal"
    source: Data configuration, see [Source](#source) for details
      Type: SourceOptions
      Required: true
    style: Element style, see [Style](#style) for details
      Type: ImageLayerStyleOptions
      Default: --
    onCreated: Callback after layer initialization, used to get the layer object
      Type: (layer: ImageLayer) => void
      Default: --

Source:
  (Details embedded from '../../../docs/common/layer/image-layer/source.md')

Style:
  (Details embedded from '../../../docs/common/layer/image-layer/style.md')

Event:
  (Details embedded from '../../../docs/common/layer/base-common/event.md')

FAQ:
  1. How to get the layer instance?
     See [How to get the layer instance](/components/layers/composite-layers/bubble-layer#1-how-to-get-the-layer-instance)
```

--------------------------------

### TextLayer API Documentation

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/TextLayer/index.md

Comprehensive API documentation for the TextLayer component, detailing its properties, data source configuration, styling options, state management, and event handling.

```APIDOC
TextLayer:
  description: Wrapper for L7's TextLayer for text display.
  properties:
    ref: Component Ref
      type: Ref<TextLayer>
      default: --
    id: Layer ID
      type: string
      default: --
    name: Layer Name
      type: string
      default: --
    zIndex: Layer Z-index
      type: number
      default: --
    visible: Layer visibility
      type: boolean
      default: true
    minZoom: Minimum zoom level for layer visibility
      type: number
      default: --
    maxZoom: Maximum zoom level for layer visibility
      type: number
      default: --
    pickingBuffer: Layer picking buffer configuration (e.g., to increase mouse拾取 range for thin lines)
      type: number
      default: 0
    autoFit: Automatically fit map to layer data extent upon loading. If enabled, map will also zoom to layer data bounds when data updates.
      type: boolean
      default: false
    blend: Layer element blend effect
      type: "normal" | "additive" | "subtractive" | "min" | "max" | "none"
      default: "normal"
    field: Data field to map for labels
      type: string
      required: true
    source: Data configuration, see [Source](#source)
      type: SourceOptions
      required: true
    style: Element style, see [Style](#style)
      type: TextLayerStyleOptions
      default: --
    state: Element interaction feedback effects, see [State](#state)
      type: StateAttribute
      default: --
    onCreated: Callback after layer initialization, used to get the layer object
      type: (layer: TextLayer) => void
      default: --
  related:
    source: Data configuration details.
    style: Element style details.
    state: Element interaction feedback effects details.
    event: Event handling details, see [获取图层实例](/components/layers/composite-layers/bubble-layer#1-如何获取图层实例) for obtaining layer instances.
```

--------------------------------

### Heatmap Shape Configuration

Source: https://github.com/antvis/larkmap/blob/main/docs/common/layer/heatmap-layer/shape.md

Example of setting the shape property for a heatmap visualization in Larkmap. This configuration specifies the basic 'heatmap' type.

```js
{
  shape: 'heatmap',
}
```

--------------------------------

### IconFontLayer API Documentation

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/CompositeLayers/IconFontLayer/index.md

Comprehensive API documentation for configuring the IconFontLayer, including data sources, icon mapping, styling, radius control, label display, and interaction states.

```APIDOC
IconFontLayer:
  __constructor__(map: LarkMap, options: IconFontLayerOptions)
    Initializes the IconFontLayer with a map instance and configuration options.

  IconFontLayerOptions:
    source: SourceOptions
      Data source configuration for the layer.
      - data: Array<Record<string, any>> | string
        The data to be rendered.
      - parser: ParserOptions
        Configuration for parsing the data.
        - type: 'json' | 'csv' | 'geojson' | 'wkt'
          The type of data parser.
        - x?: string
          Field name for the x-coordinate.
        - y?: string
          Field name for the y-coordinate.
        - coordinates?: string
          Field name for coordinates (e.g., GeoJSON).
        - ...other parser options

    icon: IconStyleAttribute
      Maps iconfont values to visual icons.
      - field?: string
        The data field to map icons from.
      - value: string | string[] | Function
        The icon value or a function to determine the icon.
        Example: { field: 'n', value: ['a', 'b', 'c'] }
      - scale?: ScaleOptions
        Scale configuration for icon mapping (e.g., 'cat' scale).
        Example: { type: 'cat' }

    iconStyle: ShapeStyleAttribute
      Defines the visual style of the icons (color, opacity, etc.).
      Refer to TextLayerStyleOptions for detailed properties.

    radius: SizeStyleAttribute
      Controls the size of the icon markers.
      - field?: string
        The data field to map radius values from.
      - value: number | number[] | Function
        The radius value or a function to determine the radius.
        Example: { field: 's', value: [12, 15] }
      - scale?: ScaleOptions
        Scale configuration for radius mapping (e.g., 'quantile' scale).
        Example: { type: 'quantile' }

    label: LabelOptions
      Configuration for displaying text labels associated with icons.
      - field?: string
        The data field for the label text.
      - visible?: boolean
        Whether the label is visible (default: true).
      - style?: TextLayerStyleOptions
        Detailed style options for the label text.
        Refer to TextLayerStyleOptions for properties.

    state: StateAttribute
      Defines interactive states like active and select.
      - active?: boolean | { enable?: boolean, color?: string }
        Enables hover effects. Can specify color.
        Example: { active: true } or { active: { color: 'red', enable: true } }
      - select?: boolean | IconLayerActiveOptions
        Enables click selection effects. Can specify properties like radius, opacity.
        Example: { select: true } or { select: { radius: 10, opacity: 1 } }

    IconLayerActiveOptions:
      enable?: boolean
        Whether to enable the state effect.
      icon?: ShapeAttr
        Name of the icon for the state effect.
      radius?: number
        Size of the icon for the state effect (default: 10).
      color?: string
        Color of the icon for the state effect (default: '#2f54eb').
      opacity?: number
        Opacity of the icon for the state effect (default: 1).

    Event:
      Handles layer events like click, mouseover, etc.
      Refer to base-common/event.md for common event handling.

  Example Usage:
    const layer = new IconFontLayer(map, {
      source: {
        data: [...],
        parser: { type: 'json', x: 'x', y: 'y' },
      },
      icon: {
        field: 'type',
        value: ['icon1', 'icon2'],
        scale: { type: 'cat' },
      },
      radius: {
        field: 'value',
        value: [10, 20],
        scale: { type: 'linear' },
      },
      label: {
        field: 'name',
        visible: true,
        style: { fontSize: 12, fill: 'black' },
      },
      state: {
        active: true,
        select: { color: 'blue' },
      },
    });

```

--------------------------------

### LegendCategories in Map Demo

Source: https://github.com/antvis/larkmap/blob/main/src/components/Legend/LegendCategories/index.md

Illustrates how to display the LegendCategories component within a map context. This example typically involves integrating the legend with map layers and data.

```tsx
// Code for ./demos/map-default.tsx not provided in the input.
```

--------------------------------

### PointLayer API Documentation

Source: https://github.com/antvis/larkmap/blob/main/src/components/Layers/BaseLayers/PointLayer/index.md

API reference for the PointLayer component, detailing all configurable parameters, their types, default values, and descriptions.

```APIDOC
PointLayer:
  id: 图层 ID
    type: string
    default: --
  name: 图层名称
    type: string
    default: --
  zIndex: 图层层级
    type: number
    default: --
  visible: 图层是否可见
    type: boolean
    default: true
  minZoom: 图层最小可见层级
    type: number
    default: --
  maxZoom: 图层最大可见层级
    type: number
    default: --
  pickingBuffer: 图层拾取缓存配置，如 1px 宽度的线鼠标很难拾取到, 通过设置该参数可扩大拾取的范围
    type: number
    default: 0
  autoFit: 图层加载成功后是否自动定位到图层数据可见范围，注意开启后图层数据发生更新时，地图也会自动缩放到图层的数据边界范围
    type: boolean
    default: false
  blend: 图层元素混合效果
    type: "normal" | "additive" | "subtractive" | "min" | "max" | "none"
    default: "normal"
  source: 数据配置，详情可见 Source
    type: SourceOptions
    default: (必选)
  shape: 元素形状，详情可见 Shape
    type: ShapeAttr
    default: 'circle'
  color: 元素颜色，详情可见 Color
    type: ColorAttr
    default: '#5FD3A6'
  size: 元素大小，详情可见 Size
    type: SizeAttr
    default: '12'
  style: 元素样式，详情可见 Style
    type: PointLayerStyleOptions
    default: --
  state: 元素交互反馈效果，详情可见 State
    type: StateAttribute
    default: --
  animate: 水波动画，详情可见 Animate
    type: boolean | AnimateAttr
    default: false
  ref: 组件 Ref，详情可见 PointLayer
    type: Ref<PointLayer>
    default: --
  onCreated: 图层初始化完成后回调，用于获取 layer 对象
    type: (layer: PointLayer) => void
    default: --
```

--------------------------------

### Synchronizing Multiple Map Scenes

Source: https://github.com/antvis/larkmap/blob/main/src/components/SyncScene/index.md

Provides an example of synchronizing the state of multiple map scenes simultaneously. This is useful for complex multi-view applications where several maps need to stay coordinated.

```typescript
// Code for './demos/multiScenes.tsx' not provided in the input text.
```

--------------------------------

### LarkMap Component API

Source: https://github.com/antvis/larkmap/blob/main/src/components/LarkMap/index.md

Documentation for the LarkMap component's properties, including configuration for map providers, event handlers, and rendering options.

```APIDOC
LarkMap Component API:

Properties:

- id: string
  - Description: Container id
  - Default: --

- style: CSSProperties
  - Description: Container inline style
  - Default: --

- className: string
  - Description: Container class name
  - Default: --

- map: MapInstance | (() => Promise<IMapWrapper>)
  - Description: Map instance, optional, can also be automatically generated via configuration options. See [L7 map](https://l7.antv.antgroup.com/api/map/map).
  - Default: --

- mapType: 'Gaode' | 'GaodeV2' | 'Mapbox' | 'Map' | 'Tencent' | 'Baidu'
  - Description: Base map type.
  - Default: 'Gaode'

- mapOptions: MapOptions
  - Description: Map configuration options. Configure the map in conjunction with the map type. See [MapOptions](#mapoptions) for details.
  - Default: --

- logoPosition: PositionName
  - Description: Logo display position. See [L7 logoPosition](https://l7.antv.antgroup.com/api/scene#logoposition) for configuration details.
  - Default: 'bottomleft'

- logoVisible: boolean
  - Description: Whether to display the logo.
  - Default: true

- antialias: boolean
  - Description: Whether to enable antialiasing.
  - Default: true

- preserveDrawingBuffer: boolean
  - Description: Whether to preserve buffer data.
  - Default: false

- ref: Ref<LarkMapRefAttributes>
  - Description: Component Ref. See [LarkMapRefAttributes](#larkmaprefattributes) for details.
  - Default: --

Event Handlers:

- onSceneLoaded: (scene: Scene) => void
  - Description: Callback when the scene is loaded successfully.
  - Default: --

- onLoaded: (e?: any) => void
  - Description: Event triggered when loading is complete.
  - Default: --

- onDestroy: (e?: any) => void
  - Description: Event triggered when the component is destroyed.
  - Default: --

- onResize: (e?: any) => void
  - Description: Event triggered when the map container size changes.
  - Default: --

- onMapMove: (e?: any) => void
  - Description: Event triggered when the map is panned.
  - Default: --

- onMoveStart: (e?: any) => void
  - Description: Event triggered when map panning starts.
  - Default: --

- onMoveEnd: (e?: any) => void
  - Description: Event triggered after map movement ends, including panning and zooming of the center point. If the map has a pan easing effect, it triggers after the easing ends.
  - Default: --

- onZoomStart: (e?: any) => void
  - Description: Event triggered when zooming starts.
  - Default: --

- onZoomEnd: (e?: any) => void
  - Description: Event triggered when zooming stops.
  - Default: --

- onZoomChange: (e?: any) => void
  - Description: Event triggered after the map zoom level changes.
  - Default: --

- onClick: (e?: any) => void
  - Description: Click event.
  - Default: --

- onDblclick: (e?: any) => void
  - Description: Double-click event.
  - Default: --

- onContextMenu: (e?: any) => void
  - Description: Right-click event.
  - Default: --

- onMouseMove: (e?: any) => void
  - Description: Event triggered when the mouse moves over the map.
  - Default: --

- onMouseWheel: (e?: any) => void
  - Description: Event triggered when the mouse wheel starts zooming the map.
  - Default: --

- onMouseDown: (e?: any) => void
  - Description: Event triggered when the mouse button is pressed down on the map.
  - Default: --

- onMouseUp: (e?: any) => void
  - Description: Event triggered when the mouse button is released on the map.
  - Default: --

- onMouseOver: (e?: any) => void
  - Description: Event triggered when the mouse cursor moves into the map container.
  - Default: --

- onMouseOut: (e?: any) => void
  - Description: Event triggered when the mouse cursor moves out of the map container.
  - Default: --

- onDragStart: (e?: any) => void
  - Description: Event triggered when map dragging starts.
  - Default: --

- onDragging: (e?: any) => void
  - Description: Event triggered during map dragging.
  - Default: --

- onDragEnd: (e?: any) => void
  - Description: Event triggered when map dragging stops. If the map has a pan easing effect, it triggers before the easing starts.
  - Default: --
```

--------------------------------

### MouseLocationControl API Documentation

Source: https://github.com/antvis/larkmap/blob/main/src/components/Control/MouseLocationControl/index.md

API 文档描述了 MouseLocationControl 组件的可用参数、类型定义以及事件回调。允许开发者自定义经纬度转换、控件位置、样式以及响应位置变化。

```APIDOC
MouseLocationControl:
  描述: 光标经纬度组件，用于实时展示当前光标在地图上所对应的经纬度。

  参数:
    transform: 转换光标所在经纬度的回调函数
      类型: (position: [number, number]) => [number, number]
      默认值: -
    position: 控件被添加到地图中的位置以及排列方式，详情可见 [控件插槽](https://l7.antv.antgroup.com/api/component/control/control#插槽)
      类型: [Position](#position)
      默认值: 'bottomleft'
    className: 自定义样式名
      类型: string
      默认值: -
    style: 自定义样式
      类型: CSSProperties
      默认值: -
    onLocationChange: 光标所在经纬度发生变化时触发的回调
      类型: (position: [number, number]) => void
      默认值: -
    onAdd: 组件被添加时的回调
      类型: (this) => void
      默认值: -
    onRemove: 组件被移除时的回调
      类型: (this) => void
      默认值: -
    onShow: 组件显示时的回调
      类型: (this) => void
      默认值: -
    onHide: 组件隐藏时的回调
      类型: (this) => void
      默认值: -

  类型定义:
    Position:
      类型: 'topleft' | 'lefttop' | 'topright' | 'righttop' | 'bottomleft' | 'leftbottom' | 'bottomright' | 'rightbottom' | 'topcenter' | 'bottomcenter' | 'leftcenter' | 'rightcenter'
      说明:
        'topleft': ↖ 左上角，纵向排列
        'lefttop': ↖ 左上角，横向排列
        'topright': ↗ 右上角，纵向排列
        'righttop': ↗ 右上角，横向排列
        'bottomleft': ↙ 左下角，纵向排列
        'leftbottom': ↙ 左下角，横向排列
        'bottomright': ↘ 右下角，纵向排列
        'rightbottom': ↘ 右下角，横向排列
        'topcenter': ↑ 上方中央，横向排列
        'bottomcenter': ↓ 下方中间，横向排列
        'leftcenter': ← 左边中间，纵向排列
        'rightcenter': → 右边中间，纵向排列
```

--------------------------------

### Default LegendCategories Demo

Source: https://github.com/antvis/larkmap/blob/main/src/components/Legend/LegendCategories/index.md

Demonstrates the default usage of the LegendCategories component. This snippet shows the basic setup and rendering of a categorical legend without specific map integration.

```tsx
// Code for ./demos/default.tsx not provided in the input.
```

--------------------------------

### Basic LarkMap Usage in React

Source: https://github.com/antvis/larkmap/blob/main/README.md

Demonstrates how to integrate the LarkMap component into a React application. It shows basic configuration for map type, style, initial center coordinates, pitch, and zoom level.

```jsx
import React from 'react';
import { LarkMap } from '@antv/larkmap';

const config = {
  mapType: 'Gaode',
  mapOptions: {
    style: 'light',
    center: [120.210792, 30.246026],
    pitch: 0,
    zoom: 8,
    rotation: 0,
  },
};

export default () => {
  return <LarkMap {...config} style={{ height: '300px' }}></LarkMap>;
};
```

--------------------------------

### useDrawGroup Hook Example

Source: https://github.com/antvis/larkmap/blob/main/src/components/Draw/use-draw-group/index.md

Demonstrates the default usage of the useDrawGroup hook for managing L7Draw instances. This snippet would typically show how to integrate the hook into a React component.

```typescript
// This is a placeholder for the code found in ./demos/default.tsx
// The actual code content is not provided in the input text.
// Example structure:
/*
import React from 'react';
import { useDrawGroup } from '@antv/larkmap';

const MyMapComponent = () => {
  const { drawMap, drawGroupData, setDrawGroupData, activeDraw, setActiveDraw } = useDrawGroup({
    config: {
      point: true,
      line: { /* line config */ },
    },
    commonOptions: { /* common draw options */ },
  });

  // ... rest of the component logic

  return (
    <div>
      {/* Map rendering and controls */}
    </div>
  );
};

export default MyMapComponent;
*/
```