Skip to content

S
supervise-front
Commit 74c97dd6 by niuxiaolin
Options

latest ui 08/08/2019 16:35:30

parent 09370c7e
Showing with 136 additions and 248 deletions
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>
......@@ -63,11 +63,6 @@
<section *ngIf="highShow" class="sub">
<div class="item" *ngFor="let prj of projects;let i=index">
<label (click)="highLight(i,prj,'p');setPrj(prj);">{{prj.name}} </label>
<!-- <section class="sub">
<label (click)=" highLight(i,sec,'s');setCamera(sec);" *ngFor="let sec of prj.secs;let i=index">{{sec.name}}
</label>
</section> -->
</div>
</section>
......@@ -113,123 +108,6 @@
</div>
</div>
<!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
<!-- <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>
<section>
<button [ngClass]="{focus:normalShow}" (click)='toNormal()'>普通干线
</button>
<div *ngIf="!normalShow">
<label>
<div>
项目总数：
</div>
<div>
{{staticNormal.total}}个
</div>
</label>
<label>
<div>
总建设里程：
</div>
<div>
{{staticNormal.mileage}}Km
</div>
</label>
<label>
<div>
总投资：
</div>
<div>
{{staticNormal.capital}}亿
</div>
</label>
</div>
</section>
</div>
<div class="map">
<div id="polylineLength"></div>
<div id="result"></div>
</div>
<div class="right">
</div> -->
<!-- <section>
<button (click)="goToVideo()">视频监管
</button>
<label>监管项目:{{cameraSum.project}}个</label>
<label>监控点总计：{{cameraSum.total}} 个 </label>
</section>
<section>
<button>建设程序监管
</button>
</section>
<section>
<button>质量安全监管 </button>
<label>年度累计完成产值:</label>
<label>年度总目标产值： </label>
</section>
<section>
<button>造价监管
</button>
<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>
-->
<jw-modal id="custom-modal-1">
<h1>添加项目</h1>
<p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p>
......
src/app/main/main.component.less
......@@ -190,4 +190,10 @@ fieldset{
.tooltip:hover .tooltiptext {
visibility: visible;
}
\ No newline at end of file
}
#baidu-map{
width: 100%;
height: 900px;
display: block;
}
\ No newline at end of file
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,20 @@ export class MainComponent implements OnInit {
this.router.navigate(['/video']);
}
ngOnInit(): void {
this.dynamicScriptLoader.load('geouti',"mapv").then();
this.map = new window.BMap.Map(("baidu-map"), {
enableMapClick: true
});
(window as any).map=this.map;
this.map.setMapStyleV2({ styleJson: theme });
this.map.enableScrollWheelZoom(true);
this.map.enableContinuousZoom()
this.map.centerAndZoom("山西省",11);
this.setBound();
this.route.queryParamMap.subscribe(queryParams => {
this.debug = Boolean(queryParams.get("debug"))
})
this.route.queryParamMap.subscribe(queryParams => {
this.debug = Boolean(queryParams.get("debug"))
})
......@@ -167,7 +181,7 @@ export class MainComponent implements OnInit {
}
proj2Change($event, type) {
map.clearOverlays();
this.map.clearOverlays();
var proj: any = {};
if (type == 1) {
} else {
......@@ -176,7 +190,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 +211,7 @@ export class MainComponent implements OnInit {
var points = this.loadPolys(res,true);
});
}else{
map.centerAndZoom("山西省",8);
this.map.centerAndZoom("山西省",8);
}
}
......@@ -217,7 +231,7 @@ export class MainComponent implements OnInit {
}
toNormal() {
map.clearOverlays();
this.map.clearOverlays();
this.normalShow = !this.normalShow;
......@@ -237,7 +251,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 +266,18 @@ export class MainComponent implements OnInit {
//标段不定位
if(type!='s'){
map.setViewport(points);
// this.map.setViewport(points,{
// enableAnimation:true,
// delay:5000
// });
var view = this.map.getViewport(points,{enableAnimation:true,delay:2000});
this.map.panTo(view.center,{duration:1000});
setTimeout(() => {
// this.m.dispatchWheelEvent_Chrome(document.getElementById("baidu-map"),500);
this.map.centerAndZoom(view.center,view.zoom);
//this.map.dispatchWheelEvent_Chrome
}, 1000);
}
......@@ -315,80 +340,80 @@ export class MainComponent implements OnInit {
setTheme(theme){
(window as any).map.setMapStyleV2({ styleJson: theme });
}
public polylineLoaded(polyline: BPolyline): void {
(window as any).map = polyline.getMap();
// public polylineLoaded(polyline: BPolyline): void {
// this.map = polyline.getMap();
this.setBound();
// this.setBound();
(window as any).map.setMapStyleV2({ styleJson: theme });
map.enableScrollWheelZoom(true);
map.centerAndZoom("山西省",11);
// this.map.setMapStyleV2({ styleJson: theme });
// this.map.enableScrollWheelZoom(true);
// this.map.centerAndZoom("山西省",11);
this.dynamicScriptLoader.load('geouti',"mapv").then();
if (this.debug) {
this.dynamicScriptLoader.load('drawing').then(data => {
// Script Loaded Successfully
drawingManager.addEventListener('overlaycomplete', e => {
var overlay = e.overlay;
var coordinates = [];
if(overlay.getPath){
var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
coordinates.push([path[i].lng, path[i].lat]);
}
}else{
coordinates.push(overlay.getPosition())
}
if (overlay.toString() == '[object Polyline]') {
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');
}
}
else if (overlay.toString() == '[object Polygon]') {
// geojsonStr = {
// "type": "Polygon",
// "coordinates": [coordinates]
// };
}else if(overlay.toString() == "[object Marker]"){
this.marker.coordinate = JSON.stringify(coordinates[0]);
this.modalService.open('marker');
}
// this.dynamicScriptLoader.load('geouti',"mapv").then();
// if (this.debug) {
// this.dynamicScriptLoader.load('drawing').then(data => {
// // Script Loaded Successfully
// drawingManager.addEventListener('overlaycomplete', e => {
// var overlay = e.overlay;
// var coordinates = [];
// if(overlay.getPath){
// var path = overlay.getPath();
// for (var i = 0; i < path.length; i++) {
// coordinates.push([path[i].lng, path[i].lat]);
// }
// }else{
// coordinates.push(overlay.getPosition())
// }
// if (overlay.toString() == '[object Polyline]') {
// 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');
// }
// }
// else if (overlay.toString() == '[object Polygon]') {
// // geojsonStr = {
// // "type": "Polygon",
// // "coordinates": [coordinates]
// // };
// }else if(overlay.toString() == "[object Marker]"){
// this.marker.coordinate = JSON.stringify(coordinates[0]);
// this.modalService.open('marker');
// }
// 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)
}
// // 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)
}
// public polylineClicked({ polyline }): void {
// console.log('polyline clicked', polyline)
// }
closeModal(id: string) {
this.modalService.close(id);
......@@ -396,7 +421,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();
......@@ -406,6 +431,7 @@ export class MainComponent implements OnInit {
pathStr = pathStr.substr(0, pathStr.length - 1);
return pathStr;
}
var _this=this;
var bdary = new BMap.Boundary();
bdary.get('山西省', function (rs) {
......@@ -430,49 +456,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());//调整视野
//获取行政区域
// map.clearOverlays(); //清除地图覆盖物
// var count = rs.boundaries.length; //行政区域的点有多少个
// if (count === 0) {
// alert('未能获取当前输入行政区域');
// return;
// }
// var pointArray = [];
// var pathArr = [];
// for (var i = 0; i < count; i++) {
// var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, fillOpacity: 0.05, strokeColor: "#f0f" }); //建立多边形覆盖物
// (function (ply) {
// ply.addEventListener('click', function () {
// // showResult(ply);
// });
// })(ply);
// pathArr.push(getPathStr(ply));
// map.addOverlay(ply); //添加覆盖物
// //showResult(ply);
// var path = ply.getPath();
// var result = [];
// for (var j = 0; j < path.length; j++) {
// var px = project.lngLatToPoint(path[j]);
// result.push(px.x + ',' + px.y);
// }
// pointArray = pointArray.concat(path);
// }
// map.setViewport(pointArray); //调整视野
// // map.setMinZoom(8);
_this.map.addOverlay(ply);
_this.map.setViewport(ply.getPath());//调整视野
});
}
/**
......@@ -481,7 +469,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 +488,7 @@ export class MainComponent implements OnInit {
</div>`, {
position: center
});
map.addOverlay(label);
this.map.addOverlay(label);
}
......@@ -515,7 +503,7 @@ ${label.name}
position: JSON.parse(label.coordinate),
// offset:{width:5,height:-10}
});
map.addOverlay(label);
this.map.addOverlay(label);
}
}
......
src/app/video/video.component.ts
......@@ -304,7 +304,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
var appkey = "24824919"; //综合安防管理平台提供的appkey，必填
var secret = setEncrypt("Bnh6hmvisDdhb1gDDIMV"); //综合安防管理平台提供的secret，必填
// var ip = "192.168.19.175"; //综合安防管理平台IP地址，必填
var ip = "221.131.9.171"; //综合安防管理平台IP地址，必填
var ip = "221.131.9.172"; //综合安防管理平台IP地址，必填
var playMode = 0; //初始播放模式：0-预览，1-回放
var port = 1443; //综合安防管理平台端口，若启用HTTPS协议，默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径
......
src/assets/map_load.js 0 → 100644
var bmapcfg = {
'imgext' : '.jpg', //瓦片图的后缀 根据需要修改，一般是 .png .jpg
'tiles_dir' : '', //普通瓦片图的地址，为空默认在tiles/ 目录
};
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src"); //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录
(function(){
window.BMap_loadScriptTime = (new Date).getTime();
//加载地图API主文件
// document.write('<script type="text/javascript" src="'+bmapcfg.home+'getscript.js"></script>');
document.write('<script type="text/javascript" src="'+bmapcfg.home+'orgingetscript.js"></script>');
})();
src/assets/orgingetscript.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
......@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="/assets/map_load.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style>
body{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment