blame | history | patch | commit | commitdiff | ignore whitespace
quanyawei
2024-05-13 74990b437b7b6e6072999d65c37658e51de577b3 
 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">



@@ -223,7 +232,7 @@


        RegExp.$1,



        (date.getFullYear() + "").substr(4 - RegExp.$1.length)



      );



    for (var k in o)



    for (let k in o)



      if (new RegExp("(" + k + ")").test(fmt))



        fmt = fmt.replace(



          RegExp.$1,



@@ -240,7 +249,7 @@


      enableMapClick: false, //取消默认窗口



    });



    // 设置地图中心点和缩放级别



    var point = new BMapGL.Point(116.404, 39.915);



    let point = new BMapGL.Point(116.404, 39.915);



    this.map.centerAndZoom("苏州市", 15);



    this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮，地图可以进行放大、缩小s



    this.drawingManager = new BMapGLLib.DrawingManager(this.map, {



@@ -313,6 +322,12 @@


        <a-divider type="vertical" />



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



        <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="确定"



@@ -337,27 +352,11 @@


  private batchid: any = 0;



  private batchshow: boolean = false;



  private handleEditbatch(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({



        flylon: currentCoord[0],



        flylat: currentCoord[1],



      });



    });



    console.log("data", data);



    this.check = false;



    this.startstate = "batch";



    post("coordinateDetail/batch", {



      coordinateId: record.coordinateId,



      list: data,



      mac: this.carvalue,



    }).then((res) => {



      console.log(res);



      this.$message.success(res.data.message);



      // this.selectCar()



    });



    this.batchshow = true;



    // this.selectCar();



    this.batchid = record.coordinateId;



  }



  private handlebatch() {



    // this.selectCar()



@@ -372,6 +371,9 @@


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



    console.log("this.starttime", this.endtime);



    post("coordinateDetail/batch", {



      type: "0",



      time1: this.starttime,



      time2: this.endtime,



      coordinateId: this.batchid,



      mac: this.carvalue,



    }).then((res) => {



@@ -379,6 +381,79 @@


      this.$message.success(res.data.message);



      this.starttime = "";



      this.endtime = "";



      // this.selectCar()



    });



  }



  // 显示所有矩形



  showAllPolygon() {



    let macType = null;



    if (this.carvalue !== "请选择走航车") {



      macType = this.carvalue;



    }



    get("coordinate/selectCruiserRoad", {



      name: "",



      mac: macType,



    }).then((res) => {



      res.data.data.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);



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



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



      data.push({



        flylon: currentCoord[0],



        flylat: currentCoord[1],



      });



    });



    console.log("data", data);



    this.check = false;



    this.startstate = "batch";



    post("coordinateDetail/batch", {



      type: "1",



      coordinateId: record.coordinateId,



      list: data,



      mac: this.carvalue,



    }).then((res) => {



      console.log(res);



      this.$message.success(res.data.message);



      // this.selectCar()



    });



  }



@@ -491,7 +566,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 = [];



@@ -522,9 +610,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;



@@ -544,13 +643,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]),



@@ -564,12 +665,12 @@


    that.carDataList = [];



    let pointSlint = [];







    for (var i = 0; i < res.data.data.rsData.length; i++) {



    for (let i = 0; i < res.data.data.rsData.length; i++) {



      that.carDate.push(res.data.data.rsData[i]);



      pointSlint.push(res.data.data.rsData[i].data.split("_").map(Number));



    }



    this.multiPt = turf.points([...pointSlint]);



    for (var i = 0; i < res.data.data.data.length; i++) {



    for (let i = 0; i < res.data.data.data.length; i++) {



      that.carDataList.push(res.data.data.data[i]);



    }



    that.map.clearOverlays();



@@ -578,17 +679,17 @@


    if (res.status === 200) {



      for (let i = 0; i < that.carDate.length; i++) {



        //创建单个point



        var myIcon = new BMapGL.Icon(



        let myIcon = new BMapGL.Icon(



          require("@/assets/723cd95f31481a502d495b2d814d658.png"),



          new BMapGL.Size(50, 50),



          {}



        );



        var startIcon = new BMapGL.Icon(



        let startIcon = new BMapGL.Icon(



          require("@/assets/start.png"),



          new BMapGL.Size(50, 50),



          {}



        );



        var endIcon = new BMapGL.Icon(



        let endIcon = new BMapGL.Icon(



          require("@/assets/end.png"),



          new BMapGL.Size(50, 50),



          {}



@@ -599,28 +700,34 @@


        );



        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,



          };



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



        }



        var infoWindow = "";



        let infoWindow = "";



        //that.marker[i].name = that.carDate[i].time;



        that.marker[i].on("mouseover", function(e) {



          infoWindow = new BMapGL.InfoWindow(



@@ -693,7 +800,7 @@


      for (let i = 0; i < that.carDataList.length; i++) {



        // console.log(that.carDataList[i],'that.carDataList[i]');



        //创建单个point



        var myIcon = new BMapGL.Icon(



        let myIcon = new BMapGL.Icon(



          require("@/assets/fb259ce2e368f6853a58b91d6f6b293.png"),



          new BMapGL.Size(50, 50)



        );



@@ -704,7 +811,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,



@@ -767,14 +876,14 @@


  }







  private setZoom(bPoints: any) {



    var view = this.map.getViewport(eval(bPoints));



    var mapZoom = view.zoom;



    var centerPoint = view.center;



    let view = this.map.getViewport(eval(bPoints));



    let mapZoom = view.zoom;



    let centerPoint = view.center;



    this.map.centerAndZoom(centerPoint, mapZoom);



  }



  private selectLuName: any = null;



  private selectLu() {



    var macType = null;



    let macType = null;



    if (this.carvalue !== "请选择走航车") {



      macType = this.carvalue;



    }