react-amap-v2/docs/components/mass/labels-layer.md

高德地图 v2.0 react 组件

---
group:
  title: 海量点
  order: 4
order: 20
---

# LabelsLayer

## 快速入门

此处给出了最简单示例

```tsx
import React from 'react';
import { Map, LabelsLayer } from 'react-amap-v2';
// import points from '@/test/data/points.json';

// 设置一个图标对象
const icon = {
  // 图标类型，现阶段只支持 image 类型
  type: 'image',
  // 图片 url
  image:
    'https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png',
  // 图片尺寸
  size: [64, 30],
  // 图片相对 position 的锚点，默认为 bottom-center
  anchor: 'center',
};

const textStyle = {
  fontSize: 12,
  fontWeight: 'normal',
  fillColor: '#22886f',
  strokeColor: '#fff',
  strokeWidth: 2,
  fold: true,
  padding: '2, 5',
};

const LabelsData = [
  {
    name: '自提点1',
    position: [116.461009, 39.991443],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 10,
    fold: true,
    icon,
    text: {
      // 要展示的文字内容
      content: '中邮速递易',
      // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
      direction: 'right',
      // 在 direction 基础上的偏移量
      offset: [-20, -5],
      // 文字样式
      style: {
        // 字体大小
        fontSize: 12,
        // 字体颜色
        fillColor: '#22886f',
        //
        strokeColor: '#fff',
        strokeWidth: 2,
        fold: true,
        padding: '2, 5',
      },
    },
  },
  {
    name: '自提点2',
    position: [116.466994, 39.984904],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 16,
    icon,
    text: {
      content: '丰巢快递柜-花家地北里',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点3',
    position: [116.472914, 39.987093],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 8,
    icon,
    text: {
      content: '丰巢快递柜-中环南路11号院',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点4',
    position: [116.471814, 39.995856],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 23,
    icon,
    text: {
      content: '丰巢快递柜-合生麒麟社',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点5',
    position: [116.469639, 39.986889],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 6,
    icon,
    text: {
      content: '速递易快递柜-望京大厦',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点6',
    position: [116.467361, 39.996361],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 5,
    icon,
    text: {
      content: 'E栈快递柜-夏都家园',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点7',
    position: [116.462327, 39.996071],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 4,
    icon,
    text: {
      content: '丰巢自提柜-圣馨大地家园',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点8',
    position: [116.462349, 39.996067],
    zooms: [10, 20],
    opacity: 1,
    zIndex: 3,
    icon,
    text: {
      content: '丰巢快递-圣馨大地家园',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
  {
    name: '自提点9',
    position: [116.456474, 39.991563],
    zooms: [10, 20],
    zIndex: 2,
    opacity: 1,
    icon,
    text: {
      content: 'E栈快递柜-南湖渠西里',
      direction: 'right',
      offset: [-20, -5],
      style: textStyle,
    },
  },
];

export default () => (
  <Map zoom={15.8} showIndoorMap={false} center={[116.469881, 39.993599]}>
    <LabelsLayer
      {...{
        zooms: [3, 20],
        zIndex: 1000,
        allowCollision: true,
      }}
      data={LabelsData}
    />
  </Map>
);
```

## 海量点

此处给出了最简单示例

```tsx
import React, { useState, useMemo, useEffect } from 'react';
import { Map, LabelsLayer } from 'react-amap-v2';

// 模拟数据
const points = [];
for (let i = 0; i < 1000; i++) {
  let _r = Math.random() * Math.PI * 2;
  points.push([
    116.4 + Math.cos(_r) * Math.random() * 0.5,
    40 + Math.sin(_r) * Math.random() * 0.5,
  ]);
}

const icon = {
  type: 'image',
  image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
  size: [6, 9],
  anchor: 'bottom-center',
};

export default () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    setData(points);
  }, []);

  return useMemo(
    () => (
      <Map
        zoom={9}
        showIndoorMap={false}
        showLabel={false}
        mapStyle="amap://styles/whitesmoke"
        center={[116.12, 40.11]}
      >
        <LabelsLayer
          {...{
            zooms: [3, 20],
            zIndex: 1000,
            collision: false,
          }}
          data={data.map(item => ({ icon, position: item }))}
        />
      </Map>
    ),
    [data],
  );
};
```