vue接入高德地图绘制扇形效果的案例详解

let sectorList = [{
          name: '第一个基站',    // 基站名称
          x: 116.3470390,       // 基站经度
          y: 40.481888,         // 基站纬度
          data: [{              // 基站包含扇区列表
            msg: '第一个基站的第一个扇区',   // 扇区名称
            r: 0						  // 基站初始角度
          }]
        }, {
          name: '第二个基站',
          x: 117.3470,
          y: 39.48188,
          data: [{
            msg: '第二个基站的第一个扇区',
            r: 0
          }, {
            msg: '第二个基站的第二个扇区',
            r: 120
          }]
        }]

drawSite(mapPoint) {
        let point = new AMap.LngLat(mapPoint.x, mapPoint.y);
        for (var i = 0; i < mapPoint.data.length; i++) {
          let radian1 = 90 - mapPoint.data[i].r - 30
          let radian2 = 90 - mapPoint.data[i].r
          let oval = new AMap.PolyGon({
            path: this.sector(point, 500, radian1, radian2),
            strokeColor: '#ff8400',
            strokeOpacity: '1',
            strokeWeight: 1,
            fillColor: '#ff8400',
            fillOpacity: '0.3',
          })
          let info = [];
          info.push("<b>基站名称：</b>" + mapPoint.name);
          info.push("<b>扇区名称：</b>" + mapPoint.data[i].msg);
          let content = info.join("<br/>");
          oval.content = content
          oval.on('click', this.polygonClick);
          map.add(oval);
        }
        let marker = new AMap.CircleMarker({
          center: point,
          radius: 7,
          strokeWeight: 0,
          fillColor: "#ff8400",
          fillOpacity: 1,
        });
        marker.on('click', this.markerClick);
        map.add(marker);
      },

sector(center, len, radian1, radian2) {
        let points = [];
        let step = ((radian2 - radian1) / 10) || 10; //根据扇形的总夹角确定每步夹角度数，最大为10  
        points.push(center);
        for (let i = radian1; i < radian2 + 0.001; i += step) { //循环获取每步的圆弧上点的坐标，存入点数组 
          points.push(this.eOffsetBearing(center, len, i));
        }
        points.push(center);
        return points;
      },

eOffsetBearing(center, len, bearing) {
        let lnGConv = center.distance(new AMap.LngLat(center.getLng() + 0.1, center.getLat())) * 10
        let latConv = center.distance(new AMap.LngLat(center.getLng(), center.getLat() + 0.1)) * 10 //计算1纬度与原点的距离
        let lat = len * Math.sin(bearing * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差
        let lng = len * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差
        return new AMap.LngLat(center.getLng() + lng, center.getLat() + lat);
      },

polygonClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, [e.lnglat.getLng(), e.lnglat.getLat()]);
      },

markerClick(e) {
        infoWindow.setContent(e.target.content);
        map.setZoomAndCenter(17, e.target.getCenter());
        infoWindow.open(map, e.target.getCenter());
      },

infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -20) });