二、百度地图画扇形--flutter版本

由于百度地图flutter插件并没有提供画扇形的方式，所以需要自己通过代码画扇形，其实futter版本画出来的也不是扇形，而是三角形

一、百度地图api里提供的画的图形有：

1. 绘制点标记 BMFMarker https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/point
2. 绘制线 https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/ployline
3. 绘制弧线和面 https://lbsyun.baidu.com/index.php?title=flutter/loc/render-map/ploygon

二、自己绘制扇形--三角形

　　通过BMFPloygon

1. 构造一个对象，需要经纬度和角度

   ///经纬度加角度
   class LatLngDegree{
     double latitude;
     double longitude;
     int degree;
   
     LatLngDegree({this.latitude, this.longitude, this.degree});
   }

    

2. 扇形的圆弧坐标算法

     ///扇形的圆弧坐标算法
     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);
     }

    

3. 通过一个点构造扇形点集合

    ///以画多边形区域的方法画扇形区域
     //画出以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;
     }

    

4. 画出扇形的方法，通过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);
       }
     }

    

5. 传入的点是需要画出的扇形--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);
     }

    

6. 我项目是通过按钮添加扇形

     ///测试按钮
     _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());
    }
  }

标签：point,--,double,longitude,int,扇形,latitude,flutter
来源： https://www.cnblogs.com/lin-bunny/p/15457782.html