javascript - 如何为leaflet.js设置特定比例

Question

我正在尝试使用 leaflet.js 创建一个解决方案来显示计划和绘图而不是 map 。基本功能都已设置完毕，但如果能按比例显示的话那就太好了。

我在 github 上查看了这个解决方案 - https://github.com/nerik/leaflet-graphicscale - 而且效果很好。但我的问题是，如何调整比例以适合我的实际 map 。比如平面图的尺寸与比例有何关系。

以下是我当前如何实现 map 的示例:

<div class="col-lg-9">
    <div id="img1" class="leafletContainer" style=""></div>
</div>

<script>
var imgWidth = 17732;
var imgHeight = 13632;

// create Map
var map = L.map('img1', {
    maxZoom: 8,
    crs: L.CRS.Simple
}).setView(new L.LatLng(0,0), 0);

var minimap1 = new Object();
var minimap_loaded = false;

var southWest = map.unproject([0, imgHeight], map.getMaxZoom());
var northEast = map.unproject([imgWidth, 0], map.getMaxZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

var image1 = {
    url :   'zoomifyTiles/hercules2/',
    width  : imgWidth,
    height : imgHeight
}

L.tileLayer.zoomify(image1.url, {
    width: image1.width,
    height: image1.height,
    tolerance: 0.7,             // initial zoom level
}).addTo(map);

var graphicScale = L.control.graphicScale({
    fill: 'fill',
    showSubunits: true,
    minUnitWidth: 30,
    maxUnitsWidth: 240,
    labelPlacement: 'auto'
}).addTo(map);

// Create Minimap
image1mini = L.tileLayer.zoomify(image1.url, {
    width: image1.width,
    height: image1.height,
    tolerance: 0.8,
    attribution: image1.credit
});

// load the mini map if it already isn't loaded
if(minimap_loaded == true) {
    minimap1.changeLayer(image1mini);
} else {
    minimap1 = new L.Control.MiniMap(image1mini, {zoomLevelOffset: -5, toggleDisplay: true}).addTo(map);
}
</script>

Answer 1

Like how do the dimensions of the plan relate to the scale.

在L.CRS.Simple中，缩放级别为0时，1个屏幕像素等于1个 map 单位；一般来说，一个 map 单位等于 2^缩放级别屏幕像素。

请注意，如果您运行 map.unproject 等内容，您将失去对坐标的控制。阅读tutorial on L.CRS.Simple有关如何管理此类非地理 map 中的坐标的提示。