react-amap-v2/docs/components/overlay/polygon.md

高德地图 v2.0 react 组件

---
order: 4
---

# Polygon

## 快速入门

此处给出了最简单示例

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

import monitor from './../../../src/test/data/monitor';

const devices = [
  {
    id: 39,
    type: 'RSU',
    abbr: '路口信号灯',
    sn: '123213132123',
    lon: 119.425572609,
    lat: 31.054014038,
    connectionStatus: '2',
    deviceStatus: '0',
    rxBytes: 0,
    txBytes: 0,
    ip: null,
    createTime: '2020-04-25T07:29:41.123Z',
    updateTime: '2020-04-29T08:47:22.296Z',
    simCard: null,
    brand: null,
    locationDesc: '路口',
  },
  {
    id: 34,
    type: 'RSU',
    abbr: '_ttt',
    sn: '123ddasd1',
    lon: 119.429052586,
    lat: 31.049415863,
    connectionStatus: '2',
    deviceStatus: '0',
    rxBytes: 0,
    txBytes: 0,
    ip: null,
    createTime: '2020-04-15T02:06:03.584Z',
    updateTime: '2020-04-23T06:20:22.981Z',
    simCard: '111111111111',
    brand: '111xx',
    locationDesc: '位置描述',
  },
  {
    id: 24,
    type: 'signalLamp',
    abbr: '红绿灯',
    sn: '123145',
    lon: 119.435126247,
    lat: 31.030467278,
    connectionStatus: '0',
    deviceStatus: '0',
    rxBytes: 0,
    txBytes: 0,
    ip: '30.90.9.164:17921',
    createTime: '2020-03-18T02:09:23.560Z',
    updateTime: '2020-04-09T06:23:54.887Z',
    simCard: null,
    brand: null,
    locationDesc: null,
    phases: [{ phaseId: null, lampStatus: 1, timeLeft: 29 }],
  },
];

const CarIcon = () => (
  <img width={36} height={36} src="/assets/car.png" alt="marker" />
);

const Markers = () => {
  return (
    <>
      {devices.map((device, index) => (
        <Marker key={`marker-${index}`} position={[device.lon, device.lat]}>
          <CarIcon />
        </Marker>
      ))}
    </>
  );
};

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

  useEffect(() => {
    import('./../../../src/test/data/polygon').then(module => {
      // // // // // // // // //
      //  data : [ {
      //    name: '名称',
      //    geometry: [
      //      [119.4301882641521, 31.053057343095787],
      //      119.4301882641521, 31.053057343095787]
      //    ]
      //  } ]
      // // // // // // // // //
      setData(module.default.data);
    });
  }, []);

  return (
    <>
      {data.map(({ geometry }, index) => (
        <Polygon
          key={index}
          strokeColor="#2ACCE3"
          strokeWeight={1}
          fillColor="#2ACCE3"
          fillOpacity={0.2}
          path={geometry}
        />
      ))}
    </>
  );
};

export default () => (
  <Map
    {...{ viewMode: '3D', rotateEnable: true, rotation: 286, zoom: 15 }}
    center={[119.427223, 31.040837]}
  >
    <Markers />
    <Polygons />
  </Map>
);
```

## 可编辑

此处给出了最简单示例

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

import Paper from '@material-ui/core/Paper';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Switch from '@material-ui/core/Switch';

export default () => {
  const [editable, setEditable] = useState(true);

  return (
    <Map center={[121.468524, 31.22466]}>
      <Paper
        color="text.primary"
        style={{
          zIndex: 10,
          position: 'absolute',
          top: 20,
          right: 20,
          padding: '0 10px',
        }}
      >
        <FormControlLabel
          control={
            <Switch
              checked={editable}
              onChange={e => setEditable(e.target.checked)}
            />
          }
          label="可编辑"
        />
      </Paper>
      <Polygon
        editable={editable}
        fillColor="#52c41a"
        strokeWeight={6}
        editorEvents={{
          end: data => {
            console.log('结束编辑', data);
          },
        }}
        path={[
          [121.247424, 31.257536],
          [121.523456, 31.259884],
          [121.454791, 31.162399],
        ]}
      />
      <Polygon
        editable={editable}
        fillColor="#52c41a"
        strokeWeight={6}
        editorEvents={{
          end: data => {
            console.log('结束编辑', data);
          },
        }}
        path={[
          [121.60654, 31.147121],
          [121.842746, 31.016571],
          [121.786441, 31.181199],
        ]}
      />
    </Map>
  );
};
```