HTML
<!-- 比例尺 -->
<div>
<span class="scaleShowValue">1m</span>
<div class="scaleShow" style="display:inline-block;width: 100px;height: 6px;
border-bottom: 2px solid #666;border-left: 2px solid #666;
border-right: 2px solid #666;"></div>
</div>
js
/**
* 计算比例尺
* @param {Number} _scale 缩放倍数
* @param {Number} trimSize 像素
* @param {Number} trimDistance 真实距离
*/
function calculateScale(_scale, trimSize, trimDistance){
// 值与宽度按倍数变
var _value = parseFloat($(".scaleShowValue").html());
var _width = (trimSize/trimDistance)*_scale*_value;
_width > 100 ? showScale(_width, _value , 0.5) : _width <= 50 ? showScale(_width, _value , 2) : showScale(_width, _value , 1);
// 宽度不变,值变
// $(".scaleShow").css("width",100);
// $(".scaleShowValue").html(((trimDistance/trimSize)/_scale)*100 + " m");
}
/**
* 显示比例尺
* @param {Number} _width 宽度
* @param {Number} _value 值
* @param {Number} multiple 倍数
*/
function showScale(_width, _value, multiple){
var _multiple = multiple || 1;
$(".scaleShow").css("width",_width*_multiple);
$(".scaleShowValue").html(_value*_multiple + "m");
}
调用:
calculateScale(_scale, trimSize, trimDistance); // 缩放倍数 像素距离 真实距离