概要
本文主要讲述如何将一个自定义矩形分割成多个指定大小的矩形,并且获取每个矩形的中心点。
实践过程中发现如果需要裁切的矩形过大时,解决页面会卡住问题。可在 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 中实现百度地图工具栏绘制矩形请移步至