34 lines
1.4 KiB
HTML
34 lines
1.4 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"
|
|
resources:
|
|
- https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
|
|
---
|
|
<div id="map" class="map"></div>
|
|
<div class="row">
|
|
<div class="col-auto">
|
|
<span class="input-group">
|
|
<label class="input-group-text" for="type">Shape type:</label>
|
|
<select class="form-select" 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" type="button" value="Undo" id="undo">
|
|
</span>
|
|
</div>
|
|
</div>
|