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

显示缩放级别：

https://leafletjs.com/examples.html

https://leafletjs.com/examples/zoom-levels/example-setzoom.html

显示比例尺，见上图左下角

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/123988305

代码语言：javascript复制

  //定义一个比例尺控件
  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);

https 网络安全 html

0 人点赞