二、百度地图画扇形--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());
    }
  }

 

posted on 2021-10-25 11:46  我是你爷爷的爷爷  阅读(526)  评论(0编辑  收藏  举报

导航