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

47次阅读

共计 1106 个字符，预计需要花费 3 分钟才能阅读完成。

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
实现代码

<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>