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了