fix: 路径规划

quanyawei

2024-04-22 bffbddd4a3853a1994c13e42767ceb361cfe74b0

fix: 路径规划

 src/views/list/road.vue

@@ -28,6 +28,9 @@
        <a-button type="primary" style="margin-left: 10px" @click="selectCheck"

          >校验</a-button

        >

        <a-button type="primary" style="margin-left: 10px" @click="reosurce"

          >添加路段信息</a-button

        >

      </div>

      <div class="left-five">

        <a-input

@@ -40,6 +43,12 @@
        >

        <a-button type="primary" style="margin-left: 10px" @click="clearPolygon"

          >清除绘制</a-button

        >

        <a-button

          type="primary"

          style="margin-left: 10px"

          @click="showAllPolygon"

          >显示所有矩形</a-button

        >

      </div>

      <div class="left-two">

@@ -315,6 +324,10 @@
        <a-divider type="vertical" />

        <a onClick={() => this.canvasbatch(record)}> 绘制批量添加 </a>

        <a-divider type="vertical" />

        <a onClick={() => this.handleEditCanves(record)}> 添加矩形 </a>

        <a-divider type="vertical" />

        <a onClick={() => this.handleShowPolygon(record)}> 显示矩形 </a>

        <a-divider type="vertical" />

        <a-popconfirm

          title="确认删除吗？"

          ok-text="确定"

@@ -371,9 +384,50 @@
      // this.selectCar()

    });

  }

  // 显示所有矩形

  showAllPolygon() {

    console.log("this.dataSource", this.dataSource);

    this.dataSource.forEach((item: any) => {

      if (item.bdValues) {

        let pointList = item.bdValues.map((item: any) => {

          return new BMapGL.Point(item.lng, item.lat);

        });

        let polygon = new BMapGL.Polygon([...pointList]);

        console.log("polygon", polygon);

        this.map.addOverlay(polygon);

      }

    });

  }

  // 显示矩形

  handleShowPolygon(record: any) {

    console.log(record);

    if (record.bdValues) {

      let pointList = record.bdValues.map((item: any) => {

        return new BMapGL.Point(item.lng, item.lat);

      });

      let polygon = new BMapGL.Polygon([...pointList]);

      console.log("polygon", polygon);

      this.map.addOverlay(polygon);

    }

  }

  // 添加矩形

  private handleEditCanves(record: any) {

    console.log("this.turfPolygon", this.turfPolygon);

    if (this.roadbaiduPolygon.length > 0) {

      post("coordinate/updateCruiserRoad", {

        coordinateId: record.coordinateId,

        bdValue: this.roadbaiduPolygon,

        value: this.road84Polygon,

      }).then((res) => {

        this.$message.success("添加成功");

        this.selectLu();

      });

    } else {

      this.$message.warning("请绘制矩形");

    }

  }

  private canvasbatch(record: any) {

    let ptsWithin = turf.pointsWithinPolygon(this.multiPt, this.turfPolygon);

    console.log("ptsWithin", ptsWithin);

    let data: { flylon: number; flylat: number }[] = [];

    turf.coordEach(ptsWithin, (currentCoord) => {

      data.push({

@@ -504,7 +558,20 @@
      // console.log(this.carDate,'this.carDate');

      this.carDate = [];

      this.pointshow = false;

      this.map.removeOverlay();

      this.setMarker(res);

    });

  }

  reosurce() {

    console.log("this.timevalue", this.timevalue);

    post("coordinateDetail/queryAll", {

      mac: this.carvalue,

      time1: this.timevalue[0],

      time2: this.timevalue[1],

    }).then((res) => {

      console.log(res.data.data, "res");

      this.$message.success("添加成功");

      // console.log(this.carDate,'this.carDate');

    });

  }

  private markerdata: any = [];

@@ -535,9 +602,20 @@
  };

  private actNav: String = "";

  private clearPolygon() {

    //得到所有overlays

    let overlays = this.map.getOverlays();

    this.drawingManager.clearOverlays();

    //判断是Marker对象还是Label对象

    overlays.forEach((overlay: any) => {

      if (overlay.toString() === "Polygon") {

        this.map.removeOverlay(overlay);

      }

    });

    // this.map.clearOverlays();

  }

  private turfPolygon: any = null;

  private roadbaiduPolygon: any = [];

  private road84Polygon: any = [];

  private draw(drawingType: String) {

    console.log("new BMapGLLib", this.drawingManager);

    this.actNav = drawingType;

@@ -557,13 +635,15 @@
      const polygon = e.overlay;

      // 获取矩形的四个顶点

      const polygonPoints = polygon.getPath();

      console.log("polygonPoints1", polygonPoints);

      this.roadbaiduPolygon = polygonPoints;

      let transformationPoints = polygonPoints.map((coord: any) => {

        const [x, y] = [coord.lng, coord.lat];

        const [lng1, lat1] = coordtransform.bd09togcj02(x, y);

        const [lng2, lat2] = coordtransform.gcj02towgs84(lng1, lat1);

        return { lng: lng2, lat: lat2 };

      });



      this.road84Polygon = transformationPoints;

      console.log("polygonPoints2", transformationPoints);

      this.turfPolygon = turf.polygon([

        transformationPoints.map((item: any) => [item.lng, item.lat]),

@@ -612,21 +692,27 @@
        );

        bPoints.push(statePoint);

        if (i === 0) {

          that.marker[i] = new BMapGL.Marker(statePoint, { icon: startIcon });

          that.marker[i] = new BMapGL.Marker(statePoint, {

            icon: startIcon,

          });

          that.marker[i].customData = {

            data: that.carDate[i].data,

            state: that.carDate[i].state,

          };

          that.marker[i].iconPng = "startIcon";

        } else if (i === that.carDate.length - 1) {

          that.marker[i] = new BMapGL.Marker(statePoint, { icon: endIcon });

          that.marker[i] = new BMapGL.Marker(statePoint, {

            icon: endIcon,

          });

          that.marker[i].customData = {

            data: that.carDate[i].data,

            state: that.carDate[i].state,

          };

          that.marker[i].iconPng = "endIcon";

        } else {

          that.marker[i] = new BMapGL.Marker(statePoint, { icon: myIcon });

          that.marker[i] = new BMapGL.Marker(statePoint, {

            icon: myIcon,

          });

          that.marker[i].customData = {

            data: that.carDate[i].data,

            state: that.carDate[i].state,

@@ -717,7 +803,9 @@
        // console.log(statePoint,'statePoint');

        aPoints.push(statePoint);

        //将marker保存在data函数中 后续需要使用

        that.markerdata[i] = new BMapGL.Marker(statePoint, { icon: myIcon });

        that.markerdata[i] = new BMapGL.Marker(statePoint, {

          icon: myIcon,

        });

        that.markerdata[i].customData = {

          data: that.carDataList[i].code,

          state: that.carDataList[i].state,