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
  • 實現代碼

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


  • 最終效果

圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章