本示例演示改变投影坐标系的时候保持比例尺.
本示例演示改变投影坐标系的时候保持比例尺。
getPointResolution()
用于计算与旧投影对应的新投影的分辨率。
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);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Projection and Scale</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<div>
<label for="view-projection">View projection</label>
<select id="view-projection">
<option value="EPSG:3857">Spherical Mercator (EPSG:3857)</option>
<option value="EPSG:4326" selected>WGS 84 (EPSG:4326)</option>
</select>
</div>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="./resources/elm-pep.js"></script>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "projection-and-scale",
"dependencies": {
"ol": "7.3.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}