使用Leaflet地图上比例尺的值

Posted 2021-04-13

如何使用以下方式从比例尺中获取值：

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

无论它显示什么规模，如何将它分配给javascript中的变量？

答案

如果我理解正确，您希望能够在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>

以上是关于使用Leaflet地图上比例尺的值的主要内容，如果未能解决你的问题，请参考以下文章

编辑非地理地图中的比例尺

React-Leaflet在地图上绘制圆圈标记

Leaflet.js 将地图集中在一组标记上

leaflet创建简单地图

在 Openstreet 地图上移动标记 - Leaflet API

使用leaflet制作二维gis地图