解决画线的优化问题

.gitignore

@@ -2,3 +2,4 @@ wwwroot/*.js
 node_modules
 typings
 dist
+src/assets/maptile
\ No newline at end of file

angular.json

@@ -33,7 +33,7 @@
             ],
             
             "scripts":[
-        
+               
             ],
             "es5BrowserSupport": true
           },

src/app/dynamic-script.service.ts

@@ -9,7 +9,8 @@ export const ScriptStore: Scripts[] = [
 
   { name: 'drawing', src: '/assets/DrawingManager.js' },
   { name: 'geouti', src: '/assets/GeoUtils.js' },
-  { name: 'mapv', src: '/assets/mapv.min.js' },
+  { name: 'mapv-m', src: '/assets/mapv.min.js' },
+  { name: 'mapv', src: '/assets/mapv.js' },
   { name: 'jsencrypt', src: '/assets/jsencrypt.min.js' },
   { name: 'jswebcontrol', src: '/assets/jsWebControl-1.0.0.min.js' },
   {name:'jquery',src:"/assets/jquery-1.12.4.min.js"}

src/app/main/main.component.html

 <div *ngIf="debug">
+  标注：<input id="markerText" type="text">
   theme:
   <input type="textarea" [(ngModel)]="theme">
   <button (click)="setTheme(theme)">set theme</button>
@@ -282,19 +283,18 @@
       <button (click)="closeModal('custom-modal-3');">Close</button>
     </jw-modal>
     <jw-modal id="marker">
-        <h1>添加监控</h1>
-        <p>监控名称: <input type="text" [(ngModel)]="camera.name" /></p>
-        <p>section: 
-          <select [(ngModel)]="camera.section">
-            <option *ngFor="let s of allsecs" [value]="s.id">{{s.name}}</option>
-          </select>
-        
-        </p>
-        <p>coordinate: <input type="text" [(ngModel)]="camera.coordinate" /></p>
+        <h1>添加marker</h1>
+        <p>marker 名称: <input type="text" [(ngModel)]="marker.name" /></p>
+        <p>子标题 名称: <input type="text" [(ngModel)]="marker.mark" /></p>
+        <p>divStyle:
+          <input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle"/>
+      </p>
+        <p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
       
-       
+ 
+
     
-        <button (click)="addCamera(camera)">添加</button>
+        <button (click)="addMarker(marker)">添加</button>
         <button (click)="closeModal('marker');">Close</button>
       </jw-modal>
 

src/app/main/main.component.ts

@@ -44,6 +44,7 @@ export class MainComponent implements OnInit {
   curive:boolean = false;
   curiveLength:number = 10;
   theme: any;
+  markers: 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) {
     //定位山西省地图
@@ -92,6 +93,7 @@ export class MainComponent implements OnInit {
   currProj: Project = {};
   secs: Array<Scetion> = [];
   camera:Camera={};
+  marker:any={};
   debug = false;
 
   typeChange(e) {
@@ -141,6 +143,10 @@ export class MainComponent implements OnInit {
     this.http.get<any>(this.s.basePath + `/camera/total`).subscribe(res => {
       this.cameraSum = res.data[0];
     });
+    this.http.get<any>(this.s.basePath + `/camera/list`).subscribe(res => {
+      this.markers = res.data;
+      // this.loadLabels();
+    });
     this.http.get<any>(this.s.basePath + "/course/list").subscribe(res => {
       this.courses = res.data;
       //加载全局线路
@@ -148,9 +154,17 @@ export class MainComponent implements OnInit {
         this.loadPolys(res,false);
       }, 5000);
     });
+    this.http.get<any>(this.s.basePath + "/mapLable/list").subscribe(res => {
+      // this.maplabes = res.data;
+      //加载labels
+      setTimeout(() => {
+        this.loadLabels(res.data);
+      }, 5000);
+    });
     this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => {
       this.allsecs = res.data;
     });
+ 
   }
   proj2Change($event, type) {
     map.clearOverlays();
@@ -164,6 +178,14 @@ export class MainComponent implements OnInit {
     var points = this.corToPoint(proj.coordinate);
     map.setViewport(points);
   }
+  loadLabels(data){
+
+    //var labels = [{lng:112.43176242674386,lat:37.78663390039693,text:"test1"}];
+    // var labels = data.map(d=>({...(JSON.parse(data.coordinate)),text:d.name}));
+    data.forEach(label => {
+      this.addLabel2(label);
+    });
+  }
   toHighWay() {
 
     this.highShow = !this.highShow;
@@ -276,6 +298,14 @@ export class MainComponent implements OnInit {
       this.modalService.close('marker');
     })
   }
+  addMarker(marker){
+
+    this.http.post<Scetion>(this.s.basePath + "/mapLable/add", marker).subscribe(res => {
+      this.modalService.close('marker');
+    })
+  //  localStorage.setItem("marker_"+marker.name,JSON.stringify(marker.coordinate));
+  //  this.closeModal('marker')
+  }
   addProj(proj: Project) {
     this.http.post(this.s.basePath + "/project/add", proj).subscribe(res => {
       console.log(res)
@@ -294,7 +324,7 @@ export class MainComponent implements OnInit {
     map.enableScrollWheelZoom(true);
     map.centerAndZoom("山西省",11);
  
-    this.dynamicScriptLoader.load('geouti','mapv').then();
+    this.dynamicScriptLoader.load('geouti',"mapv").then();
     if (this.debug) {
 
       this.dynamicScriptLoader.load('drawing').then(data => {
@@ -337,7 +367,7 @@ export class MainComponent implements OnInit {
             //   "coordinates": [coordinates]
             // };
           }else if(overlay.toString() == "[object Marker]"){
-            this.camera.coordinate = JSON.stringify(coordinates[0]);
+            this.marker.coordinate = JSON.stringify(coordinates[0]);
             this.modalService.open('marker');
           }
 
@@ -473,6 +503,21 @@ export class MainComponent implements OnInit {
     map.addOverlay(label);
 
   }
+
+  addLabel2(label){
+  
+var label = new BMap.Label(`
+<div style="background:${label.divStyle}" class="label-panel2">
+${label.name}
+</div>
+<div class='mark'>${label.mark}</div>
+`, {
+  position: JSON.parse(label.coordinate),
+  // offset:{width:5,height:-10}
+});
+map.addOverlay(label);
+
+}
 }
 
 

src/app/services/map.service.ts

@@ -79,6 +79,7 @@ export class SelfMapService {
                                 }]
  */
   animationLine(points:Array<Point>){
+   // if(points.length>5){return;}
     // var randomCount = 500;
 
     // var node_data = {
@@ -111,75 +112,65 @@ export class SelfMapService {
     // var results = fbundling();  
    // var points = [{"lng":112.801023,"lat":38.053938},{"lng":112.81942,"lat":37.987989},{"lng":112.857364,"lat":37.853174},{"lng":112.842991,"lat":37.793431}];
     var data = [];
-    var timeData = [];
+  //  var timeData = [];
 
     
          var coordinates = [];
         for (var j = 0; j < points.length; j++) {
              coordinates.push([points[j].lng, points[j].lat]);
-             timeData.push({
-                 geometry: {
-                    type: 'Point',
-                    coordinates: [points[j].lng, points[j].lat]
-               },
-               count: 1,
-                time: j
-             });
+            //  timeData.push({
+            //      geometry: {
+            //         type: 'Point',
+            //         coordinates: [points[j].lng, points[j].lat]
+            //    },
+            //    count: 1,
+            //     time: j
+            //  });
         }
         data.push({
-            geometry: {
-               type: 'LineString',
-               coordinates: coordinates
-            }
-         });
-    
-
-     var dataSet = new mapv.DataSet(data);
-
-    var options = {
-        strokeStyle: 'rgba(55, 50, 250, 0.3)',
-        globalCompositeOperation: 'lighter',
-        shadowColor: 'rgba(55, 50, 250, 0.5)',
-        shadowBlur: 10,
-        methods: {
-            click: function (item) {
-            }
-        },
-        lineWidth: 5.0,
-        draw: 'simple'
-    }
-  //   var options = {
-  //     strokeStyle: 'rgba(0,57,255,0.5)',
-  //     coordType: 'bd09mc',
-  //     // globalCompositeOperation: 'lighter',
-  //     shadowColor: 'rgba(53,57,255,0.2)',
-  //     shadowBlur: 3,
-  //     lineWidth: 3.0,
-  //     draw: 'simple'
-  // }
-
-
-    var mapvLayer1 = new mapv.baiduMapLayer(map, dataSet, options);
-
-     var dataSet2 = new mapv.DataSet(timeData);
-
-     var options2 = {
-        fillStyle: 'rgba(200, 200, 50, 1)',
-        globalCompositeOperation: 'lighter',
-        size: 2.5,
-        animation: {
-            type: 'time',
-            stepsRange: {
-                start: 0,
-                end: 100
-            },
-            trails: 20,
-            duration: 2,
-        },
-        draw: 'simple'
-    }
+          geometry: {
+             type: 'LineString',
+             coordinates: coordinates
+          }
+       });
+       var dataSet = new mapv.DataSet(data);
+
+       var options = {
+           strokeStyle: 'rgba(0, 0, 255, 1)',
+           globalCompositeOperation: 'lighter',
+           shadowColor: 'rgba(0, 0, 255, 1)',
+           shadowBlur: 10,
+           methods: {
+               click: function (item) {
+               }
+           },
+           lineWidth: 5.0,
+           draw: 'simple'
+       }
+   
+       var mapvLayer1 = new mapv.baiduMapLayer(map, dataSet, options);
+
+   
+
+    //  var dataSet2 = new mapv.DataSet(timeData);
+
+    //  var options2 = {
+    //     fillStyle: 'rgba(200, 200, 50, 1)',
+    //     globalCompositeOperation: 'lighter',
+    //     size: 2.5,
+    //     animation: {
+    //         type: 'time',
+    //         stepsRange: {
+    //             start: 0,
+    //             end: 100
+    //         },
+    //         trails: 1,
+    //         duration: 1,
+    //     },
+    //     draw: 'simple'
+    // }
 
