Vue实现百度地图矩形裁切功能

概要

本文主要讲述如何将一个自定义矩形分割成多个指定大小的矩形，并且获取每个矩形的中心点。
实践过程中发现如果需要裁切的矩形过大时，解决页面会卡住问题。可在 DrawingManager中加入面积限制。

矩形分割成多个指定大小的矩形

效果图

cropRectangle(minX, minY, maxX, maxY) {
	// 创建一个矩形范围 minX、minY 为西北坐标，maxX、maxY为东南坐标
	var bounds = {
		minX: minX,
		minY: minY,
		maxX: maxX,
		maxY: maxY
	}
	// 您可以根据需要调整划分的方式和数量
	var width = 0.0117; // 以百度坐标千米为单位
	var height = 0.00899; // 以百度坐标千米为单位

	for (var j = bounds.minX; j < bounds.maxX; j += width) {
		for (var k = bounds.minY; k < bounds.maxY; k += height) {
			var subBounds = new BMapGL.Bounds(
				new BMapGL.Point(j, k),
				new BMapGL.Point(j + width, k + height)
			);
			var points = [
				new BMapGL.Point(subBounds.ne.lng, subBounds.ne.lat),
				new BMapGL.Point(subBounds.sw.lng, subBounds.ne.lat),
				new BMapGL.Point(subBounds.sw.lng, subBounds.sw.lat),
				new BMapGL.Point(subBounds.ne.lng, subBounds.sw.lat)
			];
			// 绘制小矩形，如果需要的话
			this.map.addOverlay(new BMapGL.Polygon(points, {
				strokeColor: "red",
				strokeWeight: 2,
				strokeOpacity: 0.5
			}));
		}
	}
},

提示1：代码中的 width 、height 单位值可以通过绘制图形时计算在矩形绘制时会显示距离如下图。

提示2：需求裁切的图形不能超过绘制图大小时需修改东南坐标如下
效果图

var subBounds = new BMapGL.Bounds(
	new BMapGL.Point(j, k),
	new BMapGL.Point(j + width > bounds.maxX ? bounds.maxX : j + width, k + height > bounds.maxY ? bounds.maxY : k + height )
);

矩形的中心点

效果图

getCenterPoint(points) {
	var minLat = points.minLat;
	var minLng = points.minLng;
	var maxLat = points.maxLat;
	var maxLng = points.maxLng;
	// 返回中心点坐标
	return new BMapGL.Point((minLng + maxLng) / 2, (minLat + maxLat) / 2);
}
// 在cropRectangle函数中调用，这里展示部分代码
for (var j = bounds.minX; j < bounds.maxX; j += width) {
	for (var k = bounds.minY; k < bounds.maxY; k += height) {
		var subBounds = new BMapGL.Bounds(
			new BMapGL.Point(j, k),
			new BMapGL.Point(j + width, k + height)
		);
		var points = [
			new BMapGL.Point(subBounds.ne.lng, subBounds.ne.lat),
			new BMapGL.Point(subBounds.sw.lng, subBounds.ne.lat),
			new BMapGL.Point(subBounds.sw.lng, subBounds.sw.lat),
			new BMapGL.Point(subBounds.ne.lng, subBounds.sw.lat)
		];
		var point =  {
			minLng: subBounds.ne.lng,
			minLat: subBounds.sw.lat,
			maxLng: subBounds.sw.lng,
			maxLat: subBounds.ne.lat
		}
		var centerPoint = this.getCenterPoint(point);
		// 在地图上添加点标记
		this.map.addOverlay(new BMapGL.Marker(new BMapGL.Point(centerPoint.lng, centerPoint.lat)));
		// 绘制小矩形，如果需要的话
		this.map.addOverlay(new BMapGL.Polygon(points, {
			strokeColor: "red",
			strokeWeight: 2,
			strokeOpacity: 0.5
		}));
	}
}

绘制矩形面积限制

提示： 在DrawingManager 中添加参数 enableCalculate 、enableLimit 与 limitOptions

效果图

// 实例化鼠标绘制工具
this.drawingManager = new BMapGLLib.DrawingManager(this.map, {
	isOpen: false, // 是否开启绘制模式
	enableCalculate: true, // 绘制是否进行测距测面
	enableSorption: true, // 是否开启边界吸附功能
	sorptiondistance: 20, // 边界吸附距离
	circleOptions: styleOptions, // 圆的样式
	polylineOptions: styleOptions, // 线的样式
	polygonOptions: styleOptions, // 多边形的样式
	rectangleOptions: styleOptions, // 矩形的样式
	labelOptions: labelOptions, // label样式
	enableLimit: true, //开启超限提示
	limitOptions: {
		area: 100000000,
		distance: 3000
	}
});

小结

在 Vue 中实现百度地图工具栏绘制矩形请移步至 

Vue实现百度地图工具栏功能