leaflet在前端显示地图缩放比例尺和级别

  //定义一个比例尺控件
  var scale = L.control.scale();
  //将比例尺控件加载到地图容器中
  L.control.scale({ metric: true, imperial: false }).addTo(map); //maxWidth:200,
  // map.addControl(scale);
  //获取Attribution控件
  // attribution = map.attributionControl;
  //替换默认的leaflet前缀改为自定义的logo和文字
  // attribution.setPrefix('<img src="./images/pin.png">');
  // attribution.addAttribution("https://blog.csdn.net/BADAO_LIUMANG_QIZHI");

  // 显示地图缩放级别
  // setInterval(() => {
  //   map.setZoom(0);
  //   setTimeout(() => {
  //     map.setZoom(1);
  //   }, 2000);
  // }, 4000);

  const ZoomViewer = L.Control.extend({
    onAdd() {
      const gauge = L.DomUtil.create('div');
      gauge.style.width = '100px';
      gauge.style.background = 'rgba(255,255,255,0.5)';
      gauge.style.textAlign = 'left';
      map.on('zoomstart zoom zoomend', (ev) => {
        gauge.innerHTML = `Zoom level: ${map.getZoom()}`;
      });
      return gauge;
    }
  });

  const zoomViewer = (new ZoomViewer()).addTo(map);