1 | goog.require('ol.Map');
|
2 | goog.require('ol.Observable');
|
3 | goog.require('ol.Overlay');
|
4 | goog.require('ol.Sphere');
|
5 | goog.require('ol.View');
|
6 | goog.require('ol.geom.LineString');
|
7 | goog.require('ol.geom.Polygon');
|
8 | goog.require('ol.interaction.Draw');
|
9 | goog.require('ol.layer.Tile');
|
10 | goog.require('ol.layer.Vector');
|
11 | goog.require('ol.source.OSM');
|
12 | goog.require('ol.source.Vector');
|
13 | goog.require('ol.style.Circle');
|
14 | goog.require('ol.style.Fill');
|
15 | goog.require('ol.style.Stroke');
|
16 | goog.require('ol.style.Style');
|
17 |
|
18 |
|
19 | var raster = new ol.layer.Tile({
|
20 | source: new ol.source.OSM()
|
21 | });
|
22 |
|
23 | var source = new ol.source.Vector();
|
24 |
|
25 | var vector = new ol.layer.Vector({
|
26 | source: source,
|
27 | style: new ol.style.Style({
|
28 | fill: new ol.style.Fill({
|
29 | color: 'rgba(255, 255, 255, 0.2)'
|
30 | }),
|
31 | stroke: new ol.style.Stroke({
|
32 | color: '#ffcc33',
|
33 | width: 2
|
34 | }),
|
35 | image: new ol.style.Circle({
|
36 | radius: 7,
|
37 | fill: new ol.style.Fill({
|
38 | color: '#ffcc33'
|
39 | })
|
40 | })
|
41 | })
|
42 | });
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | var sketch;
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | var helpTooltipElement;
|
57 |
|
58 |
|
59 |
|
60 |
|
61 |
|
62 |
|
63 | var helpTooltip;
|
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 |
|
70 | var measureTooltipElement;
|
71 |
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | var measureTooltip;
|
78 |
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | var continuePolygonMsg = 'Click to continue drawing the polygon';
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | var continueLineMsg = 'Click to continue drawing the line';
|
92 |
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | var pointerMoveHandler = function(evt) {
|
99 | if (evt.dragging) {
|
100 | return;
|
101 | }
|
102 |
|
103 | var helpMsg = 'Click to start drawing';
|
104 |
|
105 | if (sketch) {
|
106 | var geom = (sketch.getGeometry());
|
107 | if (geom instanceof ol.geom.Polygon) {
|
108 | helpMsg = continuePolygonMsg;
|
109 | } else if (geom instanceof ol.geom.LineString) {
|
110 | helpMsg = continueLineMsg;
|
111 | }
|
112 | }
|
113 |
|
114 | helpTooltipElement.innerHTML = helpMsg;
|
115 | helpTooltip.setPosition(evt.coordinate);
|
116 |
|
117 | helpTooltipElement.classList.remove('hidden');
|
118 | };
|
119 |
|
120 |
|
121 | var map = new ol.Map({
|
122 | layers: [raster, vector],
|
123 | target: 'map',
|
124 | view: new ol.View({
|
125 | center: [-11000000, 4600000],
|
126 | zoom: 15
|
127 | })
|
128 | });
|
129 |
|
130 | map.on('pointermove', pointerMoveHandler);
|
131 |
|
132 | map.getViewport().addEventListener('mouseout', function() {
|
133 | helpTooltipElement.classList.add('hidden');
|
134 | });
|
135 |
|
136 | var typeSelect = document.getElementById('type');
|
137 |
|
138 | var draw;
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 | var formatLength = function(line) {
|
147 | var length = ol.Sphere.getLength(line);
|
148 | var output;
|
149 | if (length > 100) {
|
150 | output = (Math.round(length / 1000 * 100) / 100) +
|
151 | ' ' + 'km';
|
152 | } else {
|
153 | output = (Math.round(length * 100) / 100) +
|
154 | ' ' + 'm';
|
155 | }
|
156 | return output;
|
157 | };
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 | var formatArea = function(polygon) {
|
166 | var area = ol.Sphere.getArea(polygon);
|
167 | var output;
|
168 | if (area > 10000) {
|
169 | output = (Math.round(area / 1000000 * 100) / 100) +
|
170 | ' ' + 'km<sup>2</sup>';
|
171 | } else {
|
172 | output = (Math.round(area * 100) / 100) +
|
173 | ' ' + 'm<sup>2</sup>';
|
174 | }
|
175 | return output;
|
176 | };
|
177 |
|
178 | function addInteraction() {
|
179 | var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
|
180 | draw = new ol.interaction.Draw({
|
181 | source: source,
|
182 | type: type,
|
183 | style: new ol.style.Style({
|
184 | fill: new ol.style.Fill({
|
185 | color: 'rgba(255, 255, 255, 0.2)'
|
186 | }),
|
187 | stroke: new ol.style.Stroke({
|
188 | color: 'rgba(0, 0, 0, 0.5)',
|
189 | lineDash: [10, 10],
|
190 | width: 2
|
191 | }),
|
192 | image: new ol.style.Circle({
|
193 | radius: 5,
|
194 | stroke: new ol.style.Stroke({
|
195 | color: 'rgba(0, 0, 0, 0.7)'
|
196 | }),
|
197 | fill: new ol.style.Fill({
|
198 | color: 'rgba(255, 255, 255, 0.2)'
|
199 | })
|
200 | })
|
201 | })
|
202 | });
|
203 | map.addInteraction(draw);
|
204 |
|
205 | createMeasureTooltip();
|
206 | createHelpTooltip();
|
207 |
|
208 | var listener;
|
209 | draw.on('drawstart',
|
210 | function(evt) {
|
211 |
|
212 | sketch = evt.feature;
|
213 |
|
214 |
|
215 | var tooltipCoord = evt.coordinate;
|
216 |
|
217 | listener = sketch.getGeometry().on('change', function(evt) {
|
218 | var geom = evt.target;
|
219 | var output;
|
220 | if (geom instanceof ol.geom.Polygon) {
|
221 | output = formatArea(geom);
|
222 | tooltipCoord = geom.getInteriorPoint().getCoordinates();
|
223 | } else if (geom instanceof ol.geom.LineString) {
|
224 | output = formatLength(geom);
|
225 | tooltipCoord = geom.getLastCoordinate();
|
226 | }
|
227 | measureTooltipElement.innerHTML = output;
|
228 | measureTooltip.setPosition(tooltipCoord);
|
229 | });
|
230 | }, this);
|
231 |
|
232 | draw.on('drawend',
|
233 | function() {
|
234 | measureTooltipElement.className = 'tooltip tooltip-static';
|
235 | measureTooltip.setOffset([0, -7]);
|
236 |
|
237 | sketch = null;
|
238 |
|
239 | measureTooltipElement = null;
|
240 | createMeasureTooltip();
|
241 | ol.Observable.unByKey(listener);
|
242 | }, this);
|
243 | }
|
244 |
|
245 |
|
246 |
|
247 |
|
248 |
|
249 | function createHelpTooltip() {
|
250 | if (helpTooltipElement) {
|
251 | helpTooltipElement.parentNode.removeChild(helpTooltipElement);
|
252 | }
|
253 | helpTooltipElement = document.createElement('div');
|
254 | helpTooltipElement.className = 'tooltip hidden';
|
255 | helpTooltip = new ol.Overlay({
|
256 | element: helpTooltipElement,
|
257 | offset: [15, 0],
|
258 | positioning: 'center-left'
|
259 | });
|
260 | map.addOverlay(helpTooltip);
|
261 | }
|
262 |
|
263 |
|
264 |
|
265 |
|
266 |
|
267 | function createMeasureTooltip() {
|
268 | if (measureTooltipElement) {
|
269 | measureTooltipElement.parentNode.removeChild(measureTooltipElement);
|
270 | }
|
271 | measureTooltipElement = document.createElement('div');
|
272 | measureTooltipElement.className = 'tooltip tooltip-measure';
|
273 | measureTooltip = new ol.Overlay({
|
274 | element: measureTooltipElement,
|
275 | offset: [0, -15],
|
276 | positioning: 'bottom-center'
|
277 | });
|
278 | map.addOverlay(measureTooltip);
|
279 | }
|
280 |
|
281 |
|
282 |
|
283 |
|
284 |
|
285 | typeSelect.onchange = function() {
|
286 | map.removeInteraction(draw);
|
287 | addInteraction();
|
288 | };
|
289 |
|
290 | addInteraction();
|