# ol-rectangle-draw

> This is an openlayers rectangle drawing supplement package. 这是一个openlayers矩形绘制补充包。

Latest version **0.1.0** (published 2022-07-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ol-rectangle-draw
pnpm add ol-rectangle-draw
yarn add ol-rectangle-draw
bun add ol-rectangle-draw
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-07-18 |
| First published | 2022-07-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Yesifang |
| Maintainers | yesifang |
| Keywords | openlayers, openlayers rectangle, openlayers draw, openlayers draw rectangle, ol-rectangle, ol-draw, ol-draw-rectangle |

## Links

- npm: https://www.npmjs.com/package/ol-rectangle-draw
- Repository: https://github.com/SuperYesifang/ol-rectangle-draw
- Homepage: https://yesifang.com
- Issues: https://github.com/SuperYesifang/ol-rectangle-draw/issues
- npm.io page: https://npm.io/package/ol-rectangle-draw

## Recent versions

- 0.1.0 (latest) — 2022-07-18

## README

# ol-rectangle-draw

![ol-rectangle-draw](https://img.shields.io/badge/ol--rectangle--draw-v0.1.0-%23C50008?logo=npm)
![nodejs](https://img.shields.io/badge/nodejs-lts--v14.x-%23036200?logo=nodedotjs)
[![blog](https://img.shields.io/badge/blog-yesifang.com-orange?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABjFBMVEUAAAAIAQUiBhQVBA05CyK0I2z4MJTgKoV8GEoKAgZyFkT8MZfTKX4dBRFWEDP9MZfMJ3kGAQQHAQTlK4htFUEAHRMATDAAbUQAf1EAh1QAgFAAbUUATDAAHhNMDy7KJngAeUsAKBp9GEr4MJMDAQIAmWEAWzkABAOGGlD9MZYAcUgABQNoFD7mLIoAZUCdHl4ANiKiH2EpCBgAh1UAAgERAwrVKH9nFD0ALBwSAwuqIWXmK4pTEDIAWTgrCBp2F0eVHVmKG1NWETMAdEgAgVAAAQIAJTcATXIAZJQAbqUAap0AVoEAfE4AAQEAN1EAgMAAaEIACQ4Aap4ARiwACQ0AebMAmV8AEwwAAAAAZ5oAZT8AMkkAkFoAEQsAebMAl14AGCQAkl0ALx4AOlYAeEsAGRAATHAAbkUAll0All4AbkYAMB4ATXMABwQAIxYANiIAPicANyIAJBYAQF4AIjIAis0AAgMAhsYAZJYARWYAk9oAHy4ABQcAfbkAO1gAis3/MZgAmmEAld3///8EabibAAAAgHRSTlMACCIVObX54XwKcv3UHVb+zQYH5m0xfrTU4NW1fzJMy8hDffkD/pcHh/69CGjnqJ5ZoynfBBHWZ0kSqudTlCt2lotWwNUCQIOrvrWVzwFe3a4QtnQPz/0gAbKnVe4c0Psp9E9jximBtvj4t0+FCzpaZlo7bTruA+Wtdfs1CNdm7ZpKyEIAAAABYktHRIP8tM/SAAAAB3RJTUUH5QoVBh0NInrzjgAAATtJREFUOMt902VbwzAUBeDLcAYMhru7uzPcXYcP1+EyPMkvZ03TNk0TztfzNnL7BECeCFck/JOo6BiEYuPiVX2CG9EkJsn7ZA9iSUmV9d40ZCYdICMzKzsnNy+/wASFVo+KALCR4hIGSjlQVm4BXFFZRUE1B2q8HMC4tk4D9RxoABvAjRpwuS3QJADcrIkW6witImhrD4OOTtZ7ukAEuFtboqeXjqqvH5xgQL/qoG9oeET/FQIYdQxWAGNmMT4xOTU9MyuCOVbPLywSGhEs6f3yCiFysEr7tXWiABubWu/fIiqwTRfYISqwu0fBvgoc0DlCgCjA4ZF+hWMFODllMzizgfML2l5eXfuNGd7YAARv7+4fHoPc9J/swJlnrn+Rgdc3C4SkT+vd7D8+peDr2+h/FK838Ev3D4W//wNiKCWwWalJAwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMS0xMC0yMVQwNjoyOToxMyswMDowMP1Zb/cAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjEtMTAtMjFUMDY6Mjk6MTMrMDA6MDCMBNdLAAAAAElFTkSuQmCC)](//yesifang.com)

> 这是一个openlayers矩形绘制补充包。
>
> This is an openlayers rectangle drawing supplement package. 

[中文文档](./docs/zh_CN.md)

<div align="center">
  <a href="https://nodei.co/npm/ol-rectangle-draw/"><img src="https://nodei.co/npm/ol-rectangle-draw.png?downloads=true&downloadRank=true&stars=true"></a>
</div>

## Run Simple Demo

```shell
$ git clone https://github.com/SuperYesifang/ol-rectangle-draw.git
$ cd ol-rectangle-draw
$ npm run serve
```

## Usage

`new RectangleDraw(Draw, Polygon, options?)`

### 1. Use CDN

```html
<script src="https://raw.githubusercontent.com/SuperYesifang/ol-rectangle-draw/master/dist/RectangleDraw.cdn.js"></script>
<script>
const draw = new RectangleDraw(ol.interaction.Draw, ol.geom.Polygon, {
  //...Draw constructor options
});

map.addInteraction(draw);
</script>
```



### 2. Use ESM

```js
import Draw from "ol/interaction/Draw";
import Polygon from "ol/geom/Polygon";
import RectangleDraw from "ol-rectangle-draw";

const draw = new RectangleDraw(Draw, Polygon, {
  //...Draw constructor options
})

map.addInteraction(draw);
```



## Options

| prop         | type      | description                                                  |
| ------------ | --------- | ------------------------------------------------------------ |
| `Draw`   | `Draw` | openlayers Draw interaction constructor. |
| `Polygon` | `Polygon` | openlayers Polygon geometry constructor. |
| `options`  | `object` | Draw consturctor options (without `type` and `geometryFunction`) |

---
_Source: https://npm.io/package/ol-rectangle-draw · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._