Atlaslog / Field Notes / Coordinates & projections
Field note · Coordinates & projections
Two layers on different CRSs overlap half a screen apart
Quick answer
An ImageStatic overlay receives an extent in degrees while the View is EPSG:3857, so 116.0 is read as 116 metres and the image collapses into the corner. Converting the extent to metres fixes position but ImageStatic still cannot reproject, so the image is squashed.
Symptom
- A planning PNG covering 116.0 E~116.6 E, 39.7 N~40.1 N shrinks into the top-left corner, offset by most of the screen.
- With extent [12913000, 4820000, 12980000, 4865000] the position is right but the image is compressed about 1.3 times vertically at 40 N.
- The offset grows as you zoom in.
Checklist
- Print layer.getSource().getProjection().getCode() for every layer and compare with map.getView().getProjection().getCode().
- Check the extent magnitude: single or double digits are degrees, seven digits are metres.
- Reproject the extent with ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857') and re-add the layer.
- Declare projection: 'EPSG:4326' on the source so OpenLayers reprojects it for you.
- Verify at zoom levels 10, 12 and 14 that the error does not grow.
Fix
Declare each source's real CRS so OpenLayers reprojects it; for ImageStatic, which stretches rather than reprojects per pixel, transform the extent into the View projection first.
Code
console.log(view.getProjection().getCode()); // EPSG:3857
console.log(imgLayer.getSource().getProjection().getCode()); // EPSG:3857(默认)
console.log(extent); // [116, 39.7, 116.6, 40.1] 单位是度,与 3857 不匹配import { transformExtent } from 'ol/proj';
new ImageLayer({
source: new ImageStatic({
url: '/data/plan.png',
projection: 'EPSG:4326', // 关键
imageExtent: [116.0, 39.7, 116.6, 40.1]
})
});
const ext3857 = transformExtent([116.0, 39.7, 116.6, 40.1], 'EPSG:4326', 'EPSG:3857');
new ImageLayer({
source: new ImageStatic({
url: '/data/plan.png',
projection: 'EPSG:3857',
imageExtent: ext3857
})
});
new VectorLayer({
source: new VectorSource({
url: '/data/roads.geojson',
format: new GeoJSON({ dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' })
})
});
Watch out
- Multiplying the extent numbers by 111320 and assuming that converts degrees to metres at every latitude.
- Expecting ImageStatic to reproject the image itself; it only stretches it into the given extent.
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Atlaslog (2026). Two layers on different CRSs overlap half a screen apart. https://www.jingweizhi.com/en/cookbook/overlay-two-crs.html (accessed 2026-11-03).