修改编辑模式不同类型有不同颜色,section选择时选择项目等

src/app/main/main.component.html

@@ -4,7 +4,7 @@
   
     <section>
        <div *ngIf="debug">
-        <select [(ngModel)]="type">
+        <select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
           <option value="0">project</option>
           <option value="1">course</option>
           <option value="2">SECTION</option>
@@ -12,6 +12,12 @@
         <select [(ngModel)]="currentCouseId">
           <option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option>
         </select>
+        <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,1)">
+            <option *ngFor="let c of projects1"  [value]="c.id" >{{c.name}}</option>
+          </select>
+          <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
+              <option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
+            </select>
       </div>
         <!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
        <button [ngClass]="{focus:highShow}" (click)="toHighWay()">高速公路</button>
@@ -77,9 +83,16 @@
 
             </button>
           <label></label>
-          <label>  </label>
+          <label> </label>
           <label></label>
       </section>
+      <section>
+          <button>数据信息
+            </button>
+            <label>名字：{{currProj.name}}</label>
+          <label>里程：{{currProj.mileage}}</label>
+          <label>投资：{{currProj.capital}}</label>
+      </section>
    </div>  
 </div>  
 
@@ -90,7 +103,7 @@
   <p>capital: <input type="text" [(ngModel)]="proj.capital" /></p>
   <p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
   <p>course: <input type="text" [(ngModel)]="proj.course" /></p>
-  <p>lineStyle: <input type="text" [(ngModel)]="proj.lineStyle" /></p>
+  <p>lineStyle: <input type="text" [(ngModel)]="proj.lineStyle"   /></p>
   <p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
   <p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>
 
@@ -119,7 +132,7 @@
 
   <jw-modal id="custom-modal-3">
       <h1>添加section</h1>
-      <p>courses名称: <input type="text" [(ngModel)]="section.name" /></p>
+      <p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
       <p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
       <p>lineStyle: <input type="text" [(ngModel)]="section.lineStyle" /></p>
       <p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>

src/app/main/main.component.ts

@@ -15,6 +15,7 @@ import { ActivatedRoute } from '@angular/router';
 declare var map: any;
 declare var BMap: any;
 declare var BMapLib: any;
+declare var drawingManager:any;
 const enum CordType {
   PROJ,
   COURSE,
@@ -34,7 +35,26 @@ export interface DialogData {
   styleUrls: ['./main.component.less']
 })
 export class MainComponent implements OnInit {
+ 
 
+  constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
+    //定位山西省地图
+    this.opts = {
+      centerAndZoom: {
+        lat: 37.78663390039693,
+        lng: 112.43176242674386,
+        zoom: 8
+      },
+
+    }
+    this.polylineOptions = {
+      strokeColor: 'yellow',
+      strokeWeight: 10
+    }
+  }
+  drawingManager: any;
+  currentProjId: number;
+  preCord: any;
   courses = [];
   highShow = false;
   normalShow = false;
@@ -44,6 +64,8 @@ export class MainComponent implements OnInit {
 
   public projects = [
   ]
+  public projects1=[]
+  public projects2=[]
   polys = [];
   proj: Project = { delFlag: 0 };
   course: Course = { delFlag: 0 };
@@ -54,6 +76,7 @@ export class MainComponent implements OnInit {
   staticHighWay: any = {};
   staticNormal: any = {};
   normalProjects: any = [];
+  currProj:Project={};
   debug = false;
   toPoints(points: Array<Point>) {
     if (!points) {
@@ -63,7 +86,10 @@ export class MainComponent implements OnInit {
       return new window.BMap.Point(p.lng, p.lat)
     })
   }
-
+  typeChange(e){
+    var dic = {0:"red",1:"yellow",2:"green"}
+    console.log(drawingManager.polylineOptions.strokeColor=dic[e]);
+  }
   addPoly(proj: Project) {
     var points = JSON.parse(proj.coordinate).map(c => ({ lng: c[0], lat: c[1] }));
     var newPolyLine = new window.BMap.Polyline(this.toPoints(points), { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
@@ -73,7 +99,15 @@ export class MainComponent implements OnInit {
   ngOnInit(): void {
     this.route.queryParamMap.subscribe(queryParams => {
       this.debug =Boolean( queryParams.get("debug"))
+     
     })
+
+    this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
+      this.projects1 = res.data;
+    });
+    this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
+      this.projects2 = res.data;
+    });
     this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => {
       this.staticHighWay = res.data[0];
     });
@@ -85,6 +119,18 @@ export class MainComponent implements OnInit {
       this.courses = res.data;
     });
   }
