1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.events.condition');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.interaction.Select');
|
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 |
|
11 | var raster = new ol.layer.Tile({
|
12 | source: new ol.source.OSM()
|
13 | });
|
14 |
|
15 | var vector = new ol.layer.Vector({
|
16 | source: new ol.source.Vector({
|
17 | url: 'data/geojson/countries.geojson',
|
18 | format: new ol.format.GeoJSON()
|
19 | })
|
20 | });
|
21 |
|
22 | var map = new ol.Map({
|
23 | layers: [raster, vector],
|
24 | target: 'map',
|
25 | view: new ol.View({
|
26 | center: [0, 0],
|
27 | zoom: 2
|
28 | })
|
29 | });
|
30 |
|
31 | var select = null;
|
32 |
|
33 |
|
34 | var selectSingleClick = new ol.interaction.Select();
|
35 |
|
36 |
|
37 | var selectClick = new ol.interaction.Select({
|
38 | condition: ol.events.condition.click
|
39 | });
|
40 |
|
41 |
|
42 | var selectPointerMove = new ol.interaction.Select({
|
43 | condition: ol.events.condition.pointerMove
|
44 | });
|
45 |
|
46 | var selectAltClick = new ol.interaction.Select({
|
47 | condition: function(mapBrowserEvent) {
|
48 | return ol.events.condition.click(mapBrowserEvent) &&
|
49 | ol.events.condition.altKeyOnly(mapBrowserEvent);
|
50 | }
|
51 | });
|
52 |
|
53 | var selectElement = document.getElementById('type');
|
54 |
|
55 | var changeInteraction = function() {
|
56 | if (select !== null) {
|
57 | map.removeInteraction(select);
|
58 | }
|
59 | var value = selectElement.value;
|
60 | if (value == 'singleclick') {
|
61 | select = selectSingleClick;
|
62 | } else if (value == 'click') {
|
63 | select = selectClick;
|
64 | } else if (value == 'pointermove') {
|
65 | select = selectPointerMove;
|
66 | } else if (value == 'altclick') {
|
67 | select = selectAltClick;
|
68 | } else {
|
69 | select = null;
|
70 | }
|
71 | if (select !== null) {
|
72 | map.addInteraction(select);
|
73 | select.on('select', function(e) {
|
74 | document.getElementById('status').innerHTML = ' ' +
|
75 | e.target.getFeatures().getLength() +
|
76 | ' selected features (last operation selected ' + e.selected.length +
|
77 | ' and deselected ' + e.deselected.length + ' features)';
|
78 | });
|
79 | }
|
80 | };
|
81 |
|
82 |
|
83 |
|
84 |
|
85 |
|
86 | selectElement.onchange = changeInteraction;
|
87 | changeInteraction();
|