OpenLayers官方示例詳解十五之比例尺控制元件（Scale Line）
阿新 • • 發佈：2018-12-28
目錄
一、示例簡介
本示例展示瞭如何建立一個比例尺控制元件（ol.control.ScaleLine），同時讓比例尺控制元件的單位根據使用者的選擇而改變。
OpenLayers中比例尺控制元件支援的單位有：
- metric —— 通用的，以千米為單位
- us —— 美國單位
- nautical —— 航海單位
- imperial —— 英制單位
- degrees —— 以度、分、秒為單位
二、程式碼詳解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Scale Line</title> <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /> <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script> </head> <body> <div id="map"></div> <select id="units"> <option value="degrees">degrees</option> <option value="imperial">imperial inch</option> <option value="us">us inch</option> <option value="nautical">nautical mile</option> <option value="metric" selected>metric</option> </select> <script> // 建立一個比例尺控制元件 var scaleLineControl = new ol.control.ScaleLine({ units: 'metric' // 比例尺預設的單位 }); var map = new ol.Map({ target: 'map', controls: ol.control.defaults().extend([ scaleLineControl // 將比例尺控制元件新增到地圖中 ]), layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 2 }) }); var unitsSelect = document.getElementById('units'); // 讓地圖的比例尺單位根據使用者的選擇而改變 unitsSelect.addEventListener('change', function(){ scaleLineControl.setUnits(unitsSelect.value); }, false); </script> </body> </html>