latest

proxy.json

 
-
 [
     {
       "context": [
@@ -8,7 +7,7 @@
         "/course",
         "/camera"
       ],
-      "target": "http://localhost:8080",
+      "target": "http://localhost:8081",
       "secure": false
     }
   ]
\ No newline at end of file

src/app/api/api/default.service.ts

@@ -41,7 +41,8 @@ import { Observable } from 'rxjs';
 @Injectable()
 export class DefaultService {
 
-    public basePath = 'http://localhost:8080';
+    public basePath = 'http://localhost:8081';
+     //public basePath = 'http://192.168.19.200:8081';
     public defaultHeaders = new HttpHeaders();
     public configuration = new Configuration();
 

src/app/app.component.html

 
-<h1>
+<h1 class="gradient">
   山西省公路建设智慧监管指挥平台
 </h1>
 

src/app/app.component.less

 h1{
     text-align: center;
-}
\ No newline at end of file
+}
+
+.gradient{
+
+    background: radial-gradient(#fff,#1184c2);
+   
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: 20px;
+    /* -webkit-animation: neon6 1.5s ease-in-out infinite alternate; */
+    /* animation: neon6 0.5s ease-in-out infinite alternate; */
+    // text-shadow: 0px 0px 18px rgb(167, 223, 102);
+}
+.gradient:hover{
+}
+
+@keyframes neon6 {
+    from {
+   
+    }
+    to {
+        text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
+    }
+  }
\ No newline at end of file

src/app/dynamic-script.service.ts

@@ -9,6 +9,7 @@ export const ScriptStore: Scripts[] = [
 
   { name: 'drawing', src: '/assets/DrawingManager.js' },
   { name: 'geouti', src: '/assets/GeoUtils.js' },
+  { name: 'mapv', src: '/assets/mapv.min.js' }
 
 ];
 

src/app/main/main.component.html

-<header></header>
+<baidu-map #map [options]="opts"  >
+  <polyline  [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
+</baidu-map>
 <div class="main">
   <div class="left">
-  
     <section>
        <div *ngIf="debug">
+         theme:
+         <input type="textarea" [(ngModel)]="theme">
+         <button (click)="setTheme(theme)">set theme</button>
+         set curive:
+         <input type="checkbox" [(ngModel)]="curive">
+         <input type="number" [(ngModel)]="curiveLength">
         <select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
           <option value="0">project</option>
           <option value="1">course</option>
@@ -20,11 +27,35 @@
             </select>
       </div>
         <!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
-       <button [ngClass]="{focus:highShow}" (click)="toHighWay()">高速公路</button>
-      <div *ngIf="!highShow">
-        <label>项目总数：{{staticHighWay.total}}个</label>
-        <label>总建设里程：{{staticHighWay.mileage}}Km    </label>
-        <label>总投资：{{staticHighWay.capital}}亿</label>
+       <button  (click)="toHighWay()">高速公路</button>
+      <div class="proj-info" *ngIf="!highShow">
+        <label>
+          <div>
+
+            项目总数：
+        </div>
+        <div>
+          {{staticHighWay.total}}个
+        </div>
+      </label>
+      <label>
+        <div>
+
+          总建设里程：
+      </div>
+      <div>
+        {{staticHighWay.mileage}}Km
+      </div>
+    </label>
+    <label>
+      <div>
+
+        总投资：
+    </div>
+    <div>
+      {{staticHighWay.capital}}亿
+    </div>
+  </label>
       </div>
        <section  *ngIf="highShow" class="sub">
           <div class ="item" *ngFor="let prj of projects;let i=index">
@@ -60,10 +91,7 @@
      <div id="polylineLength"></div>
      <div id="result"></div>
 
-      <baidu-map #map [options]="opts" >
-          <polyline  [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
 
-        </baidu-map>
    </div>
    <div class="right">
       <section>

src/app/main/main.component.less

 .main{
-    display: grid;
-    grid-template-columns: 15% auto 15%;
-    grid-template-rows:850px;
+    // display: grid;
+    // grid-template-columns: 15% auto 15%;
+    // grid-template-rows:850px;
     section{
         padding: 1em;
-        background: #3885b391;
+        background: #3885b338;
         margin: 5px;
-        border: 4px solid #3885b3;
+        border-radius: 4px;
+        border: 1px solid #613d3d;
         button{
-            box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
-            background: #43a5dd;
-            color: white;
-            border-radius: 4px;
+            background: #dbdbc90f;
+            color: #16e8d6;
+            border-radius: 9px;
             width: 130px;
             height: 39px;
             display: block;
             margin: 0.3em;
             font-size: initial;
+            border: 2px solid #f3f42678;
+            &:hover{
+                background: #48a9a0;
+            }
         }
+    
         label{
-            display: block;
+            display: grid;
+            grid-template-columns: 77% auto;
+            color: #eaab4e;
         }
         &.sub{
            
@@ -37,7 +44,9 @@
     }
     .left{
      
-        
+        width: 292px;
+        position: absolute;
+        top: 188px;
     }
     .map{
       
@@ -48,4 +57,9 @@
 }
 .focus{
     background: #ea262d96!important;
-}
\ No newline at end of file
+}
+baidu-map{
+    width: 100%;
+    height: 1000px;
+    display: block;
+}

src/app/services/map.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { MapService } from './map.service';
+
+describe('MapService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: MapService = TestBed.get(MapService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/map.service.ts

+import { Injectable } from '@angular/core';
+import { Point } from 'angular2-baidu-map';
+declare var mapv;
+declare var map;
+@Injectable({
+  providedIn: 'root'
+})
+export class SelfMapService {
+
+  
+  constructor() { 
+
+  }
+
+  
+/**
+ * 转换为平滑点
+ * @param points 点
+ */
+  toPoints(points: Array<Point>,cursiveLength:number,cursive:boolean) {
+
+    if (!points) {
+      return []
+    }
+    if(cursive){
+      var newPoints = this.getCurvePoints(points,{count:cursiveLength});
+      return newPoints.map(p => {
+        return new window.BMap.Point(p[0], p[1])
+      })
+    }else{
+      return points.map(p => {
+        return new window.BMap.Point(p[0], p[1])
+      })
+    }
+  }
+
+/**
+ * 将线进行动画效果
+ * @param data 线的数据：例如：[{
+                                    geometry: {
+                                        type: 'LineString',
+                                        coordinates: [[cityCenter1.lng, cityCenter1.lat], [cityCenter2.lng, cityCenter2.lat]]
+                                    },
+                                    count: 100 * Math.random()
+                                }]
+ */
+  animationLine(points:Array<Point>){
+    // var randomCount = 500;
+
+    // var node_data = {
+    //     "0":{"x":108.154518, "y":36.643346},
+    //     "1":{"x":121.485124, "y":31.235317},
+    // };
+
+    // var edge_data = [
+    //     {"source":1, "target":"0"}
+    // ]
+
+    // var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
+
+    // // 构造数据
+    // for (var i = 1; i < randomCount; i++) {
+    //     var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[(Math.random() * citys.length)]);
+    //     node_data[i] = {
+    //         x: cityCenter.lng - 5 + Math.random() * 10,
+    //         y: cityCenter.lat - 5 + Math.random() * 10,
+    //     }
+    //     edge_data.push(
+    //         {"source": ~~(i * Math.random()), "target": '0'}
+    //     );
+    // }
+
+    // var fbundling = mapv.utilForceEdgeBundling()
+    //                 .nodes(node_data)
+    //                 .edges(edge_data);
+
+    // 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 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
+             });
+        }
+        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'
+    }
+
+     var mapvLayer2 = new mapv.baiduMapLayer(map, dataSet2, options2);
+
+  }
+  /**
+  * 根据弧线的坐标节点数组
+  */
+ getCurvePoints (points, options) {
+  options = options || {};
+  var curvePoints = [];
+  for (var i = 0; i < points.length - 1; i++) {
+    //TODO:获取拐角的两个点
+    var p = this.getCurveByTwoPoints(points[i], points[i + 1], options.count);
+    if (p && p.length > 0) {
+      curvePoints = curvePoints.concat(p);
+    }
+  }
+  return curvePoints;
+}
+
+/**
+ * 根据两点获取曲线坐标点数组
+ * @param Point 起点
+ * @param Point 终点
+ */
+ getCurveByTwoPoints (obj1, obj2, count) {
+  console.info(obj1, obj2)
+  if (!obj1 || !obj2) {
+    return null;
+  }
+
+  var B1 = function (x) {
+    return 1 - 2 * x + x * x;
+  };
+  var B2 = function (x) {
+    return 2 * x - 2 * x * x;
+  };
+  var B3 = function (x) {
+    return x * x;
+  };
+
+  var curveCoordinates = [];
+
+  var count = count || 40; // 曲线是由一些小的线段组成的，这个表示这个曲线所有到的折线的个数
+  var isFuture = false;
+  var t, h, h2, lat3, lng3, j, t2;
+  var LnArray = [];
+  var i = 0;
+  var inc = 0;
+
+  if (typeof (obj2) == "undefined") {
+    if (typeof (curveCoordinates) != "undefined") {
+      curveCoordinates = [];
+    }
+    return;
+  }
+
+  var lat1 = parseFloat(obj1.lat);
+  var lat2 = parseFloat(obj2.lat);
+  var lng1 = parseFloat(obj1.lng);
+  var lng2 = parseFloat(obj2.lng);
+
+  // 计算曲线角度的方法
+  if (lng2 > lng1) {
+    if (parseFloat((lng2 - lng1) as any) > 180) {
+      if (lng1 < 0) {
+        lng1 = parseFloat((180 + 180 + lng1) as any);
+        lng2 = parseFloat((180 + 180 + lng2) as any);
+      }
+    }
+  }
+  // 此时纠正了 lng1 lng2
+  j = 0;
+  t2 = 0;
+  // 纬度相同
+  if (lat2 == lat1) {
+    t = 0;
+    h = lng1 - lng2;
+    // 经度相同
+  } else if (lng2 == lng1) {
+    t = Math.PI / 2;
+    h = lat1 - lat2;
+  } else {
+    t = Math.atan((lat2 - lat1) / (lng2 - lng1));
+    h = (lat2 - lat1) / Math.sin(t);
+  }
+  if (t2 == 0) {
+    t2 = (t + (Math.PI / 5));
+  }
+  h2 = h / 2;
+  lng3 = h2 * Math.cos(t2) + lng1;
+  lat3 = h2 * Math.sin(t2) + lat1;
+
+  for (i = 0; i < count + 1; i++) {
+    var x = lng1 * B1(inc) + lng3 * B2(inc) + lng2 * B3(inc);
+    var y = lat1 * B1(inc) + lat3 * B2(inc) + lat2 * B3(inc);
+    var lng1_src = obj1.lng;
+    var lng2_src = obj2.lng;
+
+    curveCoordinates.push([
+      (lng1_src < 0 && lng2_src > 0) ? x - 360 : x, y
+    ]);
+    inc = inc + (1 / count);
+  }
+  return curveCoordinates;
+}
+
+}

src/styles.less

 /* You can add global styles to this file, and also import other style files */
 /* MODAL STYLES
 -------------------------------*/
+.BMapLabel{
+  border:none!important;
+  position: absolute;
+  display: inline;
+  cursor: inherit;
+  background-color: #2196f3c4 !important;
+ 
+  padding: 1px;
+  white-space: nowrap;
+  font: 12px arial, sans-serif;
+  z-index: -7507572;
+  user-select: none;
+  left: 1163px;
+  top: 519px;
+  color: #fff!important;
+  border-radius: 7px!important;
+  padding: 10px!important;
+  border: none!important;
+  position: absolute;
+  display: inline;
+  cursor: inherit;
+  background-color: #010b129c !important;
+  padding: 1px;
+  white-space: nowrap;
+  font: 12px arial, sans-serif;
+  z-index: -7507572;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  left: 1163px;
+  top: 519px;
+  color: #fff !important;
+  border-radius: 7px!important;
+  padding: 10px!important;
+  border: 2px solid white !important;
+
+}
+
+.label-panel{
+  padding:4px;
+  font-size: 16px;
+}
+
 //Tree
 
 .tree-ngx {
@@ -182,3 +226,12 @@ body.jw-modal-open {
     /* body overflow is hidden to hide main scrollbar when modal window is open */
     overflow: hidden;
 }
+
+.label-panel{
+  .header {
+    color: #39ebff;
+  }
+  p{
+    padding: 0 10px;
+  }
+}
\ No newline at end of file