| | |
|---|
| | | <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
|
|---|
| | |
|---|
| | | >
|
|---|
| | | <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">
|
|---|
| | |
|---|
| | | <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="确定"
|
|---|
| | |
|---|
| | | // 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({
|
|---|
| | |
|---|
| | | // 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 = [];
|
|---|
| | |
|---|
| | | };
|
|---|
| | | 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;
|
|---|
| | |
|---|
| | | 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]),
|
|---|
| | |
|---|
| | | );
|
|---|
| | | 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,
|
|---|
| | |
|---|
| | | // 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,
|
|---|
