jtopo 比例尺功能

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); // 缩放倍数 像素距离 真实距离