Custom CRS: How to get the leaflet scale control to display mm (millimeter) and um (micrometer)

问题

Is there anyway to get leaflet to display values smaller than a meter? For instance, mm (millimeter), or um (micrometer) on the scale control?

Or if there is a plugin that does this?

I have a custom map with a custom CRS that uses virtual microscopy images.

I use the following code to create a map with values less than a meter however the scale control is really wide and doesn't go below a meter:

L.CRS.Meters = L.extend(L.CRS, {
    projection: L.extend( L.Projection.LonLat, {
      bounds: L.bounds([0, 0], [2160, 4096])
    }),
    transformation: new L.Transformation(1, 0, -1, 0),
    scale: function (zoom) {
        return Math.pow(2, zoom);
    },
    infinite: false
});

var customCRS = L.extend(L.CRS.Simple, {
  projection: L.extend( L.Projection.LonLat, {
     bounds: L.bounds([0, 0], [2160, 4096])
  }),
  transformation: new L.Transformation(1, 0, 1, 0),
  scale: function (zoom) {
    return Math.pow(2, zoom +7);
  },
  infinite: false
});

var map = L.map('vm', { zoomSnap: 0.2, crs: customCRS}).setView([3, 3], 3);

回答1:

The specific piece of code that handles the rounding of the scale bar measurement and the (metric) units is the _updateMetric method:

_updateMetric: function (maxMeters) {
    var meters = this._getRoundNum(maxMeters),
        label = meters < 1000 ? meters + ' m' : (meters / 1000) + ' km';

    this._updateScale(this._mScale, label, meters / maxMeters);
},

Note that the implementation of this._getRoundNum() will return an integer number, i.e. 1 minimum.

You might want to replace the implementation of _updateMetric(), to round up a factor of that number, and apply unit suffixes accordingly, e.g.:

L.Control.Scale.include({
  _updateMetric: function(maxMeters) {
    var maxMilliMeters = maxMeters * 1000,
        milliMeters = this._getRoundNum(maxMilliMeters),
        label = milliMeters < 1000 ? milliMeters + " mm" : milliMeters / 1000 + " m";

    console.log(this._mScale, label, milliMeters / maxMilliMeters);

    this._updateScale(this._mScale, label, milliMeters / maxMilliMeters);
  }
});

See a working example here.

来源：https://stackoverflow.com/questions/55874278/custom-crs-how-to-get-the-leaflet-scale-control-to-display-mm-millimeter-and

标签

leaflet