Question

如何使用以下方法获取比例尺中的值：

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

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

Answer 1

如果我理解正确，您希望能够在Leaflet Scale Control上检索显示的值，以便您可以在其他地方（通过页面JavaScript）重复使用它。

您最想要的是将屏幕上的已知像素距离转换为其在给定纬度处的地理距离。

您可以轻松实现此目的，而无需使用Scale Control：您可以使用map conversion methods，通常是containerPointToLatLng的序列（对于已知像素距离分隔的2个点）和distanceTo（在2个找到的latLng坐标之间），如Preciseness of leaflet measurement conversions中所做，并在Leaflet Scale Control的_update内部方法中实现：

_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);
}

实例：

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>

现在，如果您想利用Scale Control内置的舍入功能，您可以简单地“挂钩”并提取其计算值。我们的想法是自定义其更新内部方法，以便它调用您需要的任何应用程序更新功能。我们还可以在地图上发布一个新的专用活动并收听它：

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>

使用Leaflet地图上比例尺的值

1 个答案: