官网的範例参考
https://openlayers.org/en/latest/examples/scaleline-indiana-east.html

方案一

https://openlayers.org/en/latest/apidoc/module-ol_control_ScaleLine-ScaleLine.html
如果去看网址中API的参数有很多可以调整，这需要大家针对自己的需求去试试看了，我这边只有简单示範如何将比例尺快速的加入到地图中，因为我自己平常在用的时候，也很少去调整它.......

const map = new ol.Map({    layers: [        new ol.layer.Tile({            source: new ol.source.OSM()        })    ],    target: 'map',    view: new ol.View({        projection: "EPSG:3857",        center: ol.proj.fromLonLat([120.846642, 23.488793]),        zoom: 7.5,        maxZoom: 20,        minZoom: 5,        enableRotation: false,    }),    controls: []});map.addControl(    new ol.control.ScaleLine({        // {'degrees'} {'imperial'} {'nautical'} {'metric'} {'us'}        // 比例尺有提供几种单位可以调整，範例如下        // units: 'us'        bar: true,        steps: 4    }));

方案二

如果使用参数className的话，通常会要整个去设计比例尺的样式，所以我通常不是这样操作的，我是用更暴力更直接的方法，到F12中找到对应的css名称，强制修改成我要的字体大小

css

.ol-scale-line .ol-scale-line-inner {    font-size: 20px;}

js

const map = new ol.Map({    layers: [        new ol.layer.Tile({            source: new ol.source.OSM()        })    ],    target: 'map',    view: new ol.View({        projection: "EPSG:3857",        center: ol.proj.fromLonLat([120.846642, 23.488793]),        zoom: 7.5,        maxZoom: 20,        minZoom: 5,        enableRotation: false,    }),    controls: []});map.addControl(    new ol.control.ScaleLine({        // 比例尺常用的参数调整如下                // units: 'us' // {'degrees'} {'imperial'} {'nautical'} {'metric'} {'us'}        // bar: true,        // steps: 4    }));

如此你就可以看到放大版的比例尺了

参考连结

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day07