Commit 74c97dd6 by niuxiaolin

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

parent 09370c7e
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
<option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option> <option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
</select> </select>
</div> </div>
<baidu-map #map [options]="opts"> <!-- <baidu-map #map [options]="opts">
<polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" <polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)"
(clicked)="polylineClicked($event)"></polyline> (clicked)="polylineClicked($event)"></polyline>
</baidu-map> </baidu-map> -->
<div id="baidu-map"></div>
<div class="main"> <div class="main">
<div class="left"> <div class="left">
<fieldset> <fieldset>
...@@ -63,11 +63,6 @@ ...@@ -63,11 +63,6 @@
<section *ngIf="highShow" class="sub"> <section *ngIf="highShow" class="sub">
<div class="item" *ngFor="let prj of projects;let i=index"> <div class="item" *ngFor="let prj of projects;let i=index">
<label (click)="highLight(i,prj,'p');setPrj(prj);">{{prj.name}} </label> <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> </div>
</section> </section>
...@@ -113,123 +108,6 @@ ...@@ -113,123 +108,6 @@
</div> </div>
</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"> <jw-modal id="custom-modal-1">
<h1>添加项目</h1> <h1>添加项目</h1>
<p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p> <p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p>
......
...@@ -191,3 +191,9 @@ fieldset{ ...@@ -191,3 +191,9 @@ fieldset{
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
#baidu-map{
width: 100%;
height: 900px;
display: block;
}
\ No newline at end of file
...@@ -14,7 +14,7 @@ import { ActivatedRoute, Router } from '@angular/router'; ...@@ -14,7 +14,7 @@ import { ActivatedRoute, Router } from '@angular/router';
import { IdService } from '../services/id.service'; import { IdService } from '../services/id.service';
import { SelfMapService } from '../services/map.service'; import { SelfMapService } from '../services/map.service';
declare var map: any;
declare var BMap: any; declare var BMap: any;
declare var BMapLib: any; declare var BMapLib: any;
declare var drawingManager: any; declare var drawingManager: any;
...@@ -45,7 +45,7 @@ export class MainComponent implements OnInit { ...@@ -45,7 +45,7 @@ export class MainComponent implements OnInit {
curiveLength:number = 10; curiveLength:number = 10;
theme: any; theme: any;
markers: 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) { 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 = { this.opts = {
...@@ -115,7 +115,7 @@ export class MainComponent implements OnInit { ...@@ -115,7 +115,7 @@ export class MainComponent implements OnInit {
var toPoints = this.m.toPoints(points,this.curiveLength,this.curive); var toPoints = this.m.toPoints(points,this.curiveLength,this.curive);
var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth }); var newPolyLine = new window.BMap.Polyline(toPoints, { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
(newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id; (newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
map.addOverlay(newPolyLine); this.map.addOverlay(newPolyLine);
// var newPoints = this.corToPoint(proj.coordinate); // var newPoints = this.corToPoint(proj.coordinate);
// this.m.animationLine(newPoints); // this.m.animationLine(newPoints);
...@@ -124,6 +124,20 @@ export class MainComponent implements OnInit { ...@@ -124,6 +124,20 @@ export class MainComponent implements OnInit {
this.router.navigate(['/video']); this.router.navigate(['/video']);
} }
ngOnInit(): void { 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.route.queryParamMap.subscribe(queryParams => {
this.debug = Boolean(queryParams.get("debug")) this.debug = Boolean(queryParams.get("debug"))
}) })
...@@ -167,7 +181,7 @@ export class MainComponent implements OnInit { ...@@ -167,7 +181,7 @@ export class MainComponent implements OnInit {
} }
proj2Change($event, type) { proj2Change($event, type) {
map.clearOverlays(); this.map.clearOverlays();
var proj: any = {}; var proj: any = {};
if (type == 1) { if (type == 1) {
} else { } else {
...@@ -176,7 +190,7 @@ export class MainComponent implements OnInit { ...@@ -176,7 +190,7 @@ export class MainComponent implements OnInit {
proj = this.projects1.find(f => f.id == $event); proj = this.projects1.find(f => f.id == $event);
this.addPoly(proj); this.addPoly(proj);
var points = this.corToPoint(proj.coordinate); var points = this.corToPoint(proj.coordinate);
map.setViewport(points); this.map.setViewport(points);
} }
loadLabels(data){ loadLabels(data){
...@@ -197,7 +211,7 @@ export class MainComponent implements OnInit { ...@@ -197,7 +211,7 @@ export class MainComponent implements OnInit {
var points = this.loadPolys(res,true); var points = this.loadPolys(res,true);
}); });
}else{ }else{
map.centerAndZoom("山西省",8); this.map.centerAndZoom("山西省",8);
} }
} }
...@@ -217,7 +231,7 @@ export class MainComponent implements OnInit { ...@@ -217,7 +231,7 @@ export class MainComponent implements OnInit {
} }
toNormal() { toNormal() {
map.clearOverlays(); this.map.clearOverlays();
this.normalShow = !this.normalShow; this.normalShow = !this.normalShow;
...@@ -237,7 +251,7 @@ export class MainComponent implements OnInit { ...@@ -237,7 +251,7 @@ export class MainComponent implements OnInit {
} }
highLight(i: number, obj, type) { highLight(i: number, obj, type) {
this.currProj = Object.assign({}, obj); this.currProj = Object.assign({}, obj);
var overlays = map.getOverlays(); var overlays = this.map.getOverlays();
var cur = overlays.find(o => o.id == type + obj.id); var cur = overlays.find(o => o.id == type + obj.id);
timer(0, 200) timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => { .pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
...@@ -252,7 +266,18 @@ export class MainComponent implements OnInit { ...@@ -252,7 +266,18 @@ export class MainComponent implements OnInit {
//标段不定位 //标段不定位
if(type!='s'){ 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 { ...@@ -315,80 +340,80 @@ export class MainComponent implements OnInit {
setTheme(theme){ setTheme(theme){
(window as any).map.setMapStyleV2({ styleJson: theme }); (window as any).map.setMapStyleV2({ styleJson: theme });
} }
public polylineLoaded(polyline: BPolyline): void { // public polylineLoaded(polyline: BPolyline): void {
(window as any).map = polyline.getMap(); // this.map = polyline.getMap();
this.setBound(); // this.setBound();
(window as any).map.setMapStyleV2({ styleJson: theme }); // this.map.setMapStyleV2({ styleJson: theme });
map.enableScrollWheelZoom(true); // this.map.enableScrollWheelZoom(true);
map.centerAndZoom("山西省",11); // this.map.centerAndZoom("山西省",11);
this.dynamicScriptLoader.load('geouti',"mapv").then(); // this.dynamicScriptLoader.load('geouti',"mapv").then();
if (this.debug) { // if (this.debug) {
this.dynamicScriptLoader.load('drawing').then(data => { // this.dynamicScriptLoader.load('drawing').then(data => {
// Script Loaded Successfully // // Script Loaded Successfully
drawingManager.addEventListener('overlaycomplete', e => { // drawingManager.addEventListener('overlaycomplete', e => {
var overlay = e.overlay; // var overlay = e.overlay;
var coordinates = []; // var coordinates = [];
if(overlay.getPath){ // if(overlay.getPath){
var path = overlay.getPath(); // var path = overlay.getPath();
for (var i = 0; i < path.length; i++) { // for (var i = 0; i < path.length; i++) {
coordinates.push([path[i].lng, path[i].lat]); // coordinates.push([path[i].lng, path[i].lat]);
} // }
}else{ // }else{
coordinates.push(overlay.getPosition()) // coordinates.push(overlay.getPosition())
} // }
if (overlay.toString() == '[object Polyline]') { // if (overlay.toString() == '[object Polyline]') {
if (this.type == CordType.PROJ) { // if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId; // this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates); // this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-1'); // this.modalService.open('custom-modal-1');
} // }
else if (this.type == CordType.COURSE) { // else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates); // this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2'); // this.modalService.open('custom-modal-2');
} // }
else if (this.type == CordType.SECTION) { // else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId; // this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates); // this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3'); // this.modalService.open('custom-modal-3');
} // }
} // }
else if (overlay.toString() == '[object Polygon]') { // else if (overlay.toString() == '[object Polygon]') {
// geojsonStr = { // // geojsonStr = {
// "type": "Polygon", // // "type": "Polygon",
// "coordinates": [coordinates] // // "coordinates": [coordinates]
// }; // // };
}else if(overlay.toString() == "[object Marker]"){ // }else if(overlay.toString() == "[object Marker]"){
this.marker.coordinate = JSON.stringify(coordinates[0]); // this.marker.coordinate = JSON.stringify(coordinates[0]);
this.modalService.open('marker'); // 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>" // // 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'>" + 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'>" + pathStr + "</p></div>"
// + "<div><span>坐标集(墨卡托坐标):</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</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>"; // // + "<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)); // }).catch(error => console.log(error));
} // }
console.log('polyline loaded', polyline) // console.log('polyline loaded', polyline)
} // }
public polylineClicked({ polyline }): void { // public polylineClicked({ polyline }): void {
console.log('polyline clicked', polyline) // console.log('polyline clicked', polyline)
} // }
closeModal(id: string) { closeModal(id: string) {
this.modalService.close(id); this.modalService.close(id);
...@@ -396,7 +421,7 @@ export class MainComponent implements OnInit { ...@@ -396,7 +421,7 @@ export class MainComponent implements OnInit {
setBound() { setBound() {
var project = map.getMapType().getProjection(); var project = this.map.getMapType().getProjection();
var getPathStr = function (overlay) { var getPathStr = function (overlay) {
var pathStr = ""; var pathStr = "";
var path = overlay.getPath(); var path = overlay.getPath();
...@@ -406,6 +431,7 @@ export class MainComponent implements OnInit { ...@@ -406,6 +431,7 @@ export class MainComponent implements OnInit {
pathStr = pathStr.substr(0, pathStr.length - 1); pathStr = pathStr.substr(0, pathStr.length - 1);
return pathStr; return pathStr;
} }
var _this=this;
var bdary = new BMap.Boundary(); var bdary = new BMap.Boundary();
bdary.get('山西省', function (rs) { bdary.get('山西省', function (rs) {
...@@ -430,49 +456,11 @@ export class MainComponent implements OnInit { ...@@ -430,49 +456,11 @@ export class MainComponent implements OnInit {
var SE_JW = "170.672126, -68.045308 ;"; //东南角 var SE_JW = "170.672126, -68.045308 ;"; //东南角
//3.添加环形遮罩层 //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"}); //建立多边形覆盖物 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. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层 //4. 给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#16e8d6",fillColor:"",fillOpacity:"0"}); var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:0,strokeColor:"#16e8d6",fillColor:"",fillOpacity:"0"});
map.addOverlay(ply); _this.map.addOverlay(ply);
map.setViewport(ply.getPath());//调整视野 _this.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);
}); });
} }
/** /**
...@@ -481,7 +469,7 @@ export class MainComponent implements OnInit { ...@@ -481,7 +469,7 @@ export class MainComponent implements OnInit {
* @param type "s" = section ,"p"=project * @param type "s" = section ,"p"=project
*/ */
getOverlayById(id: number, type: string = "p") { getOverlayById(id: number, type: string = "p") {
var overlays = map.getOverlays(); var overlays = this.map.getOverlays();
return overlays.find(o => o.id == type + id); return overlays.find(o => o.id == type + id);
} }
addLabel(points:Array<Point>,proj){ addLabel(points:Array<Point>,proj){
...@@ -500,7 +488,7 @@ export class MainComponent implements OnInit { ...@@ -500,7 +488,7 @@ export class MainComponent implements OnInit {
</div>`, { </div>`, {
position: center position: center
}); });
map.addOverlay(label); this.map.addOverlay(label);
} }
...@@ -515,7 +503,7 @@ ${label.name} ...@@ -515,7 +503,7 @@ ${label.name}
position: JSON.parse(label.coordinate), position: JSON.parse(label.coordinate),
// offset:{width:5,height:-10} // offset:{width:5,height:-10}
}); });
map.addOverlay(label); this.map.addOverlay(label);
} }
} }
......
...@@ -304,7 +304,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止 ...@@ -304,7 +304,7 @@ oWebControl.JS_RepairPartWindow(0, 0, 1001, 700); // 多1个像素点防止
var appkey = "24824919"; //综合安防管理平台提供的appkey,必填 var appkey = "24824919"; //综合安防管理平台提供的appkey,必填
var secret = setEncrypt("Bnh6hmvisDdhb1gDDIMV"); //综合安防管理平台提供的secret,必填 var secret = setEncrypt("Bnh6hmvisDdhb1gDDIMV"); //综合安防管理平台提供的secret,必填
// var ip = "192.168.19.175"; //综合安防管理平台IP地址,必填 // 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 playMode = 0; //初始播放模式:0-预览,1-回放
var port = 1443; //综合安防管理平台端口,若启用HTTPS协议,默认443 var port = 1443; //综合安防管理平台端口,若启用HTTPS协议,默认443
var snapDir = "D:\\SnapDir"; //抓图存储路径 var snapDir = "D:\\SnapDir"; //抓图存储路径
......
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>');
})();
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <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" /> <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<style> <style>
body{ 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