1

I am trying to set-up a CRS.Simple Coordinate Reference System with a custom transformation. I got a real world construction plan with

  • scale of 1:500
  • width 11112px
  • height 10432px
  • density 288

I tiled it using sharp/libvips with a tilesize of 256. I get the folder output with zoom levels 0 to 6 and a density of 96

Here is my approach I tried, somewhat unsucessfully, the measurement is some meters off and I cant figure out which values to change

  const heigth = 10432;
  const width = 11112;
  const density = 288;
  const tileSize = 256;
  const scaleFactor = 500;

  const mapMinZoom = 0;
  const mapMaxZoom = 7;
  const mapMaxResolution = 1;
  const mapMinResolution = Math.pow(2, mapMaxZoom) * mapMaxResolution;

  const crs = L.CRS.Simple;

  const dpiX = (tileSize / width * Math.pow(2, mapMaxZoom)) * density;
  const dpiY = (tileSize / heigth * Math.pow(2, mapMaxZoom)) * density;

  const factorX = 1 / (1 / dpiX * 2.54 * scaleFactor / 100);
  const factorY = 1 / (1 / dpiY * 2.54 * scaleFactor / 100);

  // @ts-ignore
  crs.transformation = new L.Transformation(factorX, 0, factorY, 0);
  crs.scale = function (zoom) {
    return Math.pow(2, zoom) / mapMinResolution;
  };
  crs.zoom = function (scale) {
    return Math.log(scale * mapMinResolution) / Math.LN2;
  };

  this.map = L.map('map', {
    crs: crs,
  });

  L.tileLayer('http://localhost:3000/{z}/{y}/{x}.jpg', {
    tileSize: 256,
    minZoom: mapMinZoom, maxZoom: mapMaxZoom,
    noWrap: true,
    tms: false
  }).addTo(this.map);
2
  • Ugh, a "1:500" scale is not really useful when all you have is a screen instead of a piece of paper. What's the size of your ideal pixel, 0.26mm, 0.24mm, or something else? Take a couple of control points, measure their distances in both pixels and meters. Apr 4 at 21:50
  • Sorry, I don't understand your reply. I can measure the distance of 2 points I know the real length of (25m) which is 568.1px divided by the dpi (288) I get 1.9725inch converting to cm 5.010 applying the 1:500 scale I get the correct (or almost) value of 25.05m. Now I need to tell leaflet how to scale it properly
    – Beig
    Apr 5 at 5:44

1 Answer 1

0

I found the solution

// dpi = dpi of original image
const factor = 1 / (1 / dpi * 2.54 * scaleFactor / 100);
crs.transformation = new L.Transformation(factor , 0, factor , 0);

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.