由于百度地图flutter插件并没有提供画扇形的方式,所以需要自己通过代码画扇形,其实futter版本画出来的也不是扇形,而是三角形
一、百度地图api里提供的画的图形有:
- 绘制点标记 BMFMarker https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/point
- 绘制线 https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/ployline
- 绘制弧线和面 https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/ploygon
二、自己绘制扇形--三角形
通过BMFPloygon
- 构造一个对象,需要经纬度和角度
///经纬度加角度 class LatLngDegree{ double latitude; double longitude; int degree; LatLngDegree({this.latitude, this.longitude, this.degree}); }
-
扇形的圆弧坐标算法
///扇形的圆弧坐标算法 Future<LatLng> offsetBearing(LatLng point, double dist, int bearing) async { //计算1经度与原点的距离 double lngConv = await BMFCalculateUtils.getLocationDistance(BMFCoordinate(point.latitude, point.longitude), BMFCoordinate(point.latitude, point.longitude + 0.1)); //计算1纬度与原点的距离 double latConv = await BMFCalculateUtils.getLocationDistance(BMFCoordinate(point.latitude, point.longitude), BMFCoordinate(point.latitude + 0.1, point.longitude)); //正弦计算待获取的点的纬度与原点纬度差 double lat = dist * sin(bearing * pi / 180) / latConv; //余弦计算待获取的点的经度与原点经度差 double lng = dist * cos(bearing * pi / 180) / lngConv; return LatLng(latitude: point.latitude + lat, longitude: point.longitude + lng); }
-
通过一个点构造扇形点集合
///以画多边形区域的方法画扇形区域 //画出以point点为圆心,radius为半径,夹角从startAngle到endAngle的扇形 Future<List<LatLng>> sector(LatLng point, double radius, int startAngle, int endAngle) async { //创建构成多边形的坐标点数组 List<LatLng> sectorPoints = []; //根据扇形的总夹角确定每步夹角度数,最大为10 int step = (endAngle- startAngle)/10 > 10 ? 10 : endAngle- startAngle; sectorPoints.add(point); for (int i = startAngle; i < endAngle + 0.001; i += step) { //循环获取每步的圆弧上点的坐标,存入点数组 LatLng latLng = await offsetBearing(point, radius, i); sectorPoints.add(latLng); } return sectorPoints; }
-
画出扇形的方法,通过BMFPolygon
void _drawSector(List<LatLngDegree> mapPoints) async { print('添加扇形-----------'); for(LatLngDegree latLngDegree in mapPoints){ int azimuth1 = 90-latLngDegree.degree-20; int azimuth2 = 90-latLngDegree.degree+20; List<LatLng> sectorPoints = await sector(LatLng(latitude: latLngDegree.latitude, longitude: latLngDegree.longitude), 10, azimuth1, azimuth2); List<BMFCoordinate> coordinates = []; for(LatLng latLng in sectorPoints){ coordinates.add(BMFCoordinate(latLng.latitude, latLng.longitude)); } BMFPolygon bmfPolygon = BMFPolygon(coordinates: coordinates, ); myMapController.addPolygon(bmfPolygon); } }
-
传入的点是需要画出的扇形--mapPoints
void addPloyTest(){ List<LatLngDegree> mapPoints = []; mapPoints.add(LatLngDegree(latitude: _lat, longitude: _lng, degree: 0)); mapPoints.add(LatLngDegree(latitude: _lat, longitude: _lng, degree: 120)); mapPoints.add(LatLngDegree(latitude: _lat, longitude: _lng, degree: 240)); _drawSector(mapPoints); }
-
我项目是通过按钮添加扇形
///测试按钮 _buildTestButton(){ return Positioned( right: 20.w, bottom: 200.h, child: ElevatedButton(onPressed: (){addPloyTest();}, child: Text("按钮添加扇形"))); }
三、另外我真的需要用到请求后台数据获取点的时候,画扇形,需要一个视口经纬度范围
1.获取手机地图视口经纬度访问的方法
///获取视口边界坐标 void _getMapBounds() async { BMFCoordinateBounds visibleMapBounds = await myMapController?.getVisibleMapBounds(); if(visibleMapBounds != null){ print("视口边界"); _northeast = visibleMapBounds.northeast; _southwest = visibleMapBounds.southwest; print("northeast-----------------latitude" + _northeast.latitude.toString() + "--------longitude" + _northeast.longitude.toString()); print("southwest-----------------latitude" + _southwest.latitude.toString() + "--------longitude" + _southwest.longitude.toString()); } }