Atlaslog
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.

Last verified 2026-11-03 · Multiple versions · Cite this page
Applies to: OpenLayers 7.x ~ 9.x
Symptom
Checklist
  1. Print layer.getSource().getProjection().getCode() for every layer and compare with map.getView().getProjection().getCode().
  2. Check the extent magnitude: single or double digits are degrees, seven digits are metres.
  3. Reproject the extent with ol.proj.transformExtent(extent, 'EPSG:4326', 'EPSG:3857') and re-add the layer.
  4. Declare projection: 'EPSG:4326' on the source so OpenLayers reprojects it for you.
  5. 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
All 120 field notesChinese originalRunnable examples
English edition written for Atlaslog from the original Chinese field note. Code is unchanged and runs as-is.
Cite this page

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).