openlayers 地图添加比例尺

知识点：

 效果图： 

// html

// 也可以动态创建


// js

  // 比例尺
  function initScaleLine() {
    let scaleLineControl = new ol.control.ScaleLine({
      className: 'my-scale-line'
    });
    scaleLineControl.setUnits('metric');
    map.addControl(scaleLineControl);
  }


// 样式

    .my-scale-line {
      position: absolute;
      right: 75px;
      font-weight: 700;
      font-size: 12px;
      color: white;
      bottom: 60px;
      left: auto;
      border: 2px solid white;
      border-top: none;
      text-align: center;
      background-color: hsla(0, 0%, 100%, 0);
      height: 8px;
      line-height: 0;
    }