（二）leaflet实现导航栏、比例尺、鹰眼、全屏控件

一、加载导航栏控件

1.下载插件

https://github.com/davidchouse/Leaflet.NavBar

Ps:通过尝试，该插件不支持npm直接安装，需要自行下载解压到项目目录中。

2.解压到自己目录后，引入

import '../../assets/Leaflet.NavBar-master/src/Leaflet.NavBar.js'

import '../../assets/Leaflet.NavBar-master/src/Leaflet.NavBar.css'

3.实现功能

  const navBar = L.control.navbar({

    position: 'topleft'//控制显示位置，默认topleft

  })

  map.addControl(navBar)

显示结果：

二、添加比例尺控件

  //添加比例尺控件
  L.control
    .scale({
      maxWidth: 200, //比例尺最大宽度，默认100
      metric: true //是否显示公制单位，默认false（即显示英制单位）
    })
    .addTo(map)