+  proj2Change($event,type){
+     map.clearOverlays();
+     var proj:any ={} ;
+    if(type==1){
+    }else{
+       proj = this.projects2.find(f=>f.id==$event);
+    }
+    proj = this.projects1.find(f=>f.id==$event);
+    this.addPoly(proj);
+    var points = this.corToPoint(proj.coordinate);
+    map.setViewport(points);
+  }
   toHighWay() {
   
     this.highShow = !this.highShow;
@@ -120,30 +166,11 @@ export class MainComponent implements OnInit {
   }
 
 
-  constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
-    //定位山西省地图
-    this.opts = {
-      centerAndZoom: {
-        lat: 37.78663390039693,
-        lng: 112.43176242674386,
-        zoom: 15
-      },
-
-    }
-
-
-
-
-    this.polylineOptions = {
-      strokeColor: 'yellow',
-      strokeWeight: 10
-    }
-
-  }
-  corToPoint(json:string){
+  corToPoint(json:string):Array<{lng:number,lat:number}>{
    return JSON.parse(json).map(r=>({lng:r[0],lat:r[1]}));
   }
   highLight(i:number,proj:Project) {
+    this.currProj= Object.assign({},proj);
     var overlays = map.getOverlays();
     timer(0, 200)
       .pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
@@ -154,7 +181,20 @@ export class MainComponent implements OnInit {
         }
       });
 
-    map.setViewport(this.corToPoint(proj.coordinate))
+      var points = this.corToPoint(proj.coordinate);
+    //   var center = {lng:0,lat:0}
+    //   points.forEach(p => {
+    //     center.lng+=p.lng;
+    //     center.lat+=p.lat;
+    //   });
+    //   center.lng=center.lng/points.length;
+    //   center.lat=center.lat/points.length;
+    //   var label = new BMap.Label(proj.name, {
+    //     position: center 
+    // });
+    // map.addOverlay(label);
+
+    map.setViewport(points);
   }
   
 
@@ -179,89 +219,86 @@ export class MainComponent implements OnInit {
     (window as any).map = polyline.getMap();
     this.setBound();
     (window as any).map.setMapStyleV2({ styleJson: theme });
+    map.enableScrollWheelZoom(true);
+    if(this.debug){
+
+    
     this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
-      map.enableScrollWheelZoom(true);
+     
       // Script Loaded Successfully
-      if(this.debug){
-
-        var drawingManager = this.initDrawingTool();
-        drawingManager.addEventListener("mousedown", e => {
-          alert(e)
+   
+        // drawingManager.hook=(point:Point)=>{
+        //     return BMapLib.GeoUtils.isPointOnPolyline(point,this.preCords);
+        // }
+
+        drawingManager.addEventListener('overlaycomplete', e => {
+          var overlay = e.overlay;
+          if (!e.overlay.getBounds) {
+            return;
+          }
+          var bounds = e.overlay.getBounds();
+          var ne = bounds.getNorthEast();
+          var sw = bounds.getSouthWest();
+          var mercatorProjection = map.getMapType().getProjection();
+          var neMc = mercatorProjection.lngLatToPoint(ne);
+          var swMc = mercatorProjection.lngLatToPoint(sw);
+          var pathStr = "";
+          var geojsonStr = {};
+          var pathmcStr = "";
+          var path = overlay.getPath();
+          var coordinates = [];
+          for (var i = 0; i < path.length; i++) {
+            pathStr += path[i].lng + "," + path[i].lat + ",";
+            var mc = mercatorProjection.lngLatToPoint(path[i]);
+            pathmcStr += mc.x + "," + mc.y + ",";
+            coordinates.push([path[i].lng, path[i].lat]);
+          }
+          pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
+          pathStr = pathStr.substr(0, pathStr.length - 1);
+          if (overlay.toString() == '[object Polyline]') {
+            geojsonStr = {
+              "type": "LineString",
+              "coordinates": coordinates
+            };
+          }
+          else if (overlay.toString() == '[object Polygon]') {
+            geojsonStr = {
+              "type": "Polygon",
+              "coordinates": [coordinates]
+            };
+          }
+          if (this.type == CordType.PROJ) {
+            this.proj.course = this.currentCouseId;
+            this.proj.coordinate = JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-1');
+          }
+          else if (this.type == CordType.COURSE) {
+            this.course.coordinate = JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-2');
+          }
+          else if (this.type == CordType.SECTION) {
+            this.section.project = this.currentProjId;
+            this.section.coordinate = JSON.stringify(coordinates);
+            this.modalService.open('custom-modal-3');
+          }
+          document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
+            + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
+            + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
+            + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
+            + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
         });
       
-      drawingManager.addEventListener('overlaycomplete', e => {
-        var overlay = e.overlay;
-        if (!e.overlay.getBounds) {
-          return;
-        }
-        var bounds = e.overlay.getBounds();
-
-        var ne = bounds.getNorthEast();
-        var sw = bounds.getSouthWest();
-        var mercatorProjection = map.getMapType().getProjection();
-        var neMc = mercatorProjection.lngLatToPoint(ne);
-        var swMc = mercatorProjection.lngLatToPoint(sw);
-        var pathStr = "";
-        var geojsonStr = {};
-        var pathmcStr = "";
-        var path = overlay.getPath();
-        var coordinates = [];
-        for (var i = 0; i < path.length; i++) {
-          pathStr += path[i].lng + "," + path[i].lat + ",";
-          var mc = mercatorProjection.lngLatToPoint(path[i]);
-          pathmcStr += mc.x + "," + mc.y + ",";
-          coordinates.push([path[i].lng, path[i].lat]);
-        }
-        pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
-        pathStr = pathStr.substr(0, pathStr.length - 1);
-        if (overlay.toString() == '[object Polyline]') {
-          geojsonStr = {
-            "type": "LineString",
-            "coordinates": coordinates
-          };
-        } else if (overlay.toString() == '[object Polygon]') {
-          geojsonStr = {
-            "type": "Polygon",
-            "coordinates": [coordinates]
-          };
-        }
-
-        if (this.type == CordType.PROJ) {
-          this.proj.course = this.currentCouseId;
-          this.proj.coordinate = JSON.stringify(coordinates);
-          this.modalService.open('custom-modal-1');
-
-        } else if (this.type == CordType.COURSE) {
-
-          this.course.coordinate = JSON.stringify(coordinates);
-          this.modalService.open('custom-modal-2');
-
-        } else if (this.type == CordType.SECTION) {
-          this.section.coordinate = JSON.stringify(coordinates);
-          this.modalService.open('custom-modal-3');
-        }
-        document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
-          + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
-          + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
-          + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
-          + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
-
-
-      });
-    }
     }).catch(error => console.log(error));
-  
+    }
     console.log('polyline loaded', polyline)
   }
 
