ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #11753 from mike-000/patch-15

Browse Source 
Use Mode.LINE_STRING in Draw interaction for Circle geometries
This commit is contained in:
Andreas Hocevar
2020-11-25 13:47:17 +01:00
committed by GitHub
parent ab0b24b0da 919c711756
commit 7b5f53753b
4 changed files with 210 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
examples/draw-shapes.html
View File

@@ -9,18 +9,19 @@ docs: >
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 coverts a circle
into a start using the center and radius provided by the draw interaction.
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 &nbsp;</label>
<select id="type">
<label for="type">Shape type: &nbsp;</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>

48
examples/draw-shapes.js
View File

@@ -43,28 +43,30 @@ function addInteraction() {
} else if (value === 'Star') {
value = 'Circle';
geometryFunction = function (coordinates, geometry) {
const center = coordinates[0];
const last = coordinates[1];
const dx = center[0] - last[0];
const dy = center[1] - last[1];
const radius = Math.sqrt(dx * dx + dy * dy);
const rotation = Math.atan2(dy, dx);
const newCoordinates = [];
const numPoints = 12;
for (let i = 0; i < numPoints; ++i) {
const angle = rotation + (i * 2 * Math.PI) / numPoints;
const fraction = i % 2 === 0 ? 1 : 0.5;
const offsetX = radius * fraction * Math.cos(angle);
const offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
if (coordinates.length) {
const center = coordinates[0];
const last = coordinates[coordinates.length - 1];
const dx = center[0] - last[0];
const dy = center[1] - last[1];
const radius = Math.sqrt(dx * dx + dy * dy);
const rotation = Math.atan2(dy, dx);
const newCoordinates = [];
const numPoints = 12;
for (let i = 0; i < numPoints; ++i) {
const angle = rotation + (i * 2 * Math.PI) / numPoints;
const fraction = i % 2 === 0 ? 1 : 0.5;
const offsetX = radius * fraction * Math.cos(angle);
const offsetY = radius * fraction * Math.sin(angle);
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
}
newCoordinates.push(newCoordinates[0].slice());
if (!geometry) {
geometry = new Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
}
newCoordinates.push(newCoordinates[0].slice());
if (!geometry) {
geometry = new Polygon([newCoordinates]);
} else {
geometry.setCoordinates([newCoordinates]);
}
return geometry;
};
}
draw = new Draw({
@@ -84,4 +86,8 @@ typeSelect.onchange = function () {
addInteraction();
};
document.getElementById('undo').addEventListener('click', function () {
draw.removeLastPoint();
});
addInteraction();