Skip to content

S
supervise-front
Commit 3a884fcd by niuxiaolin
Options

latest

parent fe2a780a
Showing with 1424 additions and 1388 deletions
package.json
...@@ -4,7 +4,11 @@ ...@@ -4,7 +4,11 @@
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve --proxy--config proxy.json", "start": "ng serve --proxy--config proxy.json",
"build": "ng build", "build": "ng build --prod --build-optimizer && npm run remove-to && npm run create && npm run copy-to",
"remove-to": "rd /s /q D:\\projects\\supervise\\src\\main\\resources\\static",
"create": "mkdir D:\\projects\\supervise\\src\\main\\resources\\static",
"copy-to": " powershell -command \" Copy-Item D:\\projects\\map\\dist\\map\\* -Destination D:\\projects\\supervise\\src\\main\\resources\\static\\ -Recurse \"",
"test": "ng test", "test": "ng test",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e" "e2e": "ng e2e"
......
src/app/app-routing.module.ts
...@@ -4,13 +4,16 @@ import { MainComponent } from './main/main.component'; ...@@ -4,13 +4,16 @@ import { MainComponent } from './main/main.component';
import { VideoComponent } from './video/video.component'; import { VideoComponent } from './video/video.component';
const routes: Routes = [ const routes: Routes = [
{path:"",redirectTo:"./home",pathMatch:'full'}, {path:"",redirectTo:"home",pathMatch:'full'},
{path:'home',component:MainComponent}, {path:'home',component:MainComponent},
{path:'video',component:VideoComponent}, {path:'video',component:VideoComponent},
]; ];
@NgModule({ @NgModule({
imports: [RouterModule.forRoot(routes)], imports: [RouterModule.forRoot(routes,{
useHash:true
})],
exports: [RouterModule] exports: [RouterModule]
}) })
export class AppRoutingModule { } export class AppRoutingModule { }
src/app/app.module.ts
...@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms'; ...@@ -10,6 +10,7 @@ import { FormsModule } from '@angular/forms';
import { ModalComponent } from './modal/modal.component'; import { ModalComponent } from './modal/modal.component';
import { ApiModule } from './api'; import { ApiModule } from './api';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
...@@ -18,9 +19,12 @@ import { HttpClientModule } from '@angular/common/http'; ...@@ -18,9 +19,12 @@ import { HttpClientModule } from '@angular/common/http';
ModalComponent ModalComponent
], ],
imports: [ imports: [
HttpClientModule, HttpClientModule,
BrowserModule, BrowserModule,
AppRoutingModule, AppRoutingModule,
FormsModule, FormsModule,
ApiModule, ApiModule,
BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' }) BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' })
......
src/app/main/main.component.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="left"> <div class="left">
<section> <section>
<div *ngIf="debug">
<select [(ngModel)]="type"> <select [(ngModel)]="type">
<option value="0">project</option> <option value="0">project</option>
<option value="1">course</option> <option value="1">course</option>
...@@ -12,8 +12,9 @@ ...@@ -12,8 +12,9 @@
<select [(ngModel)]="currentCouseId"> <select [(ngModel)]="currentCouseId">
<option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option> <option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option>
</select> </select>
</div>
<!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> --> <!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
<button (click)="toHighWay()">高速公路</button> <button [ngClass]="{focus:highShow}" (click)="toHighWay()">高速公路</button>
<div *ngIf="!highShow"> <div *ngIf="!highShow">
<label>项目总数：{{staticHighWay.total}}个</label> <label>项目总数：{{staticHighWay.total}}个</label>
<label>总建设里程：{{staticHighWay.mileage}}Km </label> <label>总建设里程：{{staticHighWay.mileage}}Km </label>
...@@ -21,12 +22,12 @@ ...@@ -21,12 +22,12 @@
</div> </div>
<section *ngIf="highShow" class="sub"> <section *ngIf="highShow" class="sub">
<label (click)="changePolyline(prj)" *ngFor="let prj of projects">{{prj.name}} <label (click)="highLight(i,prj)" *ngFor="let prj of projects;let i=index">{{prj.name}}
</label> </label>
</section> </section>
</section> </section>
<section> <section>
<button (click)='toNormal()'>普通干线 <button [ngClass]="{focus:normalShow}" (click)='toNormal()'>普通干线
</button> </button>
<div *ngIf="!normalShow"> <div *ngIf="!normalShow">
...@@ -36,7 +37,7 @@ ...@@ -36,7 +37,7 @@
</div> </div>
<section *ngIf="normalShow" class="sub"> <section *ngIf="normalShow" class="sub">
<label (click)="changePolyline(prj)" *ngFor="let prj of normalProjects">{{prj.name}} <label (click)="highLight(i,prj)" *ngFor="let prj of normalProjects;let i=index">{{prj.name}}
</label> </label>
</section> </section>
</section> </section>
...@@ -45,8 +46,7 @@ ...@@ -45,8 +46,7 @@
<div class="map"> <div class="map">
<div id="polylineLength"></div> <div id="polylineLength"></div>
<div id="result"></div> <div id="result"></div>
<!-- <polyline *ngFor="let poly of polys" [points]="poly.points" [options]="poly.polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
-->
<baidu-map #map [options]="opts" > <baidu-map #map [options]="opts" >
<polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline> <polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)" (clicked)="polylineClicked($event)"></polyline>
...@@ -57,35 +57,28 @@ ...@@ -57,35 +57,28 @@
<button>视频监管 <button>视频监管
</button> </button>
<label>项目总数：**个</label> <label>监管项目:**个</label>
<label>总建设里程：***Km </label> <label>监控点总计：***Km </label>
<label>总投资：**亿</label>
</section> </section>
<section> <section>
<button>建设程序监管 <button>建设程序监管
</button> </button>
<label>项目总数：**个</label>
<label>总建设里程：***Km </label>
<label>总投资：**亿</label>
</section> </section>
<section> <section>
<button>质量安全监管 <button>质量安全监管 </button>
<label>年度累计完成产值:</label>
<label>年度总目标产值： </label>
</button>
<label>项目总数：**个</label>
<label>总建设里程：***Km </label>
<label>总投资：**亿</label>
</section> </section>
<section> <section>
<button>造价监管 <button>造价监管
</button> </button>
<label>项目总数：**个</label> <label></label>
<label>总建设里程：***Km </label> <label> </label>
<label>总投资：**亿</label> <label></label>
</section> </section>
</div> </div>
</div> </div>
......
src/app/main/main.component.less
...@@ -9,13 +9,14 @@ ...@@ -9,13 +9,14 @@
border: 4px solid #3885b3; border: 4px solid #3885b3;
button{ 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); 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: #ea262d96; background: #43a5dd;
color:white; color: white;
border-radius: 4px; border-radius: 4px;
width: 100px; width: 130px;
height: 30px; height: 39px;
display: block; display: block;
margin: 0.3em; margin: 0.3em;
font-size: initial;
} }
label{ label{
display: block; display: block;
...@@ -44,4 +45,7 @@ ...@@ -44,4 +45,7 @@
.right{ .right{
} }
}
.focus{
background: #ea262d96!important;
} }
\ No newline at end of file
src/app/main/main.component.ts
...@@ -9,18 +9,20 @@ import { DefaultService, Project, Course, Scetion } from '../api'; ...@@ -9,18 +9,20 @@ import { DefaultService, Project, Course, Scetion } from '../api';
import { HttpClient, HttpParams } from '@angular/common/http'; import { HttpClient, HttpParams } from '@angular/common/http';
import { timer } from 'rxjs'; import { timer } from 'rxjs';
import { timeInterval, pluck, take} from 'rxjs/operators'; import { timeInterval, pluck, take } from 'rxjs/operators';
declare var drawingManager:any; import { ActivatedRoute } from '@angular/router';
declare var map:any;
declare var BMap:any; declare var map: any;
const enum CordType{ declare var BMap: any;
declare var BMapLib: any;
const enum CordType {
PROJ, PROJ,
COURSE, COURSE,
SECTION SECTION
} }
const enum markType{ const enum markType {
HIGHWAY=1, HIGHWAY = 1,
NORMAL NORMAL
} }
export interface DialogData { export interface DialogData {
animal: string; animal: string;
...@@ -33,86 +35,92 @@ export interface DialogData { ...@@ -33,86 +35,92 @@ export interface DialogData {
}) })
export class MainComponent implements OnInit { export class MainComponent implements OnInit {
courses=[]; courses = [];
highShow=false; highShow = false;
normalShow=false; normalShow = false;
public opts: MapOptions public opts: MapOptions
public points: Array<Point>=[]; public points: Array<Point> = [];
public polylineOptions: PolylineOptions; public polylineOptions: PolylineOptions;
public projects=[ public projects = [
] ]
polys=[]; polys = [];
proj:Project={delFlag:0}; proj: Project = { delFlag: 0 };
course:Course = {delFlag:0}; course: Course = { delFlag: 0 };
section:Scetion = {delFlag:0}; section: Scetion = { delFlag: 0 };
type=1; type = 1;
_this =this; _this = this;
currentCouseId:any; currentCouseId: any;
staticHighWay:any={}; staticHighWay: any = {};
staticNormal:any={}; staticNormal: any = {};
normalProjects:any=[]; normalProjects: any = [];
debug=true; debug = false;
toPoints(points:Array<Point>){ toPoints(points: Array<Point>) {
if (!points) { if (!points) {
return [] return []
}
return points.map(p => {
return new window.BMap.Point(p.lng, p.lat)
})
} }
return points.map(p => {
return new window.BMap.Point(p.lng, p.lat)
})
}
addPoly(cords:string){ addPoly(proj: Project) {
var points = JSON.parse(cords).map(c=>({lng:c[0],lat:c[1]})); var points = JSON.parse(proj.coordinate).map(c => ({ lng: c[0], lat: c[1] }));
var newPolyLine = new window.BMap.Polyline(this.toPoints(points)); var newPolyLine = new window.BMap.Polyline(this.toPoints(points), { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
map.addOverlay(newPolyLine); map.addOverlay(newPolyLine);
} }
ngOnInit(): void { ngOnInit(): void {
this.route.queryParamMap.subscribe(queryParams => {
this.debug =Boolean( queryParams.get("debug"))
})
this.http.get<any>(this.s.basePath + `/project/total`).subscribe(res => {
this.staticHighWay = res.data[0];
});
this.http.get<any>(this.s.basePath + `/project/total2`).subscribe(res => {
this.staticNormal = res.data[0];
});
this.http.get<any>(this.s.basePath+`/project/total`).subscribe(res=>{ this.http.get<any>(this.s.basePath + "/course/list").subscribe(res => {
this.staticHighWay=res.data[0]; this.courses = res.data;
});
this.http.get<any>(this.s.basePath+`/project/total2`).subscribe(res=>{
this.staticNormal=res.data[0];
});
this.http.get<any>(this.s.basePath+"/course/list").subscribe(res=>{
this.courses=res.data;
}); });
} }
toHighWay(){ toHighWay() {
this.highShow=!this.highShow;
let params = new HttpParams(); this.highShow = !this.highShow;
params.append('mark',markType.HIGHWAY.toString());
this.http.get<any>(this.s.basePath+`/project/list/${markType.HIGHWAY}`).subscribe(res=>{ if(this.highShow){
this.projects=res.data; map.clearOverlays();
var allPoints = []; this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects = res.data;
res.data.forEach(poly => { var allPoints = [];
this.addPoly(poly.coordinate);
allPoints = allPoints.concat(JSON.parse(poly.coordinate)); res.data.forEach(poly => {
}); this.addPoly(poly);
map.setViewport(allPoints.map(p=>({lng:p[0],lat:p[1]}))); allPoints = allPoints.concat(JSON.parse(poly.coordinate));
}); });
map.setViewport(allPoints.map(p => ({ lng: p[0], lat: p[1] })));
});
}
}
toNormal() {
map.clearOverlays();
this.normalShow = !this.normalShow;
} this.http.get<any>(this.s.basePath + `/project/list/${markType.NORMAL}`).subscribe(res => {
toNormal(){ this.normalProjects = res.data;
this.normalShow=!this.normalShow;
let params = new HttpParams();
params.append('mark',markType.HIGHWAY.toString());
this.http.get<any>(this.s.basePath+`/project/list/${markType.NORMAL}`).subscribe(res=>{
this.normalProjects=res.data;
}); });
} }
openDialog(id: string) { openDialog(id: string) {
this.modalService.open(id); this.modalService.open(id);
} }
constructor(private cd:ChangeDetectorRef,private http:HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService,private modalService: ModalService,private s:DefaultService) { constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
//定位山西省地图 //定位山西省地图
this.opts = { this.opts = {
centerAndZoom: { centerAndZoom: {
...@@ -120,132 +128,129 @@ toPoints(points:Array<Point>){ ...@@ -120,132 +128,129 @@ toPoints(points:Array<Point>){
lng: 112.43176242674386, lng: 112.43176242674386,
zoom: 15 zoom: 15
}, },
} }
this.polylineOptions = { this.polylineOptions = {
strokeColor: 'red', strokeColor: 'yellow',
strokeWeight: 10 strokeWeight: 10
} }
} }
corToPoint(json:string){
changePolyline(proj){ return JSON.parse(json).map(r=>({lng:r[0],lat:r[1]}));
this.polylineOptions = {strokeColor:proj.lineStyle,strokeWeight:proj.lineWidth} }
this.triggerFlash(); highLight(i:number,proj:Project) {
var overlays = map.getOverlays();
this.points = Object.assign([],JSON.parse(proj.coordinate)).map(r=>({lat:Number(r[1]),lng:Number(r[0])}));
map.setViewport(this.points)
}
// 切换线条的闪烁
private triggerFlash() {
var originColor = this.polylineOptions.strokeColor;
timer(0, 200) timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => { .pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
if (this.polylineOptions.strokeColor == "#fff") { if(overlays[i].isVisible()){
this.polylineOptions = { strokeColor: originColor }; overlays[i].hide();
} }else{
else { overlays[i].show();
this.polylineOptions = { strokeColor: "#fff" };
} }
}); });
map.setViewport(this.corToPoint(proj.coordinate))
} }
addCourse(course:Course){ addCourse(course: Course) {
this.http.post<Course>(this.s.basePath+"/course/add",this.course).subscribe(res=>{ this.http.post<Course>(this.s.basePath + "/course/add", this.course).subscribe(res => {
this.modalService.close('custom-modal-2'); this.modalService.close('custom-modal-2');
}) })
} }
addSection(section:Scetion){ addSection(section: Scetion) {
this.http.post<Scetion>(this.s.basePath+"/scetion/add",section).subscribe(res=>{ this.http.post<Scetion>(this.s.basePath + "/scetion/add", section).subscribe(res => {
this.modalService.close('custom-modal-3'); this.modalService.close('custom-modal-3');
}) })
} }
addProj(proj:Project){ addProj(proj: Project) {
this.http.post(this.s.basePath+"/project/add",proj).subscribe(res=>{ this.http.post(this.s.basePath + "/project/add", proj).subscribe(res => {
console.log(res) console.log(res)
}); });
} }
public polylineLoaded(polyline: BPolyline): void { public polylineLoaded(polyline: BPolyline): void {
(window as any).map= polyline.getMap(); (window as any).map = polyline.getMap();
this.setBound(); this.setBound();
(window as any).map.setMapStyleV2({styleJson:theme}); (window as any).map.setMapStyleV2({ styleJson: theme });
this.dynamicScriptLoader.load('drawing','geouti').then(data => { this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
// Script Loaded Successfully map.enableScrollWheelZoom(true);
drawingManager.addEventListener("mousedown",e=>{ // Script Loaded Successfully
console.log(e); if(this.debug){
var drawingManager = this.initDrawingTool();
drawingManager.addEventListener("mousedown", e => {
alert(e)
}); });
drawingManager.addEventListener('overlaycomplete', e=>{
var overlay = e.overlay;
if(!e.overlay.getBounds){
return;
}
var bounds = e.overlay.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var mercatorProjection = map.getMapType().getProjection();
var neMc = mercatorProjection.lngLatToPoint(ne);
var swMc = mercatorProjection.lngLatToPoint(sw);
var pathStr = "";
var geojsonStr ={};
var pathmcStr = "";
var path = overlay.getPath();
var coordinates = [];
for (var i = 0; i < path.length; i++) {
pathStr += path[i].lng + "," + path[i].lat + ",";
var mc = mercatorProjection.lngLatToPoint(path[i]);
pathmcStr += mc.x + "," + mc.y + ",";
coordinates.push([path[i].lng, path[i].lat]);
}
pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
pathStr = pathStr.substr(0, pathStr.length - 1);
if (overlay.toString() == '[object Polyline]') {
geojsonStr = {
"type": "LineString",
"coordinates": coordinates
};
} 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){
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2');
}else if(this.type==CordType.SECTION){
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
}
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>";
drawingManager.addEventListener('overlaycomplete', e => {
}); var overlay = e.overlay;
}).catch(error => console.log(error)); if (!e.overlay.getBounds) {
return;
}
var bounds = e.overlay.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var mercatorProjection = map.getMapType().getProjection();
var neMc = mercatorProjection.lngLatToPoint(ne);
var swMc = mercatorProjection.lngLatToPoint(sw);
var pathStr = "";
var geojsonStr = {};
var pathmcStr = "";
var path = overlay.getPath();
var coordinates = [];
for (var i = 0; i < path.length; i++) {
pathStr += path[i].lng + "," + path[i].lat + ",";
var mc = mercatorProjection.lngLatToPoint(path[i]);
pathmcStr += mc.x + "," + mc.y + ",";
coordinates.push([path[i].lng, path[i].lat]);
}
pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
pathStr = pathStr.substr(0, pathStr.length - 1);
if (overlay.toString() == '[object Polyline]') {
geojsonStr = {
"type": "LineString",
"coordinates": coordinates
};
} 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) {
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2');
} else if (this.type == CordType.SECTION) {
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
}
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) console.log('polyline loaded', polyline)
} }
...@@ -253,41 +258,41 @@ addProj(proj:Project){ ...@@ -253,41 +258,41 @@ addProj(proj:Project){
console.log('polyline clicked', polyline) console.log('polyline clicked', polyline)
} }
overlaycomplete(e){ overlaycomplete(e) {
};
closeModal(id: string) { };
this.modalService.close(id); closeModal(id: string) {
} this.modalService.close(id);
setBound(){ }
var project = map.getMapType().getProjection(); setBound() {
var getPathStr=function(overlay) { var project = map.getMapType().getProjection();
var pathStr = ""; var getPathStr = function (overlay) {
var path = overlay.getPath(); var pathStr = "";
for (var i = 0; i < path.length; i++) { var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
pathStr += path[i].lng + "," + path[i].lat + ","; pathStr += path[i].lng + "," + path[i].lat + ",";
}
pathStr = pathStr.substr(0, pathStr.length - 1);
return pathStr;
} }
pathStr = pathStr.substr(0, pathStr.length - 1); var bdary = new BMap.Boundary();
return pathStr; bdary.get('山西', function (rs) { //获取行政区域
} //map.clearOverlays(); //清除地图覆盖物
var bdary = new BMap.Boundary(); var count = rs.boundaries.length; //行政区域的点有多少个
bdary.get('山西' , function(rs){ //获取行政区域 if (count === 0) {
//map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域'); alert('未能获取当前输入行政区域');
return ; return;
} }
var pointArray = []; var pointArray = [];
var pathArr = []; var pathArr = [];
for (var i = 0; i < count; i++) { for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, fillOpacity: 0.05, strokeColor: "#f0f"}); //建立多边形覆盖物 var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, fillOpacity: 0.05, strokeColor: "#f0f" }); //建立多边形覆盖物
(function(ply){ (function (ply) {
ply.addEventListener('click', function() { ply.addEventListener('click', function () {
// showResult(ply); // showResult(ply);
}); });
})(ply); })(ply);
pathArr.push(getPathStr(ply)); pathArr.push(getPathStr(ply));
...@@ -296,16 +301,50 @@ setBound(){ ...@@ -296,16 +301,50 @@ setBound(){
var path = ply.getPath(); var path = ply.getPath();
var result = []; var result = [];
for (var j = 0; j < path.length; j++) { for (var j = 0; j < path.length; j++) {
var px = project.lngLatToPoint(path[j]); var px = project.lngLatToPoint(path[j]);
result.push(px.x + ',' + px.y); result.push(px.x + ',' + px.y);
} }
pointArray = pointArray.concat(path); pointArray = pointArray.concat(path);
} }
map.setViewport(pointArray); //调整视野 map.setViewport(pointArray); //调整视野
map.setMinZoom(8); 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/app/main/theme.ts
export const theme =[{ export const theme =[{
"featureType": "land", "featureType": "land",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#0d142dff" "color": "#0d142dff"
} }
}, { }, {
"featureType": "water", "featureType": "water",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#0d142dff" "color": "#0d142dff"
} }
}, { }, {
"featureType": "building", "featureType": "building",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#02081eff" "color": "#02081eff"
} }
}, { }, {
"featureType": "building", "featureType": "building",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#000005ff" "color": "#000005ff"
} }
}, { }, {
"featureType": "water", "featureType": "water",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "village", "featureType": "village",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "town", "featureType": "town",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "district", "featureType": "district",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "country", "featureType": "country",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "city", "featureType": "city",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "continent", "featureType": "continent",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "poilabel", "featureType": "poilabel",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "poilabel", "featureType": "poilabel",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "scenicspotslabel", "featureType": "scenicspotslabel",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "scenicspotslabel", "featureType": "scenicspotslabel",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "transportationlabel", "featureType": "transportationlabel",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "transportationlabel", "featureType": "transportationlabel",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "airportlabel", "featureType": "airportlabel",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "airportlabel", "featureType": "airportlabel",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#4c8ec1ff"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "3" "weight": "3"
} }
}, { }, {
"featureType": "green", "featureType": "green",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#0e182dff" "color": "#0e182dff"
} }
}, { }, {
"featureType": "scenicspots", "featureType": "scenicspots",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#0d142dff" "color": "#0d142dff"
} }
}, { }, {
"featureType": "scenicspots", "featureType": "scenicspots",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "scenicspots", "featureType": "scenicspots",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "continent", "featureType": "continent",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "country", "featureType": "country",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "city", "featureType": "city",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "city", "featureType": "city",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "scenicspotslabel", "featureType": "scenicspotslabel",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "airportlabel", "featureType": "airportlabel",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "transportationlabel", "featureType": "transportationlabel",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "railway", "featureType": "railway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "subway", "featureType": "subway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "highwaysign", "featureType": "highwaysign",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "nationalwaysign", "featureType": "nationalwaysign",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "on"
} }
}, { }, {
"featureType": "nationalwaysign", "featureType": "nationalwaysign",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "on"
} }
}, { }, {
"featureType": "provincialwaysign", "featureType": "provincialwaysign",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "provincialwaysign", "featureType": "provincialwaysign",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "tertiarywaysign", "featureType": "tertiarywaysign",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "tertiarywaysign", "featureType": "tertiarywaysign",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "subwaylabel", "featureType": "subwaylabel",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "subwaylabel", "featureType": "subwaylabel",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff", "color": "#65a8d1ff",
"weight": "90" "weight": "90"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "shopping", "featureType": "shopping",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "scenicspots", "featureType": "scenicspots",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "on" "visibility": "on"
} }
}, { }, {
"featureType": "scenicspotslabel", "featureType": "scenicspotslabel",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "manmade", "featureType": "manmade",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "manmade", "featureType": "manmade",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "highwaysign", "featureType": "highwaysign",
"elementType": "labels.icon", "elementType": "labels.icon",
"stylers": { "stylers": {
"visibility": "off" "visibility": "off"
} }
}, { }, {
"featureType": "water", "featureType": "water",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#0e182d00" "color": "#0e182d00"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"stylers": { "stylers": {
"level": "6", "level": "6",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"stylers": { "stylers": {
"level": "7", "level": "7",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"stylers": { "stylers": {
"level": "8", "level": "8",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"stylers": { "stylers": {
"level": "9", "level": "9",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "6", "level": "6",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "7", "level": "7",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "8", "level": "8",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "9", "level": "9",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "6", "level": "6",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "7", "level": "7",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "8", "level": "8",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels", "elementType": "labels",
"stylers": { "stylers": {
"visibility": "off", "visibility": "off",
"level": "9", "level": "9",
"curZoomRegionId": "0", "curZoomRegionId": "0",
"curZoomRegion": "6-9" "curZoomRegion": "6-9"
} }
}, { }, {
"featureType": "road", "featureType": "road",
"elementType": "labels.text", "elementType": "labels.text",
"stylers": { "stylers": {
"fontsize": "24" "fontsize": "24"
} }
}, { }, {
"featureType": "highway", "featureType": "highway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1.2" "weight": "1.2"
} }
}, { }, {
"featureType": "highway", "featureType": "highway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on"
"color": "#b0e614f5" }
} }, {
}, { "featureType": "highway",
"featureType": "highway", "elementType": "geometry.stroke",
"elementType": "geometry.stroke", "stylers": {
"stylers": { "color": "#860df1ff"
"color": "#860df1ff" }
} }, {
}, { "featureType": "highway",
"featureType": "highway", "elementType": "labels.text.fill",
"elementType": "labels.text.fill", "stylers": {
"stylers": { "visibility": "on",
"visibility": "on", "color": "#5c1f7aff"
"color": "#65a8d1ff" }
} }, {
}, { "featureType": "highway",
"featureType": "highway", "elementType": "geometry",
"elementType": "geometry", "stylers": {
"stylers": { "weight": "4.2",
"weight": "4.2" "visibility": "on"
} }
}, { }, {
"featureType": "nationalway", "featureType": "nationalway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#27860cff"
} }
}, { }, {
"featureType": "nationalway", "featureType": "nationalway",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"color": "#1c4f7eff" "color": "#59864fff"
} }
}, { }, {
"featureType": "nationalway", "featureType": "nationalway",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#cf5151ff"
} }
}, { }, {
"featureType": "nationalway", "featureType": "nationalway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "weight": 1.6,
"weight": "1" "color": "#1d5e9bff"
} }
}, { }, {
"featureType": "nationalway", "featureType": "nationalway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "3" "weight": 6.2
} }
}, { }, {
"featureType": "provincialway", "featureType": "provincialway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#abc14cff" "color": "#abc14cff"
} }
}, { }, {
"featureType": "cityhighway", "featureType": "cityhighway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#4c8ec1ff"
} }
}, { }, {
"featureType": "arterial", "featureType": "arterial",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#4c8ec1ff"
} }
}, { }, {
"featureType": "tertiaryway", "featureType": "tertiaryway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4a90e2ff" "color": "#4a90e2ff"
} }
}, { }, {
"featureType": "fourlevelway", "featureType": "fourlevelway",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#4c8ec1ff"
} }
}, { }, {
"featureType": "local", "featureType": "local",
"elementType": "geometry.fill", "elementType": "geometry.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#4c8ec1ff" "color": "#4c8ec1ff"
} }
}, { }, {
"featureType": "provincialway", "featureType": "provincialway",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "cityhighway", "featureType": "cityhighway",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "arterial", "featureType": "arterial",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "tertiaryway", "featureType": "tertiaryway",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "fourlevelway", "featureType": "fourlevelway",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "local", "featureType": "local",
"elementType": "geometry.stroke", "elementType": "geometry.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#2e6b99ff" "color": "#2e6b99ff"
} }
}, { }, {
"featureType": "local", "featureType": "local",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "local", "featureType": "local",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "fourlevelway", "featureType": "fourlevelway",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "tertiaryway", "featureType": "tertiaryway",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "arterial", "featureType": "arterial",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "cityhighway", "featureType": "cityhighway",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "provincialway", "featureType": "provincialway",
"elementType": "labels.text.fill", "elementType": "labels.text.fill",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#65a8d1ff" "color": "#65a8d1ff"
} }
}, { }, {
"featureType": "provincialway", "featureType": "provincialway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "cityhighway", "featureType": "cityhighway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "arterial", "featureType": "arterial",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "tertiaryway", "featureType": "tertiaryway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "fourlevelway", "featureType": "fourlevelway",
"elementType": "labels.text.stroke", "elementType": "labels.text.stroke",
"stylers": { "stylers": {
"visibility": "on", "visibility": "on",
"color": "#ffffffff", "color": "#ffffffff",
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "fourlevelway", "featureType": "fourlevelway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "tertiaryway", "featureType": "tertiaryway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "local", "featureType": "local",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "1" "weight": "1"
} }
}, { }, {
"featureType": "provincialway", "featureType": "provincialway",
"elementType": "geometry", "elementType": "geometry",
"stylers": { "stylers": {
"weight": "3" "weight": "3",
} "visibility": "off"
}, { }
"featureType": "cityhighway", }, {
"elementType": "geometry", "featureType": "cityhighway",
"stylers": { "elementType": "geometry",
"weight": "3" "stylers": {
} "weight": "3"
}, { }
"featureType": "arterial", }, {
"elementType": "geometry", "featureType": "arterial",
"stylers": { "elementType": "geometry",
"weight": "3" "stylers": {
} "weight": "3"
}, { }
"featureType": "highway", }, {
"stylers": { "featureType": "highway",
"level": "6", "stylers": {
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"stylers": { "featureType": "highway",
"level": "7", "stylers": {
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"stylers": { "featureType": "highway",
"level": "8", "stylers": {
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"stylers": { "featureType": "highway",
"level": "9", "stylers": {
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "geometry", "featureType": "highway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "geometry", "featureType": "highway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "geometry", "featureType": "highway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "geometry", "featureType": "highway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "labels", "featureType": "highway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "labels", "featureType": "highway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "labels", "featureType": "highway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "highway", }, {
"elementType": "labels", "featureType": "highway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"stylers": { "featureType": "nationalway",
"level": "6", "stylers": {
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"stylers": { "featureType": "nationalway",
"level": "7", "stylers": {
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"stylers": { "featureType": "nationalway",
"level": "8", "stylers": {
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"stylers": { "featureType": "nationalway",
"level": "9", "stylers": {
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "geometry", "featureType": "nationalway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "geometry", "featureType": "nationalway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "geometry", "featureType": "nationalway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "geometry", "featureType": "nationalway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "labels", "featureType": "nationalway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "labels", "featureType": "nationalway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "labels", "featureType": "nationalway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "nationalway", }, {
"elementType": "labels", "featureType": "nationalway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "provincialway", }, {
"stylers": { "featureType": "provincialway",
"level": "8", "stylers": {
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "provincialway", }, {
"stylers": { "featureType": "provincialway",
"level": "9", "stylers": {
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "provincialway", }, {
"elementType": "geometry", "featureType": "provincialway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "provincialway", }, {
"elementType": "geometry", "featureType": "provincialway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "provincialway", }, {
"elementType": "labels", "featureType": "provincialway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "provincialway", }, {
"elementType": "labels", "featureType": "provincialway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "8-10" "curZoomRegionId": "0",
} "curZoomRegion": "8-10"
}, { }
"featureType": "cityhighway", }, {
"stylers": { "featureType": "cityhighway",
"level": "6", "stylers": {
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"stylers": { "featureType": "cityhighway",
"level": "7", "stylers": {
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"stylers": { "featureType": "cityhighway",
"level": "8", "stylers": {
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"stylers": { "featureType": "cityhighway",
"level": "9", "stylers": {
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "geometry", "featureType": "cityhighway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "geometry", "featureType": "cityhighway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "geometry", "featureType": "cityhighway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "geometry", "featureType": "cityhighway",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "labels", "featureType": "cityhighway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "6", "visibility": "off",
"curZoomRegionId": "0", "level": "6",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "labels", "featureType": "cityhighway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "7", "visibility": "off",
"curZoomRegionId": "0", "level": "7",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "labels", "featureType": "cityhighway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "8", "visibility": "off",
"curZoomRegionId": "0", "level": "8",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "cityhighway", }, {
"elementType": "labels", "featureType": "cityhighway",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "6-9" "curZoomRegionId": "0",
} "curZoomRegion": "6-9"
}, { }
"featureType": "arterial", }, {
"stylers": { "featureType": "arterial",
"level": "9", "stylers": {
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "9-9" "curZoomRegionId": "0",
} "curZoomRegion": "9-9"
}, { }
"featureType": "arterial", }, {
"elementType": "geometry", "featureType": "arterial",
"stylers": { "elementType": "geometry",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "9-9" "curZoomRegionId": "0",
} "curZoomRegion": "9-9"
}, { }
"featureType": "arterial", }, {
"elementType": "labels", "featureType": "arterial",
"stylers": { "elementType": "labels",
"visibility": "off", "stylers": {
"level": "9", "visibility": "off",
"curZoomRegionId": "0", "level": "9",
"curZoomRegion": "9-9" "curZoomRegionId": "0",
} "curZoomRegion": "9-9"
}] }
\ No newline at end of file }, {
"featureType": "nationalwaysign",
"elementType": "labels.text.fill",
"stylers": {
"color": "#f8e71cff"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.text.stroke",
"stylers": {
"color": "#f7f3f3ff"
}
}, {
"featureType": "nationalwaysign",
"elementType": "labels.text",
"stylers": {
"fontsize": 31
}
}]
\ No newline at end of file
src/assets/DrawingManager.js
...@@ -1642,34 +1642,3 @@ var BMAP_DRAWING_MARKER = "marker", // 鼠标画点模式 ...@@ -1642,34 +1642,3 @@ 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(window.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 //矩形的样式
});
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