如何設置leaflet.js的具體比例

我想創建一個解決方案，使用leaflet.js來顯示計劃和圖紙，而不是地圖。它所設置的基本功能，但是對於顯示器的縮放來說非常棒。如何設置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>

來源

2016-03-01 AnuragBabaresco

怎麼樣做計劃的尺寸涉及到規模。

在L.CRS.Simple中，一個屏幕像素等於縮放級別爲0的一個地圖單位;以一般化的方式，一個地圖單元等於2個^縮放級別屏幕像素。

請注意，如果您運行諸如map.unproject之類的東西，則將失去對座標的控制。閱讀tutorial on L.CRS.Simple，瞭解如何管理這些非地理地圖中的座標。

來源

2016-03-02 09:47:44 IvanSanchez

感謝您輸入@ivansanchez - 我會看看教程。 – AnuragBabaresco

如何設置leaflet.js的具體比例

回答

相關問題