leaflet 地图中画网格

 leaflet 详情总目录：传送

在地图中根据四个角的坐标画网格，方法简单，这里主要是记录一下，方便下次查看。

先看效果：

注意：这里画的网格尽量是规则的四边形，如果是不规则的，效果就会不如意了！

话不多说，直接上代码：

//layerGroup
const polygonLayer = ref();
//网格坐标
const gridLatlngs = ref([
	[29.2092078, 119.866789],
	[29.2093882, 119.8667887],
	[29.2093884, 119.8669944],
	[29.2092079, 119.8669946],
]);
//每边网格数
const gridNum = ref(6);

/**
 * 画网格
 * latlngs 网格坐标  gridNum  每边网格数
 */
const drawGrid = (latlngs: any, gridNum = 1) => {
	if (!polygonLayer.value) {
		polygonLayer.value = new L.LayerGroup();
		polygonLayer.value.addTo(mapOption.map);//mapOption.map 这里是对地图方法封装后暴露的属性
	} else {
		polygonLayer.value.clearLayers();
	}
	let layers = drawLine(latlngs, gridNum);
	if (layers.length > 0) {
		layers.forEach((layer) => {
			polygonLayer.value.addLayer(layer);
		});
	}
	mapOption.map.flyTo([29.2092078, 119.866789], 16);
	mapOption.map.on('click', (e: any) => {
		getIndexForClick(e);
	});
};
/**
 * 点击事件计算点击点在网格中的哪个小格中，这里只针对正方形或长方形的网格，其他的不适用
 */
const getIndexForClick = (res: { latlng: { lat: any; lng: any } }) => {
	//点击点坐标
	let latlng = [res.latlng.lat, res.latlng.lng];
	//网格坐标
	if (checkPiointInPolygon(latlng, gridLatlngs.value)) {
		let lat_w = (gridLatlngs.value[1][0] - gridLatlngs.value[0][0]) / gridNum.value; //计算每格纬度宽度
		let lng_w = (gridLatlngs.value[3][1] - gridLatlngs.value[0][1]) / gridNum.value; //计算每格经度宽度
		let h_grid_count = Math.ceil((res.latlng.lat - gridLatlngs.value[0][0]) / lat_w); //计算点在水平方向第几格
		let v_grid_count = Math.ceil((res.latlng.lng - gridLatlngs.value[0][1]) / lng_w); //计算点在垂直方小第几格
		console.log(h_grid_count, v_grid_count, '网格');
	} else {
		console.log('不在网格范围内');
	}
};

画线方法：

import * as turf from '@turf/turf'

/**
 * 判断点是否在多边形内
 * @param latlng [lat,lng]
 * @param latlngs [[lat,lng],[lat,lng]...]
 * @returns 
 */
export function checkPiointInPolygon(latlng:any, latlngs:any) {
    const lth = latlngs.length;
    //判断polygon 首尾是否相等，不相等则把首位坐标添加到末尾，形成封闭的polygon
    if (latlngs[0][0] != latlngs[lth - 1][0] || latlngs[0][1] != latlngs[lth - 1][1]) {
        latlngs.push(latlngs[0])
    }
    let point = turf.point(latlng);
    let polygon = turf.polygon([latlngs]);
    return turf.booleanPointInPolygon(point, polygon);
}
/**
 * 画线
 * @param latlngs [[lat,lng],[lat,lng],[lat,lng],[lat,lng]] 四个顶点坐标
 * @param gridNum 每边格数
 * @param color  线的颜色
 * @returns 
 */
export function drawLine(latlngs:any, gridNum = 1, color = '#29E2B0') {
    let lineLayers = [];
    //水平方向每格宽度
    let h_lth = (latlngs[1][0] - latlngs[0][0]) / gridNum;
    //垂直方小每格宽度
    let v_lth = (latlngs[3][1] - latlngs[0][1]) / gridNum;
    for (var i = 0; i <= gridNum; i++) {
        //画水平方向的线
        let line_layer_h = L.polygon([[latlngs[0][0] + i * h_lth, latlngs[0][1]], [latlngs[3][0] + i * h_lth, latlngs[3][1]]], { color })
        lineLayers.push(line_layer_h);
        //画垂直方向的线
        let line_layer_v = L.polygon([[latlngs[0][0], latlngs[0][1] + i * v_lth], [latlngs[1][0], latlngs[1][1] + i * v_lth]], { color })
        lineLayers.push(line_layer_v)
    }
    return lineLayers;
}

以上就是简单的在地图中根据坐标点画网格的方法，使用的ts写法，js的大家可以自行改编一下