1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
| import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import {ScaleLine, defaults as defaultControls} from 'ol/control.js';
import {
getPointResolution,
get as getProjection,
transform,
} from 'ol/proj.js';
const viewProjSelect = document.getElementById('view-projection');
const projection = getProjection(viewProjSelect.value);
const scaleControl = new ScaleLine({
units: 'metric',
bar: true,
steps: 4,
text: true,
minWidth: 140,
});
const map = new Map({
controls: defaultControls().extend([scaleControl]),
layers: [
new TileLayer({
source: new OSM(),
}),
],
target: 'map',
view: new View({
center: transform([0, 52], 'EPSG:4326', projection),
zoom: 6,
projection: projection,
}),
});
function onChangeProjection() {
const currentView = map.getView();
const currentProjection = currentView.getProjection();
const newProjection = getProjection(viewProjSelect.value);
const currentResolution = currentView.getResolution();
const currentCenter = currentView.getCenter();
const currentRotation = currentView.getRotation();
const newCenter = transform(currentCenter, currentProjection, newProjection);
const currentMPU = currentProjection.getMetersPerUnit();
const newMPU = newProjection.getMetersPerUnit();
const currentPointResolution =
getPointResolution(currentProjection, 1 / currentMPU, currentCenter, 'm') *
currentMPU;
const newPointResolution =
getPointResolution(newProjection, 1 / newMPU, newCenter, 'm') * newMPU;
const newResolution =
(currentResolution * currentPointResolution) / newPointResolution;
const newView = new View({
center: newCenter,
resolution: newResolution,
rotation: currentRotation,
projection: newProjection,
});
map.setView(newView);
}
viewProjSelect.addEventListener('change', onChangeProjection);
|
)
