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.Snap');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.source.OSM');
|
9 | goog.require('ol.source.Vector');
|
10 | goog.require('ol.style.Circle');
|
11 | goog.require('ol.style.Fill');
|
12 | goog.require('ol.style.Stroke');
|
13 | goog.require('ol.style.Style');
|
14 |
|
15 | var raster = new ol.layer.Tile({
|
16 | source: new ol.source.OSM()
|
17 | });
|
18 |
|
19 | var source = new ol.source.Vector();
|
20 | var vector = new ol.layer.Vector({
|
21 | source: source,
|
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 = new ol.interaction.Modify({source: source});
|
49 | map.addInteraction(modify);
|
50 |
|
51 | var draw, snap;
|
52 | var typeSelect = document.getElementById('type');
|
53 |
|
54 | function addInteractions() {
|
55 | draw = new ol.interaction.Draw({
|
56 | source: source,
|
57 | type: (typeSelect.value)
|
58 | });
|
59 | map.addInteraction(draw);
|
60 | snap = new ol.interaction.Snap({source: source});
|
61 | map.addInteraction(snap);
|
62 |
|
63 | }
|
64 |
|
65 |
|
66 |
|
67 |
|
68 | typeSelect.onchange = function() {
|
69 | map.removeInteraction(draw);
|
70 | map.removeInteraction(snap);
|
71 | addInteractions();
|
72 | };
|
73 |
|
74 | addInteractions();
|