Leaflet弹出框popup显示在区域最上边边缘

Leaflet弹出框popup显示在区域最上边边缘


前言:最近有个需求让地图上的多边形弹出框显示在最上边的边缘区域,为了不遮挡图形,折腾了好一会最后使用turf.js工具达到目的。

1、使用getCenter方法可将popup绘制在中心点,但有点遮挡图形
在这里插入图片描述

	var latlng = 你的图形.getBounds().getCenter(); // 获取中心点
    let popup = L.popup().setLatLng(latlng).setContent("基本信息").openOn(map); // 添加到地图对象上

2、使用其他方法,当图形不规则时则popup会定位在多边形外边
在这里插入图片描述
3、使用turf.js实现popup定位在多边形最上边边缘区域

      // 特殊处理将信息弹框设置在图斑最上边
      /**
       * 大致思想:getBounds函数获取到的是显示图斑的最小外接矩形,
       * 使用东西北三个点组成两个点坐标形成一条线,此线段是最小外接矩形的上边
       * 然后获取图斑与此线段的交集,
       * 最后获取交集中的任意一点即可
       */
      let bounds = 你的区域图层对象.getBounds();
      let east = bounds.getEast();
      let west = bounds.getWest();
      let north = bounds.getNorth();
      const lineGeo = turf.lineString([[east,north],[west,north]]); // 确定一条直线
      const commonGeo = turf.lineIntersect(你的图形GeoJSON, lineGeo); // 获取直线与你的图形的交集
      let latlngInit = turf.coordAll(commonGeo)[0];	// 交集随便获取一个点即可
      // 获取弹出框定位点
      latlngInit = L.latLng(latlngInit[1], latlngInit[0]);
      // 有了点之后,就可以绑定popup了

在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值