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>
- 最終效果