1 | goog.require('ol.Map');
|
2 | goog.require('ol.View');
|
3 | goog.require('ol.extent');
|
4 | goog.require('ol.layer.Tile');
|
5 | goog.require('ol.proj');
|
6 | goog.require('ol.source.OSM');
|
7 | goog.require('ol.source.TileImage');
|
8 |
|
9 |
|
10 | var map = new ol.Map({
|
11 | layers: [
|
12 | new ol.layer.Tile({
|
13 | source: new ol.source.OSM()
|
14 | })
|
15 | ],
|
16 | target: 'map',
|
17 | view: new ol.View({
|
18 | projection: 'EPSG:3857',
|
19 | center: [0, 0],
|
20 | zoom: 1
|
21 | })
|
22 | });
|
23 |
|
24 |
|
25 | var queryInput = document.getElementById('epsg-query');
|
26 | var searchButton = document.getElementById('epsg-search');
|
27 | var resultSpan = document.getElementById('epsg-result');
|
28 | var renderEdgesCheckbox = document.getElementById('render-edges');
|
29 |
|
30 | function setProjection(code, name, proj4def, bbox) {
|
31 | if (code === null || name === null || proj4def === null || bbox === null) {
|
32 | resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
|
33 | map.setView(new ol.View({
|
34 | projection: 'EPSG:3857',
|
35 | center: [0, 0],
|
36 | zoom: 1
|
37 | }));
|
38 | return;
|
39 | }
|
40 |
|
41 | resultSpan.innerHTML = '(' + code + ') ' + name;
|
42 |
|
43 | var newProjCode = 'EPSG:' + code;
|
44 | proj4.defs(newProjCode, proj4def);
|
45 | var newProj = ol.proj.get(newProjCode);
|
46 | var fromLonLat = ol.proj.getTransform('EPSG:4326', newProj);
|
47 |
|
48 |
|
49 | var extent = ol.extent.applyTransform(
|
50 | [bbox[1], bbox[2], bbox[3], bbox[0]], fromLonLat);
|
51 | newProj.setExtent(extent);
|
52 | var newView = new ol.View({
|
53 | projection: newProj
|
54 | });
|
55 | map.setView(newView);
|
56 | newView.fit(extent);
|
57 | }
|
58 |
|
59 |
|
60 | function search(query) {
|
61 | resultSpan.innerHTML = 'Searching ...';
|
62 | fetch('https://epsg.io/?format=json&q=' + query).then(function(response) {
|
63 | return response.json();
|
64 | }).then(function(json) {
|
65 | var results = json['results'];
|
66 | if (results && results.length > 0) {
|
67 | for (var i = 0, ii = results.length; i < ii; i++) {
|
68 | var result = results[i];
|
69 | if (result) {
|
70 | var code = result['code'], name = result['name'],
|
71 | proj4def = result['proj4'], bbox = result['bbox'];
|
72 | if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
|
73 | bbox && bbox.length == 4) {
|
74 | setProjection(code, name, proj4def, bbox);
|
75 | return;
|
76 | }
|
77 | }
|
78 | }
|
79 | }
|
80 | setProjection(null, null, null, null);
|
81 | });
|
82 | }
|
83 |
|
84 |
|
85 |
|
86 |
|
87 |
|
88 |
|
89 | searchButton.onclick = function(event) {
|
90 | search(queryInput.value);
|
91 | event.preventDefault();
|
92 | };
|
93 |
|
94 |
|
95 |
|
96 |
|
97 |
|
98 | renderEdgesCheckbox.onchange = function() {
|
99 | map.getLayers().forEach(function(layer) {
|
100 | if (layer instanceof ol.layer.Tile) {
|
101 | var source = layer.getSource();
|
102 | if (source instanceof ol.source.TileImage) {
|
103 | source.setRenderReprojectionEdges(renderEdgesCheckbox.checked);
|
104 | }
|
105 | }
|
106 | });
|
107 | };
|