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 ^zoomlevel屏幕像素。

请注意，如果您运行map.unproject之类的内容，则会失去对坐标的控制权。请阅读tutorial on L.CRS.Simple，了解如何管理这些非地理地图中的坐标。

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

1 个答案: