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.DragBox');
|
6 | goog.require('ol.interaction.Select');
|
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 |
|
12 |
|
13 | var vectorSource = new ol.source.Vector({
|
14 | url: 'data/geojson/countries.geojson',
|
15 | format: new ol.format.GeoJSON()
|
16 | });
|
17 |
|
18 |
|
19 | var map = new ol.Map({
|
20 | layers: [
|
21 | new ol.layer.Tile({
|
22 | source: new ol.source.OSM()
|
23 | }),
|
24 | new ol.layer.Vector({
|
25 | source: vectorSource
|
26 | })
|
27 | ],
|
28 | target: 'map',
|
29 | view: new ol.View({
|
30 | center: [0, 0],
|
31 | zoom: 2
|
32 | })
|
33 | });
|
34 |
|
35 |
|
36 | var select = new ol.interaction.Select();
|
37 | map.addInteraction(select);
|
38 |
|
39 | var selectedFeatures = select.getFeatures();
|
40 |
|
41 |
|
42 | var dragBox = new ol.interaction.DragBox({
|
43 | condition: ol.events.condition.platformModifierKeyOnly
|
44 | });
|
45 |
|
46 | map.addInteraction(dragBox);
|
47 |
|
48 | dragBox.on('boxend', function() {
|
49 |
|
50 |
|
51 | var extent = dragBox.getGeometry().getExtent();
|
52 | vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
|
53 | selectedFeatures.push(feature);
|
54 | });
|
55 | });
|
56 |
|
57 |
|
58 | dragBox.on('boxstart', function() {
|
59 | selectedFeatures.clear();
|
60 | });
|
61 |
|
62 | var infoBox = document.getElementById('info');
|
63 |
|
64 | selectedFeatures.on(['add', 'remove'], function() {
|
65 | var names = selectedFeatures.getArray().map(function(feature) {
|
66 | return feature.get('name');
|
67 | });
|
68 | if (names.length > 0) {
|
69 | infoBox.innerHTML = names.join(', ');
|
70 | } else {
|
71 | infoBox.innerHTML = 'No countries selected';
|
72 | }
|
73 | });
|