1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.interaction.Draw');
|
4 | goog.require('ol.interaction.Modify');
|
5 | goog.require('ol.interaction.Select');
|
6 | goog.require('ol.interaction.Snap');
|
7 | goog.require('ol.layer.Tile');
|
8 | goog.require('ol.layer.Vector');
|
9 | goog.require('ol.source.OSM');
|
10 | goog.require('ol.source.Vector');
|
11 | goog.require('ol.style.Circle');
|
12 | goog.require('ol.style.Fill');
|
13 | goog.require('ol.style.Stroke');
|
14 | goog.require('ol.style.Style');
|
15 |
|
16 | var raster = new ol.layer.Tile({
|
17 | source: new ol.source.OSM()
|
18 | });
|
19 |
|
20 | var vector = new ol.layer.Vector({
|
21 | source: new ol.source.Vector(),
|
22 | style: new ol.style.Style({
|
23 | fill: new ol.style.Fill({
|
24 | color: 'rgba(255, 255, 255, 0.2)'
|
25 | }),
|
26 | stroke: new ol.style.Stroke({
|
27 | color: '#ffcc33',
|
28 | width: 2
|
29 | }),
|
30 | image: new ol.style.Circle({
|
31 | radius: 7,
|
32 | fill: new ol.style.Fill({
|
33 | color: '#ffcc33'
|
34 | })
|
35 | })
|
36 | })
|
37 | });
|
38 |
|
39 | var map = new ol.Map({
|
40 | layers: [raster, vector],
|
41 | target: 'map',
|
42 | view: new ol.View({
|
43 | center: [-11000000, 4600000],
|
44 | zoom: 4
|
45 | })
|
46 | });
|
47 |
|
48 | var Modify = {
|
49 | init: function() {
|
50 | this.select = new ol.interaction.Select();
|
51 | map.addInteraction(this.select);
|
52 |
|
53 | this.modify = new ol.interaction.Modify({
|
54 | features: this.select.getFeatures()
|
55 | });
|
56 | map.addInteraction(this.modify);
|
57 |
|
58 | this.setEvents();
|
59 | },
|
60 | setEvents: function() {
|
61 | var selectedFeatures = this.select.getFeatures();
|
62 |
|
63 | this.select.on('change:active', function() {
|
64 | selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);
|
65 | });
|
66 | },
|
67 | setActive: function(active) {
|
68 | this.select.setActive(active);
|
69 | this.modify.setActive(active);
|
70 | }
|
71 | };
|
72 | Modify.init();
|
73 |
|
74 | var optionsForm = document.getElementById('options-form');
|
75 |
|
76 | var Draw = {
|
77 | init: function() {
|
78 | map.addInteraction(this.Point);
|
79 | this.Point.setActive(false);
|
80 | map.addInteraction(this.LineString);
|
81 | this.LineString.setActive(false);
|
82 | map.addInteraction(this.Polygon);
|
83 | this.Polygon.setActive(false);
|
84 | map.addInteraction(this.Circle);
|
85 | this.Circle.setActive(false);
|
86 | },
|
87 | Point: new ol.interaction.Draw({
|
88 | source: vector.getSource(),
|
89 | type: 'Point'
|
90 | }),
|
91 | LineString: new ol.interaction.Draw({
|
92 | source: vector.getSource(),
|
93 | type: 'LineString'
|
94 | }),
|
95 | Polygon: new ol.interaction.Draw({
|
96 | source: vector.getSource(),
|
97 | type: 'Polygon'
|
98 | }),
|
99 | Circle: new ol.interaction.Draw({
|
100 | source: vector.getSource(),
|
101 | type: 'Circle'
|
102 | }),
|
103 | getActive: function() {
|
104 | return this.activeType ? this[this.activeType].getActive() : false;
|
105 | },
|
106 | setActive: function(active) {
|
107 | var type = optionsForm.elements['draw-type'].value;
|
108 | if (active) {
|
109 | this.activeType && this[this.activeType].setActive(false);
|
110 | this[type].setActive(true);
|
111 | this.activeType = type;
|
112 | } else {
|
113 | this.activeType && this[this.activeType].setActive(false);
|
114 | this.activeType = null;
|
115 | }
|
116 | }
|
117 | };
|
118 | Draw.init();
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | optionsForm.onchange = function(e) {
|
126 | var type = e.target.getAttribute('name');
|
127 | var value = e.target.value;
|
128 | if (type == 'draw-type') {
|
129 | Draw.getActive() && Draw.setActive(true);
|
130 | } else if (type == 'interaction') {
|
131 | if (value == 'modify') {
|
132 | Draw.setActive(false);
|
133 | Modify.setActive(true);
|
134 | } else if (value == 'draw') {
|
135 | Draw.setActive(true);
|
136 | Modify.setActive(false);
|
137 | }
|
138 | }
|
139 | };
|
140 |
|
141 | Draw.setActive(true);
|
142 | Modify.setActive(false);
|
143 |
|
144 |
|
145 |
|
146 |
|
147 | var snap = new ol.interaction.Snap({
|
148 | source: vector.getSource()
|
149 | });
|
150 | map.addInteraction(snap);
|