1 | ---
|
2 | layout: example.html
|
3 | title: Draw Shapes
|
4 | shortdesc: Using the ol.interaction.Draw to create regular shapes
|
5 | docs: >
|
6 | This demonstrates the use of the `geometryFunction` option for the
|
7 | `ol.interaction.Draw`. Select a shape type from the dropdown above to start
|
8 | drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
|
9 | achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
|
10 | a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
|
11 | with a `geometryFunction` that creates a box-shaped polygon instead of a
|
12 | circle. Star drawing uses a custom geometry function that coverts a circle
|
13 | into a start using the center and radius provided by the draw interaction.
|
14 | tags: "draw, edit, freehand, vector"
|
15 | ---
|
16 | <div id="map" class="map"></div>
|
17 | <form class="form-inline">
|
18 | <label>Shape type </label>
|
19 | <select id="type">
|
20 | <option value="Square">Square</option>
|
21 | <option value="Box">Box</option>
|
22 | <option value="Star">Star</option>
|
23 | <option value="None">None</option>
|
24 | </select>
|
25 | </form>
|