1 |
|
2 |
|
3 | goog.require('ol.Map');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.control');
|
6 | goog.require('ol.format.GeoJSON');
|
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 | var map = new ol.Map({
|
13 | layers: [
|
14 | new ol.layer.Tile({
|
15 | source: new ol.source.OSM()
|
16 | }),
|
17 | new ol.layer.Vector({
|
18 | source: new ol.source.Vector({
|
19 | url: 'data/geojson/countries.geojson',
|
20 | format: new ol.format.GeoJSON()
|
21 | })
|
22 | })
|
23 | ],
|
24 | target: 'map',
|
25 | controls: ol.control.defaults({
|
26 | attributionOptions: ({
|
27 | collapsible: false
|
28 | })
|
29 | }),
|
30 | view: new ol.View({
|
31 | center: [0, 0],
|
32 | zoom: 2
|
33 | })
|
34 | });
|
35 |
|
36 | document.getElementById('export-png').addEventListener('click', function() {
|
37 | map.once('postcompose', function(event) {
|
38 | var canvas = event.context.canvas;
|
39 | if (navigator.msSaveBlob) {
|
40 | navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
|
41 | } else {
|
42 | canvas.toBlob(function(blob) {
|
43 | saveAs(blob, 'map.png');
|
44 | });
|
45 | }
|
46 | });
|
47 | map.renderSync();
|
48 | });
|