Skip to content

S
supervise-front
Commit 8890c002 by niuxiaolin
Options

修改编辑模式不同类型有不同颜色,section选择时选择项目等

parent 3a884fcd
Showing with 135 additions and 80 deletions
src/app/main/main.component.html
......@@ -4,7 +4,7 @@
<section>
<div *ngIf="debug">
<select [(ngModel)]="type">
<select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
<option value="0">project</option>
<option value="1">course</option>
<option value="2">SECTION</option>
......@@ -12,6 +12,12 @@
<select [(ngModel)]="currentCouseId">
<option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option>
</select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,1)">
<option *ngFor="let c of projects1" [value]="c.id" >{{c.name}}</option>
</select>
<select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
<option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
</select>
</div>
<!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
<button [ngClass]="{focus:highShow}" (click)="toHighWay()">高速公路</button>
......@@ -80,6 +86,13 @@
<label> </label>
<label></label>
</section>
<section>
<button>数据信息
</button>
<label>名字：{{currProj.name}}</label>
<label>里程：{{currProj.mileage}}</label>
<label>投资：{{currProj.capital}}</label>
</section>
</div>
</div>
......@@ -119,7 +132,7 @@
<jw-modal id="custom-modal-3">
<h1>添加section</h1>
<p>courses名称: <input type="text" [(ngModel)]="section.name" /></p>
<p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
<p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
<p>lineStyle: <input type="text" [(ngModel)]="section.lineStyle" /></p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
......
src/app/main/main.component.ts
......@@ -15,6 +15,7 @@ import { ActivatedRoute } from '@angular/router';
declare var map: any;
declare var BMap: any;
declare var BMapLib: any;
declare var drawingManager:any;
const enum CordType {
PROJ,
COURSE,
......@@ -35,6 +36,25 @@ export interface DialogData {
})
export class MainComponent implements OnInit {
constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
//定位山西省地图
this.opts = {
centerAndZoom: {
lat: 37.78663390039693,
lng: 112.43176242674386,
zoom: 8
},
}
this.polylineOptions = {
strokeColor: 'yellow',
strokeWeight: 10
}
}
drawingManager: any;
currentProjId: number;
preCord: any;
courses = [];
highShow = false;
normalShow = false;
......@@ -44,6 +64,8 @@ export class MainComponent implements OnInit {
public projects = [
]
public projects1=[]
public projects2=[]
polys = [];
proj: Project = { delFlag: 0 };
course: Course = { delFlag: 0 };
......@@ -54,6 +76,7 @@ export class MainComponent implements OnInit {
staticHighWay: any = {};
staticNormal: any = {};
normalProjects: any = [];
currProj:Project={};
debug = false;
toPoints(points: Array<Point>) {
if (!points) {
......@@ -63,7 +86,10 @@ export class MainComponent implements OnInit {
return new window.BMap.Point(p.lng, p.lat)
})
}
typeChange(e){
var dic = {0:"red",1:"yellow",2:"green"}
console.log(drawingManager.polylineOptions.strokeColor=dic[e]);
}
addPoly(proj: Project) {
var points = JSON.parse(proj.coordinate).map(c => ({ lng: c[0], lat: c[1] }));
var newPolyLine = new window.BMap.Polyline(this.toPoints(points), { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
......@@ -73,7 +99,15 @@ export class MainComponent implements OnInit {
ngOnInit(): void {
this.route.queryParamMap.subscribe(queryParams => {
this.debug =Boolean( queryParams.get("debug"))
})
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects1 = res.data;
});
this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
this.projects2 = res.data;
});
this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => {
this.staticHighWay = res.data[0];
});
......@@ -85,6 +119,18 @@ export class MainComponent implements OnInit {
this.courses = res.data;
});
}
proj2Change($event,type){
map.clearOverlays();
var proj:any ={} ;
if(type==1){
}else{
proj = this.projects2.find(f=>f.id==$event);
}
proj = this.projects1.find(f=>f.id==$event);
this.addPoly(proj);
var points = this.corToPoint(proj.coordinate);
map.setViewport(points);
}
toHighWay() {
this.highShow = !this.highShow;
......@@ -120,30 +166,11 @@ export class MainComponent implements OnInit {
}
constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
//定位山西省地图
this.opts = {
centerAndZoom: {
lat: 37.78663390039693,
lng: 112.43176242674386,
zoom: 15
},
}
this.polylineOptions = {
strokeColor: 'yellow',
strokeWeight: 10
}
}
corToPoint(json:string){
corToPoint(json:string):Array<{lng:number,lat:number}>{
return JSON.parse(json).map(r=>({lng:r[0],lat:r[1]}));
}
highLight(i:number,proj:Project) {
this.currProj= Object.assign({},proj);
var overlays = map.getOverlays();
timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
......@@ -154,7 +181,20 @@ export class MainComponent implements OnInit {
}
});
map.setViewport(this.corToPoint(proj.coordinate))
var points = this.corToPoint(proj.coordinate);
// var center = {lng:0,lat:0}
// points.forEach(p => {
// center.lng+=p.lng;
// center.lat+=p.lat;
// });
// center.lng=center.lng/points.length;
// center.lat=center.lat/points.length;
// var label = new BMap.Label(proj.name, {
// position: center
// });
// map.addOverlay(label);
map.setViewport(points);
}
......@@ -179,15 +219,17 @@ export class MainComponent implements OnInit {
(window as any).map = polyline.getMap();
this.setBound();
(window as any).map.setMapStyleV2({ styleJson: theme });
this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
map.enableScrollWheelZoom(true);
// Script Loaded Successfully
if(this.debug){
var drawingManager = this.initDrawingTool();
drawingManager.addEventListener("mousedown", e => {
alert(e)
});
this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
// Script Loaded Successfully
// drawingManager.hook=(point:Point)=>{
// return BMapLib.GeoUtils.isPointOnPolyline(point,this.preCords);
// }
drawingManager.addEventListener('overlaycomplete', e => {
var overlay = e.overlay;
......@@ -195,7 +237,6 @@ export class MainComponent implements OnInit {
return;
}
var bounds = e.overlay.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var mercatorProjection = map.getMapType().getProjection();
......@@ -219,24 +260,24 @@ export class MainComponent implements OnInit {
"type": "LineString",
"coordinates": coordinates
};
} else if (overlay.toString() == '[object Polygon]') {
}
else if (overlay.toString() == '[object Polygon]') {
geojsonStr = {
"type": "Polygon",
"coordinates": [coordinates]
};
}
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) {
}
else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates);
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.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
}
......@@ -245,23 +286,19 @@ export class MainComponent implements OnInit {
+ "<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));
}).catch(error => console.log(error));
}
console.log('polyline loaded', polyline)
}
public polylineClicked({ polyline }): void {
console.log('polyline clicked', polyline)
}
overlaycomplete(e) {
};
closeModal(id: string) {
this.modalService.close(id);
}
......@@ -311,40 +348,7 @@ export class MainComponent implements OnInit {
map.setMinZoom(8);
});
}
initDrawingTool():any {
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
var mapOptions = {
enableMapClick: true
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: true, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
// anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8 //工具栏缩放比例
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
return drawingManager;
}
}
src/assets/DrawingManager.js
/**
* @fileoverview 百度地图的鼠标绘制工具，对外开放。
* 允许用户在地图上点击完成鼠标绘制的功能。
......@@ -1034,6 +1036,10 @@ var BMAP_DRAWING_MARKER = "marker", // 鼠标画点模式
if(me.controlButton == "right" && (e.button == 1 || e.button==0)){
return ;
}
// //添加hook处理
// if(me.hook&&!me.hook(e.point)){
// return;
// }
points.push(e.point);
drawPoint = points.concat(points[points.length - 1]);
if (points.length == 1) {
......@@ -1642,3 +1648,35 @@ var BMAP_DRAWING_MARKER = "marker", // 鼠标画点模式
})();
var styleOptions = {
strokeColor: "red", //边线颜色。
fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
var mapOptions = {
enableMapClick: true
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
// anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8 //工具栏缩放比例
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
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