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>

---

• 最終效果

---

轉載請註明出處——哦喲喲喲喲喲喲喲喲喲