SuperMap iClient for Leaflet鹰眼图的实现

前言

本人是基于SuperMap iClient for Leaflet开发，如果各位使用的是原生Leaflet也可以使用此方法，但需注意添加图层的方法可能会与SuperMap iClient for Leaflet的有所区别。

---

一、依赖包说明

本方法是基于leaflet-control-mini-map插件实现鹰眼图效果，详细说明大家可以在npm官网查看。

插件安装：

npm i leaflet-control-mini-map

 部分配置项及方法说明（仅供参考）：

//方法
  miniMapControl.minimize();//关闭（最小化）鹰眼图
  miniMapControl.restore();//打开鹰眼图
  miniMapControl.disableInteractivity();//禁用鹰眼图的缩放和拖动功能

//配置项
  position:"bottomright";//鹰眼图控件的位置（地图的一个角）。可选值是 'topleft'、 'topright'、 'bottomleft' 或 'bottomright'，默认值是"bottomright"。
  width:150;//鹰眼图控件的容器宽度（以像素为单位），默认值为150。
  height:150;//鹰眼图控件的容器高度（以像素为单位），默认值为150。
  collapsedWidth:19;//鹰眼图折叠时（最小化），切换按钮的宽度，以像素为单位。默认值为19。
  collapsedHeight:19;//鹰眼图折叠时（最小化），切换按钮的高度，以像素为单位。默认值为19。
  zoomLevelOffset:-5;//与主地图的缩放相比，应用于小地图缩放的偏移。可以是正值或负值，默认值为-5。
  zoomLevelFixed:5;//覆盖偏移以将固定缩放级别应用于小地图，而不考虑主地图缩放。如果使用未设置的zoomLevelOffset，则将其设置为任何有效的缩放级别。(固定鹰眼图地图缩放比例)
  centerFixed:false；//将固定位置应用于小地图，而不管主地图的视图/位置如何。防止平移小地图，但允许缩放（在小地图和主地图中）。如果小地图被缩放，它将始终围绕中心固定点进行缩放。可以传入LatLng等效对象。默认为false。
  zoomAnimation:false;//设置小地图是否应具有动画缩放。（将导致它在主地图移动后滞后一点。）默认为false。
  toggleDisplay:false;//设置小地图是否应具有最小化按钮。默认为false。

二、使用步骤

1.引入依赖

import { MiniMap } from "leaflet-control-mini-map";
import "leaflet-control-mini-map/dist/minimap.css";

2.具体实现

<script setup>
    import { onMounted } from "vue";
    import L from "leaflet";
    import { TiledMapLayer } from "@supermap/iclient-leaflet";
    import { MiniMap } from "leaflet-control-mini-map";
    import "leaflet-control-mini-map/dist/minimap.css";

    let miniMapControl,
        url="要添加图层的url";

    function miniMap() {
      let layer = new TiledMapLayer(url, { minZoom: 1, maxZoom: 9 });
      miniMapControl = new L.Control.MiniMap(layer, {
        //鹰眼图配置项
        width: 200,
        toggleDisplay: true,
        zoomLevelOffset: -5,
        zoomAnimation: true,
      }).addTo(map);
    }

    onMounted(() => {
      miniMap();
    });

    //下面是测试插件方法代码，与鹰眼图主要实现逻辑无关。
    setTimeout(() => {
      miniMapControl.minimize();
    }, 5000);
    setTimeout(() => {
      miniMapControl.restore()
      miniMapControl.disableInteractivity()
    }, 8000);
</script>

以上是基于Vue3框架+leaflet-control-mini-map插件实现鹰眼图效果的关键代码，如有疏漏欢迎评论区指出，如果感觉对您有用，还请点一个免费的小👍，多谢~