Openlayers中数字比例尺的实现方法

1.比例尺分类
（1）数字式，用数字的比例式或分数式表示比例尺的大小。例如地图上1厘米代表实地距离500千米，可写成：1∶50 000 000或写成：五千万分之一。
（2）线段式（也叫直线式），在地图上画一条线段，并注明地图上1厘米所代表的实际距离。
（3）文字式，在地图上用文字直接写出地图上1厘米代表实地距离多少千米，如：图上1厘米相当于地面距离10千米。

2.openlayers中比例尺介绍
openlayers中默认地图比例尺为直线式，如图该比例尺存在精确测量无法读取比例尺实际值的缺点。因此有必要将直线比例尺转换成数字比例尺。

3.实现方法

• 地图比例尺、分辨率、dpi关系
  openlayers背景地图多为瓦片地图，瓦片地图分辨率（resolution）是非常重要的参数，其原理参考瓦片地图分辨率介绍；
  地图比例尺受到分辨率，像素dpi以及地图投影关系等影响，他们之间的关系参考地图比例尺，分辨率，dpi之间的关系
  因此根据这三者的关系得到数字比例尺（digitalScale）的换算公式：
  digitalScale=dpi/0.0254*resolution
  根据以上公式，结合各类图源的瓦片层级和分辨率（我做的示例为OSM地图），dpi常规取值为96，就可以计算出一个转换参数：dpi/0.0254=3779.5275590551
• 实现代码

---

<div id="map">
    <div id="digitalScale"><span>比例尺1：</span><span id="zoom"></span></div>
</div>

<script>

    var scaleLineControl=new ol.control.ScaleLine();//定义比例尺控件

    // 实例化地图
    var map=new ol.Map({
        layers:[
        new ol.layer.Tile({
            source:new ol.source.OSM()
        })
        ],
        target:'map',
        view:new ol.View({
            center:ol.proj.transform([104,30],'EPSG:4326','EPSG:3857'),
                zoom:10
        }),
        controls:ol.control.defaults().extend([scaleLineControl])//加载比例尺控件
    });



    // 监听分辨率变化，通过dpi和像素关系（比例尺=dpi/0.0254*分辨率）输出比例尺
    map.getView().on('change:resolution', function(){
        
        document.getElementById('zoom').innerHTML = (this.getResolution())*3779.5275590551;//这里使用了View中的getResolution方法获得当前View的分辨率。
    });

</script>

---

• 最终效果

---

转载请注明出处——哦哟哟哟哟哟哟哟哟哟