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插件实现鹰眼图效果的关键代码,如有疏漏欢迎评论区指出,如果感觉对您有用,还请点一个免费的小👍,多谢~

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值