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

高德地图 v2.0 react 组件

---
order: 23
---

# PathSimplifier

## 快速入门

此处给出了最简单示例

```tsx
import React, { useState } from 'react';
import { mock } from 'mockjs';
import { Map, PathSimplifier } from 'react-amap-v2';

import Slider from '@material-ui/core/Slider';

const pos = mock([
  '@float(121.140308, 121.82558, 6, 6)',
  '@float(30.853426, 31.363719, 6, 6)',
]);

const data: number[] = [];

for (let i = 0; i < 1000; i++) {
  data.push(
    mock([
      pos[0] + 0.00001 * i, // 经度
      pos[1] + 0.00001 * i, // 纬度
    ]),
  );
}

function Info(props: any) {
  return <div>{JSON.stringify(props)}</div>;
}

export default () => {
  const [scale, setScale] = useState(0.1);
  return (
    <>
      <Slider
        aria-labelledby="input-slider"
        valueLabelDisplay="auto"
        step={0.1}
        marks
        min={0.1}
        max={1}
        value={scale}
        onChange={(event, newValue) => {
          setScale(newValue);
        }}
      />
      <Map>
        <PathSimplifier
          data={[{ data: data.slice(0, data.length * scale) }]}
          clickToSelectPath={false}
          autoSetFitView={false}
          renderOptions={{
            pathLineHoverStyle: false,
          }}
          getPath={pathData => {
            return pathData.data;
          }}
        />
      </Map>
    </>
  );
};
```