shapeDropper/shapeDropper.js at master · BeckyAndresen/shapeDropper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var source = new ol.source.Vector({wrapX: false});

var vector = new ol.layer.Vector({
    source: source
});

if (vector) {
    console.dir(source.getProjection());
}
var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:3857',
        center: [-11000000, 4600000],
        zoom: 4
    })
});

var typeSelect = document.getElementById('type');


function printCoordinates(interaction) {
    return (
        function (coordinates, opt_geometry) {
            if (opt_geometry) {

                var displayCoordinates = document.getElementById("coordinates");
                displayCoordinates.textContent = JSON.stringify(opt_geometry.getCoordinates());

            }
            return interaction(coordinates, opt_geometry);
        }
    )
}
var draw; // global so we can remove it later
function addInteraction() {
    var value = typeSelect.value;
    if (value !== 'None') {
        var geometryFunction;
        if (value === 'Square') {
            value = 'Circle';
            // interact here
            geometryFunction = printCoordinates(ol.interaction.Draw.createRegularPolygon(4));
        } else if (value === 'Triangle') {
            value = 'Circle';
            geometryFunction = printCoordinates(ol.interaction.Draw.createRegularPolygon(3));
        } else if (value === 'Hexagon') {
            value = 'Circle';
            geometryFunction = printCoordinates(ol.interaction.Draw.createRegularPolygon(6));
        } else if (value === 'Star') {
            value = 'Circle';
            geometryFunction = printCoordinates(function(coordinates, geometry) {
                if (!geometry) {
                    geometry = new ol.geom.Polygon(null);
                }
            var center = coordinates[0];
            var last = coordinates[1];
            var dx = center[0] - last[0];
            var dy = center[1] - last[1];
            var radius = Math.sqrt(dx * dx + dy * dy);
            var rotation = Math.atan2(dy, dx);
            var newCoordinates = [];
            var numPoints = 12;
            for (var i = 0; i < numPoints; ++i) {
                var angle = rotation + i * 2 * Math.PI / numPoints;
                var fraction = i % 2 === 0 ? 1 : 0.5;
                var offsetX = radius * fraction * Math.cos(angle);
                var offsetY = radius * fraction * Math.sin(angle);
                newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
            }
            newCoordinates.push(newCoordinates[0].slice());
            geometry.setCoordinates([newCoordinates]);
            return geometry;
            });
        }
        draw = new ol.interaction.Draw({
            source: source,
            type: value,
            geometryFunction: geometryFunction
        });
        map.addInteraction(draw);
    }
}


/**
 * Handle change event.
 */
typeSelect.onchange = function() {
    map.removeInteraction(draw);
    addInteraction();
};

addInteraction();