webgis中的比例尺实现

const minWidth = 60
const dom = document.getElementById('scaleLine')
let currentZoom = -1
// 地图拖动和缩放事件
map.on('moveend', function (e) {
  if(currentZoom === map.getView().getZoom()) return
  const res = map.getView().getResolution()
  let width = minWidth;
  let minScale = res * width
  let unit = 'm', scale = minScale
  if(minScale / 1000 > 1) {
    unit = 'km'
    scale = Math.ceil(minScale / 1000)
  }
  const breaks = [1000, 500, 200, 100, 50, 20, 10]
  for (let i = 0; i < breaks.length; i++) {
    const b = breaks[i]
    if(scale / b > 1) {
      scale = Math.ceil(scale / b) * b
      break
    }
  }
  width = unit === 'm' ? scale / res : scale * 1000 / res
  dom.style.width = (width + 4) + 'px'
  dom.innerText = scale + unit
  currentZoom = map.getView().getZoom()
})