leaflet加入小地图 鹰眼模式

html

  //创建鹰眼控件
            var miniMap = new L.Control.MiniMap(minmapLayer, { toggleDisplay: true });
            map.addControl(miniMap); 

vue形式 npm i leaflet-minimap map.JS内

//引入鹰眼缩放小地图
import MiniMap from 'leaflet-minimap';
//加载 迷你地图
const createMiniMap = async (map, url, options) => {
  let tileLayer = await $L.tileLayer(url, options);
  new $L.Control.MiniMap( tileLayer, 
    { zoomAnimation: true, // 动画缩放
      aimingRectOptions: {color:'red',weight: 1, fillColor: 'blue'} // 通过传递Path.Options对象来设置目标矩形的样式
    }).addTo(map);
  
  return tileLayer;
};

  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
      //缩放控件
      zoomControl: false,
    });
//鹰眼小地图
    this.$utils.map.createMiniMap(this.map, this.hawkLayer, { noWrap: true,maxZoom: 18,minZoom: 1,});
  },