-     var mapvLayer2 = new mapv.baiduMapLayer(map, dataSet2, options2);
+    //  var mapvLayer2 = new mapv.baiduMapLayer(map, dataSet2, options2);
 
   }
   /**

src/app/video/video.component.ts

@@ -158,7 +158,7 @@ export class VideoComponent implements OnInit {
       if (node && node.getChildren().length === 0 && node.isExpanded) {
         this.http.get( this.d.basePath+ request+node.key).subscribe(res=>{
           console.log(res);
-          node.addChildren((res as any).data.map((d,index)=>({title:d.name || d.cameraName,key:d.id ||d.cameraIndexCode,index:index })));
+          node.addChildren((res as any).data.map((d,index)=>({title:d.name || d.cameraName,key:d.id ||d.cameraIndexCode,index:index,isLeaf:node.level==2 })));
         });
       }
       // if (node && node.getChildren().length === 0 && node.isExpanded) {
@@ -222,7 +222,9 @@ export class VideoComponent implements OnInit {
             gpuMode: gpuMode,                               //是否开启GPU硬解
             wndId:wndId                                     //可指定播放窗口
         })
-    })
+    }).then(msg=>{
+      console.log(msg)
+    });
   }
   startVideo() {
    	// 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
@@ -301,9 +303,10 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700);    // 多1个像素点防止
       ////////////////////////////////// 请自行修改以下变量值	////////////////////////////////////		
       var appkey = "29359046";                           //综合安防管理平台提供的appkey，必填
       var secret = setEncrypt("zRjsouOfWQQW5Yl4Ddgl");   //综合安防管理平台提供的secret，必填
-      var ip = "192.168.19.175";                           //综合安防管理平台IP地址，必填
+    //  var ip = "192.168.19.175";                           //综合安防管理平台IP地址，必填
+      var ip = "221.131.9.171";                           //综合安防管理平台IP地址，必填
       var playMode = 0;                                  //初始播放模式：0-预览，1-回放
-      var port = 443;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
+      var port = 1443;                                    //综合安防管理平台端口，若启用HTTPS协议，默认443
       var snapDir = "D:\\SnapDir";                       //抓图存储路径
       var videoDir = "D:\\VideoDir";                     //紧急录像或录像剪辑存储路径
       var layout = "4x6";                                //playMode指定模式的布局

src/assets/DrawingManager.js

@@ -946,8 +946,30 @@ var BMAP_DRAWING_MARKER    = "marker",     // 鼠标画点模式
          */
         var clickAction = function (e) {
             // 往地图上添加marker
+            //TODO: 添加label
             var marker = new BMap.Marker(e.point, me.markerOptions);
-            map.addOverlay(marker);
+        //     var label = new BMap.Label(`
+        //     <div class="label-panel">
+        //     <script>
+             
+        //         function saveToLocal(){
+        //             var lng=${e.point.lng};
+        //             var lat=${e.point.lat};
+        //             var text = document.getElementById("markerText");
+        //             localStorage.setItem(text,lng+":"+lat);
+        //             window.markerDisablled=false;
+        //         }
+        //     </script>
+        //         <input type="input" id="markerText">
+        //         <button onclick="saveToLocal()">保存</button>
+        //     </div>`, {
+        //       position: e.point
+        //   });
+
+              map.addOverlay(marker);
+
+
+           // window.markerDisabled=true;
             me._dispatchOverlayComplete(marker);
         }