基于vue添加刻度线比例尺

可以绑定在一个div上，方便控制显示位置，通过设置div的样式即可

<!-- 比例尺  刻度线 -->
      <span class="scaleLine" ref="scaleLine"></span>

引入包

import { ScaleLine, defaults as defaultControls } from "ol/control";

//刻度线控件    
       let scaleInstance = new ScaleLine({
        // 单位，米
        units:'metric',
        // 渲染比例尺而不是一条线。
        bar: true,
        // 比例尺应使用的步数。 使用偶数 以获得最佳效果。默认值4
        // steps:6,
        // 渲染比例尺上方的文本比例
        text:true,      
        target:this.$refs.scaleLine
      })
    
//先创建控件再添加，顺序不能乱
this.map = new Map({
        target: "olMap",
        view: new View({
          center: [108.945951, 34.465262],
          zoom: 4,
          projection: "EPSG:4326",
        }),
         controls: defaultControls({
          //   控制左上角的缩放图标
          zoom: false,
        }).extend([scaleInstance]),
      });