使用传单地图上比例尺的值

Question

如何从添加的比例尺中获取值：

L.control.scale({position: 'bottomleft'}).addTo(map);  

无论它显示什么比例，如何将其分配给 JavaScript 中的变量？

Answer 1

If I understand correctly, you would like to be able to retrieve the displayed values on the Leaflet Scale Control, so that you can re-use it somewhere else (through your page JavaScript).

Most probably what you want is to convert a known pixels distance on screen to its representing geographical distance at a given latitude.

You can easily achieve this without having to use the Scale Control at all: you can use map conversion methods, typically a sequence of containerPointToLatLng (for 2 points separated by a known pixels distance) and distanceTo (between the 2 found latLng coordinates), as done in Preciseness of leaflet measurement conversions and as implemented in Leaflet Scale Control's _update internal method:

_update: function() {
  var map = this._map,
    y = map.getSize().y / 2;

  var maxMeters = map.distance(
    map.containerPointToLatLng([0, y]),
    map.containerPointToLatLng([this.options.maxWidth, y]));

  this._updateScales(maxMeters);
}

Live example:

var map = L.map('map').setView([48.86, 2.35], 11);

map.on('moveend', computeScale); // Also fires when zoom changes.
computeScale();

function computeScale() {
  var mapZoom = map.getZoom(),
      latitude = getContainerMidHeightLatitude(),
      distance = pixelsToMetricDistance(100).toFixed(2);
      
  alert(
      'At zoom ' + mapZoom
      + ' and latitude ' + latitude
      + ', 100 pixels represent about ' + distance + ' meters'
  );
}

function pixelsToMetricDistance(pixelsDistance) {
  var containerMidHeight = map.getSize().y / 2,
      point1 = map.containerPointToLatLng([0, containerMidHeight]),
      point2 = map.containerPointToLatLng([pixelsDistance, containerMidHeight]);

  return point1.distanceTo(point2);
}

function getContainerMidHeightLatitude() {
  var containerMidHeight = map.getSize().y / 2,
      point = map.containerPointToLatLng([0, containerMidHeight]);
  
  return point.lat.toFixed(6);
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

Now if you want to take advantage of the Scale Control built-in rounding feature, you could simply "hook" into it and extract its computed values. The idea would be to customize its updating internal method, so that it calls whatever app updating function you need. We could also fire a new dedicated event on the map and listen to it:

var map = L.map('map').setView([48.86, 2.35], 11);

L.Control.Scale.include({
  _originalUpdateScale: L.Control.Scale.prototype._updateScale,
  // https://github.com/Leaflet/Leaflet/blob/v1.3.1/src/control/Control.Scale.js#L109-L112
  _updateScale: function(scale, text, ratio) {
    this._originalUpdateScale.call(this, scale, text, ratio);
    this._map.fire('scaleupdate', {
      pixels: scale.style.width,
      distance: text
    });
  }
});

var scaleControl = L.control.scale({
  position: 'bottomleft'
});

map.on('scaleupdate', function(event) {
  alert(event.pixels + ' represent about ' + event.distance);
});

scaleControl.addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>