latest

angular.json

@@ -33,7 +33,9 @@
             ],
             
             "scripts":[
-               
+               "src/getscript.js",
+               "src/assets/GeoUtils.js",
+               "src/assets/mapv.js"
             ],
             "es5BrowserSupport": true
           },

src/app/main/main.component.html

@@ -21,11 +21,11 @@
        <option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
      </select>
 </div> 
-<baidu-map #map [options]="opts">
+<!-- <baidu-map #map [options]="opts">
   <polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)"
     (clicked)="polylineClicked($event)"></polyline>
-</baidu-map>
- 
+</baidu-map> -->
+ <div id="baidu-map"></div>
 <div class="main">
   <div class="left">
     <fieldset>

src/app/main/main.component.less

@@ -72,7 +72,7 @@
 .focus{
     background: #ea262d96!important;
 }
-baidu-map{
+#baidu-map{
     width: 100%;
     height: 900px;
     display: block;

src/app/main/main.component.ts

@@ -14,7 +14,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { IdService } from '../services/id.service';
 import { SelfMapService } from '../services/map.service';
 
-declare var map: any;
+
 declare var BMap: any;
 declare var BMapLib: any;
 declare var drawingManager: any;
@@ -45,7 +45,7 @@ export class MainComponent implements OnInit {
   curiveLength:number = 10;
   theme: any;
   markers: any;
-
+  map: any;
   constructor(private m:SelfMapService, private router:Router, private idService: IdService, private route: ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
     //定位山西省地图
     this.opts = {
@@ -115,7 +115,7 @@ export class MainComponent implements OnInit {
     var toPoints = this.m.toPoints(points,this.curiveLength,this.curive);
     var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
     (newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
-    map.addOverlay(newPolyLine);
+    this.map.addOverlay(newPolyLine);
    // var newPoints = this.corToPoint(proj.coordinate);
    // this.m.animationLine(newPoints);
 
@@ -124,6 +124,16 @@ export class MainComponent implements OnInit {
     this.router.navigate(['/video']);
   }
   ngOnInit(): void {
+
+    this.map = new window.BMap.Map(document.getElementById("baidu-map"), { 
+      centerAndZoom: {
+      lat: 37.78663390039693,
+      lng: 112.43176242674386,
+      zoom: 10,
+    }});
+    this.map.setMapStyleV2({ styleJson: theme });
+    this.map.enableScrollWheelZoom(true);
+    this.map.centerAndZoom("山西省",11);
     this.route.queryParamMap.subscribe(queryParams => {
       this.debug = Boolean(queryParams.get("debug"))
     })
@@ -167,7 +177,7 @@ export class MainComponent implements OnInit {
  
   }
   proj2Change($event, type) {
-    map.clearOverlays();
+    this.map.clearOverlays();
     var proj: any = {};
     if (type == 1) {
     } else {
@@ -176,7 +186,7 @@ export class MainComponent implements OnInit {
     proj = this.projects1.find(f => f.id == $event);
     this.addPoly(proj);
     var points = this.corToPoint(proj.coordinate);
-    map.setViewport(points);
+    this.map.setViewport(points);
   }
   loadLabels(data){
 
@@ -197,7 +207,7 @@ export class MainComponent implements OnInit {
         var points =  this.loadPolys(res,true);
       });
     }else{
-      map.centerAndZoom("山西省",8);
+      this.map.centerAndZoom("山西省",8);
     }
 
   }
@@ -217,7 +227,7 @@ export class MainComponent implements OnInit {
   }
 
   toNormal() {
-    map.clearOverlays();
+    this.map.clearOverlays();
     this.normalShow = !this.normalShow;
 
 
@@ -237,7 +247,7 @@ export class MainComponent implements OnInit {
   }
   highLight(i: number, obj, type) {
     this.currProj = Object.assign({}, obj);
-    var overlays = map.getOverlays();
+    var overlays = this.map.getOverlays();
     var cur = overlays.find(o => o.id == type + obj.id);
     timer(0, 200)
       .pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
@@ -252,7 +262,7 @@ export class MainComponent implements OnInit {
 
     //标段不定位
     if(type!='s'){
-      map.setViewport(points);
+      this.map.setViewport(points);
     }
 
 
@@ -320,9 +330,9 @@ export class MainComponent implements OnInit {
   
     this.setBound();
 
-    (window as any).map.setMapStyleV2({ styleJson: theme });
-    map.enableScrollWheelZoom(true);
-    map.centerAndZoom("山西省",11);
+    // (window as any).map.setMapStyleV2({ styleJson: theme });
+    // this.map.enableScrollWheelZoom(true);
+    // this.map.centerAndZoom("山西省",11);
  
     this.dynamicScriptLoader.load('geouti',"mapv").then();
     if (this.debug) {
@@ -396,7 +406,7 @@ export class MainComponent implements OnInit {
   setBound() {
 
     
-    var project = map.getMapType().getProjection();
+    var project = this.map.getMapType().getProjection();
     var getPathStr = function (overlay) {
       var pathStr = "";
       var path = overlay.getPath();
@@ -430,11 +440,11 @@ export class MainComponent implements OnInit {
             var SE_JW = "170.672126, -68.045308 ;";     //东南角
             //3.添加环形遮罩层
             var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {strokeColor:"none",strokeOpacity:0,fillColor:"#0002069c",fillOpacity:"0.5"}); //建立多边形覆盖物
-            map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
+            this.map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
             //4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
             var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#16e8d6",fillColor:"",fillOpacity:"0"});
-            map.addOverlay(ply);
-            map.setViewport(ply.getPath());//调整视野
+            this.map.addOverlay(ply);
+            this.map.setViewport(ply.getPath());//调整视野
 
       //获取行政区域
      //  map.clearOverlays();        //清除地图覆盖物       
@@ -481,7 +491,7 @@ export class MainComponent implements OnInit {
    * @param type "s" = section ,"p"=project
    */
   getOverlayById(id: number, type: string = "p") {
-    var overlays = map.getOverlays();
+    var overlays = this.map.getOverlays();
     return overlays.find(o => o.id == type + id);
   }
   addLabel(points:Array<Point>,proj){
@@ -500,7 +510,7 @@ export class MainComponent implements OnInit {
       </div>`, {
         position: center 
     });
-    map.addOverlay(label);
+    this.map.addOverlay(label);
 
   }
 
@@ -515,7 +525,7 @@ ${label.name}
   position: JSON.parse(label.coordinate),
   // offset:{width:5,height:-10}
 });
-map.addOverlay(label);
+this.map.addOverlay(label);
 
 }
 }

src/assets/mapv.js

@@ -483,6 +483,9 @@
       
       
         render: function (points, context) {
+            if(window.timeoutIDForLine){
+                clearTimeout(window.timeoutIDForLine)
+            }
             console.log(points)
             var index = 1;
             var step = 2;
@@ -490,6 +493,7 @@
             var movStart = Object.assign({},points[0]);
             var next = points[index];
             var canvas = context.canvas;
+            
             var backDom = document.createElement('canvas'),
                 backCtx = backDom.getContext('2d');
             backDom.width = canvas.width;
@@ -557,7 +561,7 @@
                     movStart =Object.assign({},points[index - 1]) ; 
                     current =Object.assign({},movStart) ;
                 }
-                setTimeout(renderBody, 1);
+                window.timeoutIDForLine=setTimeout(renderBody, 1);
 
             }
             renderBody();

src/getscript.js

@@ -2,51 +2,51 @@ window.TILE_VERSION = {
     "ditu": {
         "normal": {
             "version": "088",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "satellite": {
             "version": "009",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "normalTraffic": {
             "version": "081",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "satelliteTraffic": {
             "version": "083",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "mapJS": {
             "version": "104",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "satelliteStreet": {
             "version": "083",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "earthVector": {
             "version": "001",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         }
     },
     "webapp": {
         "high_normal": {
             "version": "001",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "lower_normal": {
             "version": "002",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         }
     },
     "api_for_mobile": {
         "vector": {
             "version": "002",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         },
         "vectorIcon": {
             "version": "002",
-            "updateDate": "20190726"
+            "updateDate": "20190802"
         }
     }
 };