react-amap-v2/docs/components/mass/point-simplifier.md

高德地图 v2.0 react 组件

---
order: 22
---

# PointSimplifier

## 快速入门

此处给出了最简单示例

```tsx
import React, { useState } from 'react';
import { Map, PointSimplifier } 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,
  ]);
}

export default () => {
  return (
    <Map>
      <PointSimplifier
        data={points}
        getPosition={item => {
          return item;
        }}
        renderOptions={{
          drawQuadTree: true,
        }}
        events={{
          pointClick: (e, { data, index }) => {
            console.log(data, index);
          },
        }}
      />
    </Map>
  );
};
```

## 自定义图形

此处给出了最简单示例

```tsx
import React from 'react';
import { Map, PointSimplifier } 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,
  ]);
}

export default () => (
  <Map>
    <PointSimplifier
      data={points.slice(0, 1000)}
      getPosition={item => {
        return item;
      }}
      renderOptions={{
        pointStyle: {
          width: 16,
          height: 16,
          fillStyle: '#f5222d',
          strokeStyle: '#ffa39e',
          lineWidth: 2,
          content: (ctx, x, y, width, height) => {
            ctx.moveTo(x + width / 2, y);
            ctx.lineTo(x + width, y + height);
            ctx.lineTo(x, y + height);
            ctx.lineTo(x + width / 2, y);

            ctx.moveTo(x + width / 2, y + height * 0.4);
            ctx.lineTo(x + width / 2, y + height * 0.65);

            ctx.moveTo(x + width / 2, y + height * 0.8);
            ctx.lineTo(x + width / 2, y + height * 0.82);
          },
        },
        hoverTitleStyle: {
          position: 'top',
          offset: [0, -16],
        },
      }}
    />
  </Map>
);
```

## 使用图片

此处给出了最简单示例

```tsx
import React from 'react';
import { Map, PointSimplifier } 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,
  ]);
}

export default () => (
  <Map>
    <PointSimplifier
      data={points.slice(0, 100)}
      getPosition={item => {
        return item;
      }}
      renderOptions={{
        pointStyle: {
          content: {
            url: '//webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
          },
          width: 19,
          //高度
          height: 31,
          //定位点为底部中心
          offset: ['-50%', '-100%'],
          fillStyle: null,
          strokeStyle: null,
        },
        hoverTitleStyle: {
          position: 'top',
          offset: [0, -31],
        },
      }}
    />
  </Map>
);
```