如何為leaflet.js設置特定比例

Question

我正在嘗試使用leaflet.js創建解決方案，以顯示平面圖和工程圖，而不是地圖。 這一切都設置了基本功能，但是從規模上來說將是很棒的。

我在github- https://github.com/nerik/leaflet-graphicscale上查看了此解決方案-效果很好。 但是我的問題是，如何調整比例以適應實際地圖。 就像計划的尺寸與比例如何相關。

這是我當前如何實現地圖的示例：

<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

就像計划的尺寸與比例如何相關。

在L.CRS.Simple ，一個屏幕像素等於縮放級別0的一個地圖單位； 以一種通用的方式，一個地圖單元等於2個^{縮放級別的}屏幕像素。

請注意，如果您運行諸如map.unproject類的map.unproject ，則會失去對坐標的控制。 閱讀有關L.CRS.Simple的教程， L.CRS.Simple獲取有關如何在此類非地理地圖中管理坐標的提示。