+
+
   public polylineClicked({ polyline }): void {
     console.log('polyline clicked', polyline)
   }
 
-  overlaycomplete(e) {
-
-
-  };
   closeModal(id: string) {
     this.modalService.close(id);
   }
@@ -311,40 +348,7 @@ export class MainComponent implements OnInit {
       map.setMinZoom(8);
     });
   }
-  initDrawingTool():any {
-
-    var styleOptions = {
-      strokeColor: "red",    //边线颜色。
-      fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
-      strokeWeight: 3,       //边线的宽度，以像素为单位。
-      strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
-      fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
-      strokeStyle: 'solid' //边线的样式，solid或dashed。
-    }
 
-
-
-    var mapOptions = {
-      enableMapClick: true
-    }
-
-
-    //实例化鼠标绘制工具
-    var drawingManager = new BMapLib.DrawingManager(map, {
-      isOpen: true, //是否开启绘制模式
-      enableDrawingTool: true, //是否显示工具栏
-      drawingToolOptions: {
-        // anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
-        offset: new BMap.Size(5, 5), //偏离值
-        scale: 0.8 //工具栏缩放比例
-      },
-      circleOptions: styleOptions, //圆的样式
-      polylineOptions: styleOptions, //线的样式
-      polygonOptions: styleOptions, //多边形的样式
-      rectangleOptions: styleOptions //矩形的样式
-    });
-    return drawingManager;
-  }
 }
 
 

src/assets/DrawingManager.js

+
+
 /**
  * @fileoverview 百度地图的鼠标绘制工具，对外开放。
  * 允许用户在地图上点击完成鼠标绘制的功能。
@@ -1034,6 +1036,10 @@ var BMAP_DRAWING_MARKER    = "marker",     // 鼠标画点模式
             if(me.controlButton == "right" && (e.button == 1 || e.button==0)){
                 return ;
             }
+            // //添加hook处理
+            // if(me.hook&&!me.hook(e.point)){
+            //     return;
+            // }
             points.push(e.point);
             drawPoint = points.concat(points[points.length - 1]);
             if (points.length == 1) {
@@ -1642,3 +1648,35 @@ var BMAP_DRAWING_MARKER    = "marker",     // 鼠标画点模式
 
 })();
 
+
+
+var styleOptions = {
+    strokeColor: "red",    //边线颜色。
+    fillColor: "red",      //填充颜色。当参数为空时，圆形将没有填充效果。
+    strokeWeight: 3,       //边线的宽度，以像素为单位。
+    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
+    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
+    strokeStyle: 'solid' //边线的样式，solid或dashed。
+  }
+
+
+
+  var mapOptions = {
+    enableMapClick: true
+  }
+
+
+  //实例化鼠标绘制工具
+  var drawingManager = new BMapLib.DrawingManager(map, {
+    isOpen: false, //是否开启绘制模式
+    enableDrawingTool: true, //是否显示工具栏
+    drawingToolOptions: {
+      // anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
+      offset: new BMap.Size(5, 5), //偏离值
+      scale: 0.8 //工具栏缩放比例
+    },
+    circleOptions: styleOptions, //圆的样式
+    polylineOptions: styleOptions, //线的样式
+    polygonOptions: styleOptions, //多边形的样式
+    rectangleOptions: styleOptions //矩形的样式
+  });