diff --git a/examples/projection-and-scale.html b/examples/projection-and-scale.html new file mode 100644 index 0000000000..e98f25d8fd --- /dev/null +++ b/examples/projection-and-scale.html @@ -0,0 +1,18 @@ +--- +layout: example.html +title: Projection and Scale +shortdesc: Example of maintaining scale when changing projection. +docs: > + Example of maintaining scale when changing projection. + `getPointResolution()` is used to calculate the resolution for the + new projection which corresponds to that for the old projection. +tags: "projection, scale" +--- +
+
+ + +
diff --git a/examples/projection-and-scale.js b/examples/projection-and-scale.js new file mode 100644 index 0000000000..e32cb3bcaf --- /dev/null +++ b/examples/projection-and-scale.js @@ -0,0 +1,68 @@ +import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; +import { + getPointResolution, + get as getProjection, + transform, +} from '../src/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 currentPointResolution = getPointResolution( + currentProjection, + 1, + currentCenter, + 'm' + ); + const newPointResolution = getPointResolution( + newProjection, + 1, + newCenter, + 'm' + ); + const newResolution = + (currentResolution * currentPointResolution) / newPointResolution; + const newView = new View({ + center: newCenter, + resolution: newResolution, + rotation: currentRotation, + projection: newProjection, + }); + map.setView(newView); +} +viewProjSelect.addEventListener('change', onChangeProjection);