交通态势系统

2023.09.14 - 2023.10.26

4 分钟

公司项目 vue web leaflet 后台管理系统

586 字

项目介绍 Link to 项目介绍

本系统主要用于以下功能：

交通信息展示：提供实时交通路况、路况预测及预测分析，帮助用户及时了解道路状况。
信息屏管理：

节目单编辑：支持自定义编辑节目内容。
信息屏配置：灵活配置信息屏的各项参数。
节目发布：实现节目内容的高效发布与管理。

路段、区域管理：

路段编辑：选择起点和终点，自动生成路径。
区域配置：支持手动绘制区域。

通过上述功能，系统能够为用户提供全面、准确、及时的交通信息服务。

项目难点 Link to 项目难点

绘制路段 Link to 绘制路段

自动绘制通过百度地图提供的驾车规划接口，自动绘制出路线。
手动绘制绘制起点和终点，通过拖动中间点位的方式调整路段。

绘制区域 Link to 绘制区域

使用百度地图提供的api绘制。

代码示例 Link to 代码示例

选择起点和终点自动生成路线（驾车规划） Link to 选择起点和终点自动生成路线（驾车规划）

JAVASCRIPT

function drawRouteLine() {
  let drivingTime = 0;
  let drivingDistance = 0;
  let pointsArr = [];
  let that = this;
  var searchComplete = function (results) {
    if (transit.getStatus() == BMAP_STATUS_SUCCESS) {
      var plan = results.getPlan(0);
      drivingTime = plan.getDuration(true); //获取时间
      drivingDistance = plan.getDistance(true); //获取距离
      pointsArr = that.makePointsArr(plan._lines); // 路段中所有的点位数组
      that.removeMarker();
    }
  };
  var transit = new BMapGL.DrivingRouteLine(this.bdMap, {
    renderOptions: {
      map: this.bdMap,
      enableDragging: true,
      autoViewport: false,
      lineLayerStyle: {
        // strokeTextureUrl: null,
        showTraffic: true,
      },
    },
    onSearchComplete: searchComplete,
    onPolylinesSet: () => {
      this.drivingTime = drivingTime;
      this.drivingDistance = this.convertDistance(drivingDistance);
      this.pointsArr = deepClone(pointsArr);
    },
  });
  let start = new BMapGL.Point(this.startPoint.lng, this.startPoint.lat);
  let end = new BMapGL.Point(this.endPoint.lng, this.endPoint.lat);
  transit.search(start, end);
}