1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.control');
|
4 | goog.require('ol.format.GeoJSON');
|
5 | goog.require('ol.layer.Tile');
|
6 | goog.require('ol.layer.Vector');
|
7 | goog.require('ol.source.OSM');
|
8 | goog.require('ol.source.Vector');
|
9 | goog.require('ol.style.Circle');
|
10 | goog.require('ol.style.Fill');
|
11 | goog.require('ol.style.Stroke');
|
12 | goog.require('ol.style.Style');
|
13 |
|
14 | var source = new ol.source.Vector({
|
15 | url: 'data/geojson/switzerland.geojson',
|
16 | format: new ol.format.GeoJSON()
|
17 | });
|
18 | var style = new ol.style.Style({
|
19 | fill: new ol.style.Fill({
|
20 | color: 'rgba(255, 255, 255, 0.6)'
|
21 | }),
|
22 | stroke: new ol.style.Stroke({
|
23 | color: '#319FD3',
|
24 | width: 1
|
25 | }),
|
26 | image: new ol.style.Circle({
|
27 | radius: 5,
|
28 | fill: new ol.style.Fill({
|
29 | color: 'rgba(255, 255, 255, 0.6)'
|
30 | }),
|
31 | stroke: new ol.style.Stroke({
|
32 | color: '#319FD3',
|
33 | width: 1
|
34 | })
|
35 | })
|
36 | });
|
37 | var vectorLayer = new ol.layer.Vector({
|
38 | source: source,
|
39 | style: style
|
40 | });
|
41 | var view = new ol.View({
|
42 | center: [0, 0],
|
43 | zoom: 1
|
44 | });
|
45 | var map = new ol.Map({
|
46 | layers: [
|
47 | new ol.layer.Tile({
|
48 | source: new ol.source.OSM()
|
49 | }),
|
50 | vectorLayer
|
51 | ],
|
52 | target: 'map',
|
53 | controls: ol.control.defaults({
|
54 | attributionOptions: ({
|
55 | collapsible: false
|
56 | })
|
57 | }),
|
58 | view: view
|
59 | });
|
60 |
|
61 | var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
|
62 | zoomtoswitzerlandbest.addEventListener('click', function() {
|
63 | var feature = source.getFeatures()[0];
|
64 | var polygon = (feature.getGeometry());
|
65 | view.fit(polygon, {padding: [170, 50, 30, 150], constrainResolution: false});
|
66 | }, false);
|
67 |
|
68 | var zoomtoswitzerlandconstrained =
|
69 | document.getElementById('zoomtoswitzerlandconstrained');
|
70 | zoomtoswitzerlandconstrained.addEventListener('click', function() {
|
71 | var feature = source.getFeatures()[0];
|
72 | var polygon = (feature.getGeometry());
|
73 | view.fit(polygon, {padding: [170, 50, 30, 150]});
|
74 | }, false);
|
75 |
|
76 | var zoomtoswitzerlandnearest =
|
77 | document.getElementById('zoomtoswitzerlandnearest');
|
78 | zoomtoswitzerlandnearest.addEventListener('click', function() {
|
79 | var feature = source.getFeatures()[0];
|
80 | var polygon = (feature.getGeometry());
|
81 | view.fit(polygon, {padding: [170, 50, 30, 150], nearest: true});
|
82 | }, false);
|
83 |
|
84 | var zoomtolausanne = document.getElementById('zoomtolausanne');
|
85 | zoomtolausanne.addEventListener('click', function() {
|
86 | var feature = source.getFeatures()[1];
|
87 | var point = (feature.getGeometry());
|
88 | view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
|
89 | }, false);
|
90 |
|
91 | var centerlausanne = document.getElementById('centerlausanne');
|
92 | centerlausanne.addEventListener('click', function() {
|
93 | var feature = source.getFeatures()[1];
|
94 | var point = (feature.getGeometry());
|
95 | var size = (map.getSize());
|
96 | view.centerOn(point.getCoordinates(), size, [570, 500]);
|
97 | }, false);
|