f8df533cb0
Make predefined geometry functions compatible with removeLastPoint Add undo to example Make geometry function for Star compatible with use of removeLastPoint Additional createRegularPolygon tests
28 lines
1.2 KiB
HTML
28 lines
1.2 KiB
HTML
---
|
|
layout: example.html
|
|
title: Draw Shapes
|
|
shortdesc: Using the ol/interaction/Draw to create regular shapes
|
|
docs: >
|
|
This demonstrates the use of the `geometryFunction` option for the
|
|
`ol/interaction/Draw`. Select a shape type from the dropdown above to start
|
|
drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
|
|
achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
|
|
a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
|
|
with a `geometryFunction` that creates a box-shaped polygon instead of a
|
|
circle. Star drawing uses a custom geometry function that converts a circle
|
|
into a star using the center and radius provided by the draw interaction.
|
|
tags: "draw, edit, freehand, vector"
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<form class="form-inline">
|
|
<label for="type">Shape type: </label>
|
|
<select class="form-control mr-2 mb-2 mt-2" id="type">
|
|
<option value="Circle">Circle</option>
|
|
<option value="Square">Square</option>
|
|
<option value="Box">Box</option>
|
|
<option value="Star">Star</option>
|
|
<option value="None">None</option>
|
|
</select>
|
|
<input class="form-control mr-2 mb-2 mt-2" type="button" value="Undo" id="undo">
|
|
</form>
|