vue+百度地图实现台风轨迹路线——台风警戒线

 项目总使用的台风运行轨迹，记录一下，以便后续可使用。

 台风参考资料

 参考地址：台风路径

 获取台风API：台风信息查询-API文档-APISpace-API数据接口-API接口大全-免费API接口服务

台风页面效果

添加24小时和48小时台风警戒线

警戒线数据

export default {
    props: {},
    data() {
        return {
             //  台风警戒线坐标数据
            tfWarnLine: [{
                key: 24,
                name: '小时警戒线',
                color: 'red',
                list: [
                    [105, 0],
                    [113, 4.5],
                    [119, 11],
                    [119, 18],
                    [127, 22],
                    [127, 34]
                ]
            },
            {
                key: 48,
                name: '小时警戒线',
                color: 'yellow',
                list: [
                    [105, 0],
                    [120, 0],
                    [132, 15],
                    [132, 34]
                ]
            }],
        }
    }
}

调用绘制台风警戒线方法

 // 添加台风警戒线
 _this.mapObject.drawTfWarningLine(_this.earlyWarnLine);

绘制台风警戒线

/**
   * 绘制台风警戒线
   * @param {*} guardLineList
   */
  drawTfWarningLine(guardLineList) {
    guardLineList.forEach((item) => {
      //  以坐标点划线
      let list = item.list;
      let polylinePoint = [];
      let listLength = list.length;
      let polylineOptions = {
        strokeColor: item.color,
        strokeWeight: 2,
        strokeOpacity: 0.3,
      };

      list.forEach((each) => {
        //	画地图所需的点实例
        polylinePoint.push(new BMapGL.Point(...each));
      });
      //	将点实例做成线实例
      var polyline = new BMapGL.Polyline(polylinePoint, polylineOptions);
      polyline.enableMassClear(); //	允许清除线
      this.map.addOverlay(polyline); //	将生成的线实例画到地图上

      //	警戒线名称也要画到地图
      let html = item.name;
      html = item.key + "<br>" + html.split("").join("<br>");
      let label = new BMapGL.Label(html, {
        position: polylinePoint[polylinePoint.length - 1],
        offset: new BMapGL.Size(0, 50),
      });
      label.setStyle({
        color: item.color,
        textAlign: "center",
        border: "none",
        fontSize: "12px",
        backgroundColor: "transparent",
        opacity: 0.9,
      });
      this.map.addOverlay(label);
    });
  }