diff --git a/angular.json b/angular.json index d456ab4..f8d3f75 100644 --- a/angular.json +++ b/angular.json @@ -35,6 +35,7 @@ "scripts": [ "node_modules/echarts/dist/echarts.js", "src/assets/mTokenK1/mToken_K1.js", + "src/assets/kmap/kmap-service-main-kd.js", "./node_modules/swiper/js/swiper.min.js", "src/assets/chartstheme/westeros.js", "src/assets/chartstheme/walden.js", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e0c2b10..e82830c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -30,7 +30,6 @@ const routes: Routes = [ {path:'keyUnit',loadChildren:() => import('./key-unit/key-unit.module').then(m => m.KeyUnitModule)}, {path:'planManagement',loadChildren:() => import('./plan-management/plan-management.module').then(m => m.PlanManagementModule)}, {path:'planAudit',loadChildren:() => import('./plan-audit/plan-audit.module').then(m => m.PlanAuditModule)}, - {path:'home',loadChildren:() => import('./pages/pages.module').then(m => m.PagesModule)}, {path:'visualization',component: HomeComponent}, {path:'gis',loadChildren:() => import('./gis-management/gis-management.module').then(m => m.GISManagementModule)}, {path:'statisticanalysis',loadChildren:() => import('./statistic-analysis/statistic-analysis.module').then(m => m.StatisticAnalysisModule)}, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3a08e63..7e1f764 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,58 +1,60 @@ -import { Component } from '@angular/core'; +import { Component, Inject, Injector } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Data } from './interface' -import { Router,ActivatedRoute } from '@angular/router' -import {CacheTokenService} from './http-interceptors/cache-token.service'//引入服务 +import { Router, ActivatedRoute } from '@angular/router' +import { CacheTokenService } from './http-interceptors/cache-token.service'//引入服务 import { MaskLayerService } from './mask-layer.service'; - +import * as global from 'globals'; @Component({ - selector: 'app-root', - templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] }) export class AppComponent { - constructor(private maskLayerService:MaskLayerService,private http:HttpClient,private router:Router,public token:CacheTokenService) { } - - isMaskLayerShow:boolean = false - - ngOnInit(): void { - - //监听遮罩层 - this.maskLayerService.getMessage().subscribe((message: any)=>{ - this.isMaskLayerShow = message - }); - var token = sessionStorage.getItem("token"); - var refreshToken = sessionStorage.getItem("refreshToken"); - if(token && refreshToken) { - this.http.post('/api/Account/RefreshToken', { - token: token, - refreshToken: refreshToken - }).subscribe((data: Data) => { - sessionStorage.setItem("level",data.level); - sessionStorage.setItem("token",data.token); - sessionStorage.setItem("refreshToken",data.refreshToken); - this.token.startUp() - }) - } - // console.log(1234,document.documentElement.clientWidth) - function addMeta(name,content){//手动添加mate标签 - - let meta = document.createElement('meta'); - -     meta.content=content; - -     meta.name=name; - -     document.getElementsByTagName('head')[0].appendChild(meta); - + constructor(private maskLayerService: MaskLayerService, private http: HttpClient, private router: Router, public token: CacheTokenService, private injector: Injector) { + global.injector = injector; } - if(document.documentElement.clientWidth < 800){ - addMeta('viewport','initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no,uc-fitscreen=yes,viewport-fit=cover') + + isMaskLayerShow: boolean = false + + ngOnInit(): void { + + //监听遮罩层 + this.maskLayerService.getMessage().subscribe((message: any) => { + this.isMaskLayerShow = message + }); + var token = sessionStorage.getItem("token"); + var refreshToken = sessionStorage.getItem("refreshToken"); + if (token && refreshToken) { + this.http.post('/api/Account/RefreshToken', { + token: token, + refreshToken: refreshToken + }).subscribe((data: Data) => { + sessionStorage.setItem("level", data.level); + sessionStorage.setItem("token", data.token); + sessionStorage.setItem("refreshToken", data.refreshToken); + this.token.startUp() + }) + } + // console.log(1234,document.documentElement.clientWidth) + function addMeta(name, content) {//手动添加mate标签 + + let meta = document.createElement('meta'); + + meta.content = content; + + meta.name = name; + + document.getElementsByTagName('head')[0].appendChild(meta); + + } + if (document.documentElement.clientWidth < 800) { + addMeta('viewport', 'initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no,uc-fitscreen=yes,viewport-fit=cover') + } } - } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 673c961..ddd0fc8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -2,7 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatIconModule } from '@angular/material/icon'; @@ -15,8 +15,8 @@ import { FormsModule } from '@angular/forms'; import { UiModule } from './ui/ui.module'; import { HttpClientModule } from '@angular/common/http'; import { httpInterceptorProviders } from './http-interceptors/index' -import {CacheTokenService} from './http-interceptors/cache-token.service' -import { TreeService } from'./http-interceptors/tree.service'; +import { CacheTokenService } from './http-interceptors/cache-token.service' +import { TreeService } from './http-interceptors/tree.service'; import { MTokenK1Component } from './m-token-k1/m-token-k1.component' //K1秘钥 import { CountdownModule } from 'ngx-countdown'; //倒计时插件 import { GISManagementModule } from './gis-management/gis-management.module'; @@ -24,34 +24,36 @@ import { DataCollectionModule } from './data-collection/data-collection.module'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { TestComponent } from './test/test.component'; import { ExternalLinksPlanComponent } from './external-links-plan/external-links-plan.component'; +import { SearchDownList } from '../modules/map/declare/component/SearchDownListPlugins/SearchDownList'; @NgModule({ - declarations: [ - AppComponent, - HomeComponent, - MTokenK1Component, - TestComponent, - ExternalLinksPlanComponent - ], - imports: [ - BrowserModule, - AppRoutingModule, - BrowserAnimationsModule, - MatButtonModule, - MatCheckboxModule, - MatSidenavModule, - NavigationModule, - MatIconModule, - PagesModule, - FormsModule, - HttpClientModule, - CountdownModule, - GISManagementModule, - DataCollectionModule, - MatProgressSpinnerModule, - UiModule - ], - providers: [httpInterceptorProviders, CacheTokenService,TreeService], - bootstrap: [AppComponent] + declarations: [ + AppComponent, + HomeComponent, + MTokenK1Component, + TestComponent, + ExternalLinksPlanComponent, + SearchDownList + ], + imports: [ + BrowserModule, + AppRoutingModule, + BrowserAnimationsModule, + MatButtonModule, + MatCheckboxModule, + MatSidenavModule, + NavigationModule, + MatIconModule, + PagesModule, + FormsModule, + HttpClientModule, + CountdownModule, + GISManagementModule, + DataCollectionModule, + MatProgressSpinnerModule, + UiModule + ], + providers: [httpInterceptorProviders, CacheTokenService, TreeService], + bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/data-collection/data-collection.module.ts b/src/app/data-collection/data-collection.module.ts index 50060c8..a689ae4 100644 --- a/src/app/data-collection/data-collection.module.ts +++ b/src/app/data-collection/data-collection.module.ts @@ -1,46 +1,46 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import {A11yModule} from '@angular/cdk/a11y'; -import {DragDropModule} from '@angular/cdk/drag-drop'; -import {PortalModule} from '@angular/cdk/portal'; -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CdkStepperModule} from '@angular/cdk/stepper'; -import {CdkTableModule} from '@angular/cdk/table'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatBadgeModule} from '@angular/material/badge'; -import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; -import {MatButtonModule} from '@angular/material/button'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material/card'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatChipsModule} from '@angular/material/chips'; -import {MatStepperModule} from '@angular/material/stepper'; -import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatDialogModule} from '@angular/material/dialog'; -import {MatDividerModule} from '@angular/material/divider'; -import {MatExpansionModule} from '@angular/material/expansion'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; -import {MatListModule} from '@angular/material/list'; -import {MatMenuModule} from '@angular/material/menu'; -import {MatNativeDateModule, MatRippleModule, MatOption} from '@angular/material/core'; -import {MatPaginatorModule} from '@angular/material/paginator'; -import {MatProgressBarModule} from '@angular/material/progress-bar'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {MatSliderModule} from '@angular/material/slider'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatSortModule} from '@angular/material/sort'; -import {MatTableModule} from '@angular/material/table'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatTreeModule} from '@angular/material/tree'; +import { A11yModule } from '@angular/cdk/a11y'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { PortalModule } from '@angular/cdk/portal'; +import { ScrollingModule } from '@angular/cdk/scrolling'; +import { CdkStepperModule } from '@angular/cdk/stepper'; +import { CdkTableModule } from '@angular/cdk/table'; +import { CdkTreeModule } from '@angular/cdk/tree'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatCardModule } from '@angular/material/card'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatListModule } from '@angular/material/list'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatNativeDateModule, MatRippleModule, MatOption } from '@angular/material/core'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatTreeModule } from '@angular/material/tree'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DataCollectionRoutingModule } from './data-collection.routing'; import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component'; @@ -49,55 +49,55 @@ import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage import { NzTreeModule } from 'ng-zorro-antd/tree'; @NgModule({ - declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent,AddWater,AddFireForce,ViewDetails,AddLinkageForce,ViewDetails2], - imports: [ - CommonModule, - A11yModule, - CdkStepperModule, - CdkTableModule, - CdkTreeModule, - DragDropModule, - MatAutocompleteModule, - MatBadgeModule, - MatBottomSheetModule, - MatButtonModule, - MatButtonToggleModule, - MatCardModule, - MatCheckboxModule, - MatChipsModule, - MatStepperModule, - MatDatepickerModule, - MatDialogModule, - MatDividerModule, - MatExpansionModule, - MatGridListModule, - MatIconModule, - MatInputModule, - MatListModule, - MatMenuModule, - MatNativeDateModule, - MatPaginatorModule, - MatProgressBarModule, - MatProgressSpinnerModule, - MatRadioModule, - MatRippleModule, - MatSelectModule, - MatSidenavModule, - MatSliderModule, - MatSlideToggleModule, - MatSnackBarModule, - MatSortModule, - MatTableModule, - MatTabsModule, - MatToolbarModule, - MatTooltipModule, - MatTreeModule, - PortalModule, - ScrollingModule, - FormsModule, - ReactiveFormsModule, - DataCollectionRoutingModule, - NzTreeModule - ] + declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2], + imports: [ + CommonModule, + A11yModule, + CdkStepperModule, + CdkTableModule, + CdkTreeModule, + DragDropModule, + MatAutocompleteModule, + MatBadgeModule, + MatBottomSheetModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatStepperModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatTreeModule, + PortalModule, + ScrollingModule, + FormsModule, + ReactiveFormsModule, + DataCollectionRoutingModule, + NzTreeModule + ] }) export class DataCollectionModule { } diff --git a/src/app/data-collection/fire-force/fire-force.component.ts b/src/app/data-collection/fire-force/fire-force.component.ts index bf57296..07eff1d 100644 --- a/src/app/data-collection/fire-force/fire-force.component.ts +++ b/src/app/data-collection/fire-force/fire-force.component.ts @@ -6,11 +6,12 @@ import { Component, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap, IMarker, IMarkerCluster, IPlaceSearch } from '@src/modules/map/declare/map'; import { Console } from 'console'; import { TreeService } from 'src/app/http-interceptors/tree.service'; import Viewer from 'viewerjs' declare var CryptoJS -declare var AMap: any; @Component({ selector: 'app-fire-force', @@ -66,7 +67,7 @@ export class FireForceComponent implements OnInit { } } //循环渲染出所有力量markers - cluster:any //力量聚合实例 + cluster:IMarkerCluster //力量聚合实例 createMarker(list){ let markerArrcluster = [] this.cluster ? this.cluster.setData([]) : null @@ -91,11 +92,13 @@ export class FireForceComponent implements OnInit { data : item }) : null }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); + + var gridSize = 60 + var count = markerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); var div = document.createElement('div'); var Hue = 180 - factor * 180; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; @@ -103,91 +106,94 @@ export class FireForceComponent implements OnInit { var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); div.style.width = div.style.height = size + 'px'; div.style.border = 'solid 1px ' + borderColor; div.style.borderRadius = size / 2 + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; + div.innerHTML = contextCount; div.style.lineHeight = size + 'px'; div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=>{ - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let node = e.clusterData[0].data - // console.log(node) - this.clearData() - this.selectedFireForce = node.fireForceDetailInfo - this.selectedFireForceId = node.fireForceDetailId - if(node.forceType != 0){//如果是其他消防力量 - this.selectedFireForceLevel = 4 + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let node = e.clusterData[0].data + // console.log(node) + this.clearData() + this.selectedFireForce = node.fireForceDetailInfo + this.selectedFireForceId = node.fireForceDetailId + if(node.forceType != 0){//如果是其他消防力量 + this.selectedFireForceLevel = 4 + }else{ + this.selectedFireForceLevel = node.level + } + this.FireForceDetailInfo.stationName = node.fireForceDetailInfo.name + + if(node.fireForceDetailId){ + let type + if(node.forceType == 0){ + type = 0 }else{ - this.selectedFireForceLevel = node.level + type = 1 } - this.FireForceDetailInfo.stationName = node.fireForceDetailInfo.name - - if(node.fireForceDetailId){ - let type - if(node.forceType == 0){ - type = 0 - }else{ - type = 1 + this.isMasklayer = true + this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { + this.isMasklayer = false + this.FireForceDetailInfo = data + if(data.location && data.location.x){//如果已经标注单位坐标 + this.positionLngLat = data.location } - this.isMasklayer = true - this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { - this.isMasklayer = false - this.FireForceDetailInfo = data - if(data.location && data.location.x){//如果已经标注单位坐标 - this.positionLngLat = data.location - } - //相关资料 - data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null + //相关资料 + data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null - if(node.forceType == 0 && node.level == 0){ - this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData - this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData - } - if(node.forceType == 0 && node.level == 1){ - this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData - this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData - } - if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ - this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData - this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData - } - if(node.forceType != 0){ - this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData - this.othercontactData = JSON.parse(data.contactData) || this.otherpersonCountData - } - }) - - } - //寻找管辖单位 - this.allFireForceList.forEach(item => { - if(item.id == node.parentId){ - this.superior.name = item.name - this.superior.code = item.code + if(node.forceType == 0 && node.level == 0){ + this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData + this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData + } + if(node.forceType == 0 && node.level == 1){ + this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData + this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData + } + if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ + this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData + this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData + } + if(node.forceType != 0){ + this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData + this.othercontactData = JSON.parse(data.contactData) || this.otherpersonCountData } }) + } - }) - }); - + //寻找管辖单位 + this.allFireForceList.forEach(item => { + if(item.id == node.parentId){ + this.superior.name = item.name + this.superior.code = item.code + } + }) + } + },this) + + } ngOnInit(): void { this.getAllFireForce() @@ -317,10 +323,10 @@ export class FireForceComponent implements OnInit { if(data.location && data.location.x){//如果已经标注单位坐标 this.positionLngLat = data.location this.map.setCenter([data.location.x,data.location.y]); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [data.location.x,data.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); @@ -793,8 +799,8 @@ export class FireForceComponent implements OnInit { this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.isGisTopBox = false } - map:any - placeSearch:any//构造地点查询类 + map:IMap + placeSearch: IPlaceSearch//构造地点查询类 isMapLabel:boolean = false //是否已经标记坐标 newPositionMarkerContent:any = '
' + @@ -806,9 +812,9 @@ export class FireForceComponent implements OnInit { '
|
' + '
' //创建地图 - newPositionMarker:any//坐标实例 + newPositionMarker:IMarker//坐标实例 createMap(){ - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom:12 }) this.map.setCity('上海市'); @@ -816,16 +822,14 @@ export class FireForceComponent implements OnInit { var autoOptions = { input: "tipinput" }; - AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = new AMap.AutoComplete(autoOptions); - this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions,this); + this.placeSearch = MapFactory.PlaceSearchInstance(this); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // @@ -845,26 +849,26 @@ export class FireForceComponent implements OnInit { }else{ center = this.map.getCenter(); //获取当前地图中心位置 } - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ draggable: true, position: center, content: this.newPositionMarkerContentBtn, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.map.add(this.newPositionMarker); this.isMapLabel = true this.newPositionMarker.on('dragend', (e)=>{ this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat} - }) + },this) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -878,10 +882,10 @@ export class FireForceComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -891,10 +895,10 @@ export class FireForceComponent implements OnInit { this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -908,10 +912,10 @@ export class FireForceComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.ts b/src/app/data-collection/linkage-forces/linkage-forces.component.ts index 2d812cb..92c2a83 100644 --- a/src/app/data-collection/linkage-forces/linkage-forces.component.ts +++ b/src/app/data-collection/linkage-forces/linkage-forces.component.ts @@ -10,8 +10,10 @@ import { NzTreeNode } from 'ng-zorro-antd/tree'; import { TreeService } from 'src/app/http-interceptors/tree.service'; import Viewer from 'viewerjs' import Swiper from 'swiper'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap, IMarker } from '@src/modules/map/declare/map'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-linkage-forces', templateUrl: './linkage-forces.component.html', @@ -124,11 +126,13 @@ export class LinkageForcesComponent implements OnInit { }) } }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); + + var gridSize = 60 + var count = markerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); var div = document.createElement('div'); var Hue = 180 - factor * 180; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; @@ -136,40 +140,44 @@ export class LinkageForcesComponent implements OnInit { var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); div.style.width = div.style.height = size + 'px'; div.style.border = 'solid 1px ' + borderColor; div.style.borderRadius = size / 2 + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; + div.innerHTML = contextCount; div.style.lineHeight = size + 'px'; div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let item = e.clusterData[0].data - this.clearData() - this.LinkageForceDetailInfo = item - item.location?this.positionLngLat = item.location:null - this.AttachmentArr = JSON.parse(item.relevantInfomationData) - } - }) + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let item = e.clusterData[0].data + this.clearData() + this.LinkageForceDetailInfo = item + item.location?this.positionLngLat = item.location:null + this.AttachmentArr = JSON.parse(item.relevantInfomationData) + } + },this) + } ngOnInit(): void { @@ -251,10 +259,10 @@ export class LinkageForcesComponent implements OnInit { } if(item.location && item.location.x){//如果已经标注单位坐标 this.map.setCenter([item.location.x,item.location.y]); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [item.location.x,item.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); @@ -512,7 +520,7 @@ export class LinkageForcesComponent implements OnInit { this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.isGisTopBox = false } - map:any + map:IMap placeSearch:any//构造地点查询类 isMapLabel:boolean = false //是否已经标记坐标 newPositionMarkerContent:any = @@ -525,9 +533,9 @@ export class LinkageForcesComponent implements OnInit { '
|
' + '' //创建地图 - newPositionMarker:any//坐标实例 + newPositionMarker:IMarker//坐标实例 createMap(){ - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom:12 }) this.map.setCity('上海市'); @@ -535,16 +543,14 @@ export class LinkageForcesComponent implements OnInit { var autoOptions = { input: "tipinput" }; - AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = new AMap.AutoComplete(autoOptions); - this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions,this); + this.placeSearch = MapFactory.PlaceSearchInstance(this); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // @@ -564,26 +570,26 @@ export class LinkageForcesComponent implements OnInit { }else{ center = this.map.getCenter(); //获取当前地图中心位置 } - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ draggable: true, position: center, content: this.newPositionMarkerContentBtn, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.map.add(this.newPositionMarker); this.isMapLabel = true this.newPositionMarker.on('dragend', (e)=>{ this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat} - }) + },this) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -597,10 +603,10 @@ export class LinkageForcesComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -611,10 +617,10 @@ export class LinkageForcesComponent implements OnInit { this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -628,10 +634,10 @@ export class LinkageForcesComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); diff --git a/src/app/data-collection/water-collection/water-collection.component.ts b/src/app/data-collection/water-collection/water-collection.component.ts index 56e12e2..9c0e730 100644 --- a/src/app/data-collection/water-collection/water-collection.component.ts +++ b/src/app/data-collection/water-collection/water-collection.component.ts @@ -4,7 +4,8 @@ import { ElementRef } from '@angular/core'; import { Component, OnInit } from '@angular/core'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -declare var AMap: any; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap, IMarker } from '@src/modules/map/declare/map'; @Component({ selector: 'app-water-collection', @@ -80,11 +81,13 @@ export class WaterCollectionComponent implements OnInit { }) } }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); + + var gridSize = 60 + var count = markerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); var div = document.createElement('div'); var Hue = 180 - factor * 180; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; @@ -92,46 +95,49 @@ export class WaterCollectionComponent implements OnInit { var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); div.style.width = div.style.height = size + 'px'; div.style.border = 'solid 1px ' + borderColor; div.style.borderRadius = size / 2 + 'px'; div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; + div.innerHTML = contextCount; div.style.lineHeight = size + 'px'; div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - context.marker.setContent(content) - var offset = new AMap.Pixel(-15, -15); - context.marker.setOffset(offset) - } - this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let item = e.clusterData[0].data - // console.log(item) - this.selectedLiIndex = null - this.clearData() - this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型 - this.waterData = item - item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null - item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null - item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null - this.positionLngLat = item.location - } - }) + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); - + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let item = e.clusterData[0].data + // console.log(item) + this.selectedLiIndex = null + this.clearData() + this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型 + this.waterData = item + item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null + item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null + item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null + this.positionLngLat = item.location + } + },this) + + } ngOnInit(): void { // console.log(88888,navigator.userAgent) @@ -226,10 +232,10 @@ export class WaterCollectionComponent implements OnInit { if(item.location.x){//如果已经标注单位坐标 // console.log(item) this.map.setCenter([item.location.x,item.location.y]); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [item.location.x,item.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); @@ -518,7 +524,7 @@ export class WaterCollectionComponent implements OnInit { this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.isGisTopBox = false } - map:any + map:IMap placeSearch:any//构造地点查询类 isMapLabel:boolean = false //是否已经标记坐标 newPositionMarkerContent:any = @@ -531,9 +537,9 @@ export class WaterCollectionComponent implements OnInit { '
|
' + '' //创建地图 - newPositionMarker:any//坐标实例 + newPositionMarker:IMarker//坐标实例 createMap(){ - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom:12 }) this.map.setCity('上海市'); @@ -541,16 +547,14 @@ export class WaterCollectionComponent implements OnInit { var autoOptions = { input: "tipinput" }; - AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = new AMap.AutoComplete(autoOptions); - this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions,this); + this.placeSearch = MapFactory.PlaceSearchInstance(this); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // @@ -573,26 +577,26 @@ export class WaterCollectionComponent implements OnInit { // console.log(3) center = this.map.getCenter(); //获取当前地图中心位置 } - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ draggable: true, position: center, content: this.newPositionMarkerContentBtn, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.map.add(this.newPositionMarker); this.isMapLabel = true this.newPositionMarker.on('dragend', (e)=>{ this.positionLngLat = {x: e.lnglat.lng, y: e.lnglat.lat} - }) + },this) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -606,10 +610,10 @@ export class WaterCollectionComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -620,10 +624,10 @@ export class WaterCollectionComponent implements OnInit { this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.isGisTopBox = false this.map.remove(this.newPositionMarker) - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.positionLngLat.x,this.positionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.map.add(this.newPositionMarker); @@ -637,10 +641,10 @@ export class WaterCollectionComponent implements OnInit { this.positionLngLat = {} this.atLastPositionLngLat = {} }else{ - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-15, -18) + offset: MapFactory.PixelInstance(-15, -18) }); this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.add(this.newPositionMarker); diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts index 4b428b6..52da73d 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -1,1154 +1,1194 @@ import { HttpClient } from '@angular/common/http'; -import { Component, OnInit ,Renderer2,ElementRef, Inject, NgZone, ViewChild } from '@angular/core'; -import { FormBuilder,FormGroup, FormControl } from '@angular/forms'; +import { Component, OnInit, Renderer2, ElementRef, Inject, NgZone, ViewChild } from '@angular/core'; +import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { ICircle, IDriving, IMap, IMouseTool } from '@src/modules/map/declare/map'; +import { MapFactory } from '../../../modules/map/declare/factory' declare var AMap: any; declare var QRCode: any; + @Component({ - selector: 'app-gis-labeling', - templateUrl: './gis-labeling.component.html', - styleUrls: ['./gis-labeling.component.scss'] + selector: 'app-gis-labeling', + templateUrl: './gis-labeling.component.html', + styleUrls: ['./gis-labeling.component.scss'] }) export class GisLabelingComponent implements OnInit { - constructor(private elementRef: ElementRef,public renderer2: Renderer2,private http:HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog,public _ngZone:NgZone,private fb: FormBuilder) { } - - //右上角div - selectedTitle:number - titleList = [ {name:'重点单位',iconImg:'/assets/images/uniticon.png'}, - {name:'水源',iconImg:'/assets/images/watericon.png'}, - {name:'消防力量',iconImg:'/assets/images/xfll.png'}, - {name:'联动力量',iconImg:'/assets/images/ldll.png'}, - {name:'测量工具',iconImg:'/assets/images/distanceicon.png'}, - {name:'图层选择',iconImg:'/assets/images/coverageicon.png'} - ] - keyUnitList:any = [] - waterList = [ - {id:'0',name:'消火栓',selected:false}, - {id:'1',name:'消防水池',selected:false}, - {id:'2',name:'天然水源',selected:false}, - ] - fireForceList = [ - {id:'0',name:'总队',selected:false}, - {id:'1',name:'支队',selected:false}, - {id:'2',name:'大队',selected:false}, - {id:'3',name:'中队(消防站)',selected:false}, - {id:'4',name:'其他消防队伍',selected:false} - ] - linkageForcesList = [ - {id:'0',name:'安监',selected:false}, - {id:'1',name:'电力局',selected:false}, - {id:'2',name:'公安',selected:false}, - {id:'3',name:'海事',selected:false}, - {id:'4',name:'环保局',selected:false}, - {id:'5',name:'交通',selected:false}, - {id:'6',name:'民政',selected:false}, - {id:'7',name:'气象局',selected:false}, - {id:'8',name:'燃气局',selected:false}, - {id:'9',name:'市政',selected:false}, - {id:'10',name:'水利',selected:false}, - {id:'11',name:'通信',selected:false}, - {id:'12',name:'医疗',selected:false}, - {id:'13',name:'应急管理',selected:false}, - {id:'14',name:'住建',selected:false} - ] - keyUnitForm : FormGroup//gis右上角重点单位表单 - watertForm : FormGroup//gis右上角水源表单 - fireForceForm : FormGroup//gis右上角消防力量表单 - linkageForcesForm : FormGroup//gis右上角联动力量表单 - - selectedUnitList:any = []//选择提交的单位 - selectedWaterList:any = []//选择提交的水源 - selectedFireForceList:any = []//选择提交的消防力量 - selectedLinkageForcesList:any = []//选择提交的联动力量 - - unitAreaDefault:any = '-1'//默认单位范围 - waterAreaDefault:any = '-1'//默认水源范围 - fireForceAreaDefault:any = '-1'//默认消防力量范围 - linkageForcesAreaDefault:any = '-1'//默认联动力量范围 - - - //获得单位循环出来的checkbox列表(formControl实例) - get units():any{ - return this.keyUnitForm.get('units') - } - get waters():any{ - return this.watertForm.get('waters') - } - get fireForce():any{ - return this.fireForceForm.get('fireForce') - } - get linkageForces():any{ - return this.linkageForcesForm.get('linkageForces') - } - - async getAllBuildingType(){ - let result = await new Promise((result,reject)=>{ - this.http.get('/api/BuildingTypes/Simple').subscribe((data:any) => { - data.forEach(item => { - item.selected = false + constructor(private elementRef: ElementRef, public renderer2: Renderer2, private http: HttpClient, public snackBar: MatSnackBar, public dialog: MatDialog, public _ngZone: NgZone, private fb: FormBuilder) { } + + //右上角div + selectedTitle: number + titleList = [{ name: '重点单位', iconImg: '/assets/images/uniticon.png' }, + { name: '水源', iconImg: '/assets/images/watericon.png' }, + { name: '消防力量', iconImg: '/assets/images/xfll.png' }, + { name: '联动力量', iconImg: '/assets/images/ldll.png' }, + { name: '测量工具', iconImg: '/assets/images/distanceicon.png' }, + { name: '图层选择', iconImg: '/assets/images/coverageicon.png' } + ] + keyUnitList: any = [] + waterList = [ + { id: '0', name: '消火栓', selected: false }, + { id: '1', name: '消防水池', selected: false }, + { id: '2', name: '天然水源', selected: false }, + ] + fireForceList = [ + { id: '0', name: '总队', selected: false }, + { id: '1', name: '支队', selected: false }, + { id: '2', name: '大队', selected: false }, + { id: '3', name: '中队(消防站)', selected: false }, + { id: '4', name: '其他消防队伍', selected: false } + ] + linkageForcesList = [ + { id: '0', name: '安监', selected: false }, + { id: '1', name: '电力局', selected: false }, + { id: '2', name: '公安', selected: false }, + { id: '3', name: '海事', selected: false }, + { id: '4', name: '环保局', selected: false }, + { id: '5', name: '交通', selected: false }, + { id: '6', name: '民政', selected: false }, + { id: '7', name: '气象局', selected: false }, + { id: '8', name: '燃气局', selected: false }, + { id: '9', name: '市政', selected: false }, + { id: '10', name: '水利', selected: false }, + { id: '11', name: '通信', selected: false }, + { id: '12', name: '医疗', selected: false }, + { id: '13', name: '应急管理', selected: false }, + { id: '14', name: '住建', selected: false } + ] + keyUnitForm: FormGroup//gis右上角重点单位表单 + watertForm: FormGroup//gis右上角水源表单 + fireForceForm: FormGroup//gis右上角消防力量表单 + linkageForcesForm: FormGroup//gis右上角联动力量表单 + + selectedUnitList: any = []//选择提交的单位 + selectedWaterList: any = []//选择提交的水源 + selectedFireForceList: any = []//选择提交的消防力量 + selectedLinkageForcesList: any = []//选择提交的联动力量 + + unitAreaDefault: any = '-1'//默认单位范围 + waterAreaDefault: any = '-1'//默认水源范围 + fireForceAreaDefault: any = '-1'//默认消防力量范围 + linkageForcesAreaDefault: any = '-1'//默认联动力量范围 + + + //获得单位循环出来的checkbox列表(formControl实例) + get units(): any { + return this.keyUnitForm.get('units') + } + get waters(): any { + return this.watertForm.get('waters') + } + get fireForce(): any { + return this.fireForceForm.get('fireForce') + } + get linkageForces(): any { + return this.linkageForcesForm.get('linkageForces') + } + + async getAllBuildingType() { + let result = await new Promise((result, reject) => { + this.http.get('/api/BuildingTypes/Simple').subscribe((data: any) => { + data.forEach(item => { + item.selected = false + }) + this.keyUnitList = data + result('获取单位类型') + }) }) - this.keyUnitList = data - result('获取单位类型') - }) - }) - } - ngOnInit(): void { - window.setTimeout(()=>{ - this.mapInit() - },0) - let buildingType = this.getAllBuildingType()//获取建筑类型 - Promise.all([buildingType]).then(()=>{ - this.keyUnitForm = this.fb.group({ - units:this.buildUnits(), - allSelectedUnit:new FormControl(), - areaUnit:new FormControl() - }) - this.watertForm = this.fb.group({ - waters:this.waterUnits(), - allSelectedWater:new FormControl(), - areaWater:new FormControl() - }) - this.fireForceForm = this.fb.group({ - fireForce:this.fireForceController(), - allSelectedFireForce:new FormControl(), - areaFireForce:new FormControl() - }) - this.linkageForcesForm = this.fb.group({ - linkageForces:this.linkageForcesController(), - allSelectedLinkageForces:new FormControl(), - areaLinkageForces:new FormControl() - }) - - //将选中的push到数组 - this.units.valueChanges.subscribe(values => { - let selects:string[] = [] - values.forEach((selected:boolean,i:number) => { - selected === true && selects.push(this.keyUnitList[i].id) + } + ngOnInit(): void { + window.setTimeout(() => { + this.mapInit() + }, 0) + let buildingType = this.getAllBuildingType()//获取建筑类型 + Promise.all([buildingType]).then(() => { + this.keyUnitForm = this.fb.group({ + units: this.buildUnits(), + allSelectedUnit: new FormControl(), + areaUnit: new FormControl() + }) + this.watertForm = this.fb.group({ + waters: this.waterUnits(), + allSelectedWater: new FormControl(), + areaWater: new FormControl() + }) + this.fireForceForm = this.fb.group({ + fireForce: this.fireForceController(), + allSelectedFireForce: new FormControl(), + areaFireForce: new FormControl() + }) + this.linkageForcesForm = this.fb.group({ + linkageForces: this.linkageForcesController(), + allSelectedLinkageForces: new FormControl(), + areaLinkageForces: new FormControl() + }) + + //将选中的push到数组 + this.units.valueChanges.subscribe(values => { + let selects: string[] = [] + values.forEach((selected: boolean, i: number) => { + selected === true && selects.push(this.keyUnitList[i].id) + }); + this.selectedUnitList = selects + }) + this.waters.valueChanges.subscribe(values => { + let selects: string[] = [] + values.forEach((selected: boolean, i: number) => { + selected === true && selects.push(this.waterList[i].id) + }); + this.selectedWaterList = selects + }) + + this.fireForce.valueChanges.subscribe(values => { + let selects: string[] = [] + values.forEach((selected: boolean, i: number) => { + selected === true && selects.push(this.fireForceList[i].id) + }); + this.selectedFireForceList = selects + }) + this.linkageForces.valueChanges.subscribe(values => { + let selects: string[] = [] + values.forEach((selected: boolean, i: number) => { + selected === true && selects.push(this.linkageForcesList[i].id) + }); + this.selectedLinkageForcesList = selects + }) + this.unitSelected() + }) + } + + //构造重点单位checkbox控制器 + buildUnits() { + const arr = this.keyUnitList.map(item => { + return this.fb.control(item.selected); }); - this.selectedUnitList = selects - }) - this.waters.valueChanges.subscribe(values => { - let selects:string[] = [] - values.forEach((selected:boolean,i:number) => { - selected === true && selects.push(this.waterList[i].id) + return this.fb.array(arr); + } + //构造水源checkbox控制器 + waterUnits() { + const arr = this.waterList.map(item => { + return this.fb.control(item.selected); }); - this.selectedWaterList = selects - }) - - this.fireForce.valueChanges.subscribe(values => { - let selects:string[] = [] - values.forEach((selected:boolean,i:number) => { - selected === true && selects.push(this.fireForceList[i].id) + return this.fb.array(arr); + } + //构造消防力量checkbox控制器 + fireForceController() { + const arr = this.fireForceList.map(item => { + return this.fb.control(item.selected); }); - this.selectedFireForceList = selects - }) - this.linkageForces.valueChanges.subscribe(values => { - let selects:string[] = [] - values.forEach((selected:boolean,i:number) => { - selected === true && selects.push(this.linkageForcesList[i].id) + return this.fb.array(arr); + } + //构造联动力量checkbox控制器 + linkageForcesController() { + const arr = this.linkageForcesList.map(item => { + return this.fb.control(item.selected); }); - this.selectedLinkageForcesList = selects - }) - this.unitSelected() - }) - } - - - - //构造重点单位checkbox控制器 - buildUnits() { - const arr = this.keyUnitList.map(item => { - return this.fb.control(item.selected); - }); - return this.fb.array(arr); - } - //构造水源checkbox控制器 - waterUnits() { - const arr = this.waterList.map(item => { - return this.fb.control(item.selected); - }); - return this.fb.array(arr); - } - //构造消防力量checkbox控制器 - fireForceController() { - const arr = this.fireForceList.map(item => { - return this.fb.control(item.selected); - }); - return this.fb.array(arr); - } - //构造联动力量checkbox控制器 - linkageForcesController() { - const arr = this.linkageForcesList.map(item => { - return this.fb.control(item.selected); - }); - return this.fb.array(arr); - } - - //初始化获取勾选项 - unitSelected(){ - this.keyUnitList.forEach(item => { - if(item.selected){ - this.selectedUnitList.push(item.name) - } + return this.fb.array(arr); + } + + //初始化获取勾选项 + unitSelected() { + this.keyUnitList.forEach(item => { + if (item.selected) { + this.selectedUnitList.push(item.name) + } + }) + this.waterList.forEach(item => { + if (item.selected) { + this.selectedWaterList.push(item.name) + } + }) + this.fireForceList.forEach(item => { + if (item.selected) { + this.selectedFireForceList.push(item.name) + } + }) + this.linkageForcesList.forEach(item => { + if (item.selected) { + this.selectedLinkageForcesList.push(item.name) + } + }) + } + //地图范围圆圈---重点单位 + circle:ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: 'dashed', + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: '#1791fc', + zIndex: 50, }) - this.waterList.forEach(item => { - if(item.selected){ - this.selectedWaterList.push(item.name) - } + //地图范围圆圈---水源 + circleofwater:ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: 'dashed', + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: '#ee2200', + zIndex: 50, }) - this.fireForceList.forEach(item => { - if(item.selected){ - this.selectedFireForceList.push(item.name) - } + //地图范围圆圈---消防力量 + circleoffireForce:ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: 'dashed', + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: '#e830cc', + zIndex: 50, }) - this.linkageForcesList.forEach(item => { - if(item.selected){ - this.selectedLinkageForcesList.push(item.name) - } + //地图范围圆圈---联动力量 + circleoflinkageForces:ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: 'dashed', + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: '#f6a317', + zIndex: 50, }) - } - //地图范围圆圈---重点单位 - circle = new AMap.Circle({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#1791fc', - zIndex: 50, - }) - //地图范围圆圈---水源 - circleofwater = new AMap.Circle({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#ee2200', - zIndex: 50, - }) - //地图范围圆圈---消防力量 - circleoffireForce = new AMap.Circle({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#e830cc', - zIndex: 50, - }) - //地图范围圆圈---联动力量 - circleoflinkageForces = new AMap.Circle({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#f6a317', - zIndex: 50, - }) - - - //重点单位提交 - ketUnitSubmit(value){ - if(this.markers.length == 0){ - let paramsdata:any = { - PageSize:99999, - BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] - } - this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => { - this.createUnitMarker(data.items) - }) - }else{ - this.circle.setRadius(Number(this.unitAreaDefault)) - this.circle.setCenter(this.markers[0]._position) - this.circle.setMap(this.map) - let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 - if(this.unitAreaDefault == '0'){ - this.circle.setRadius(this.Calculationofdistance(this.map.getBounds())/2) - Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) - }else{ - Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y) - } - if(this.unitAreaDefault == '-1'){//如果勾选全部 - let paramsdata:any = { - PageSize:99999, - BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] + + + //重点单位提交 + ketUnitSubmit(value) { + if (this.markers.length == 0) { + let paramsdata: any = { + PageSize: 99999, + BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] + } + this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { + this.createUnitMarker(data.items) + }) + } else { + this.circle.setRadius(Number(this.unitAreaDefault)) + this.circle.setCenter(this.markers[0]._position) + this.circle.setMap(this.map) + let Distance + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + if (this.unitAreaDefault == '0') { + this.circle.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) + Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) + } else { + Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y) + } + if (this.unitAreaDefault == '-1') {//如果勾选全部 + let paramsdata: any = { + PageSize: 99999, + BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] + } + this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { + data.items.forEach((i, index) => { + if (i.id == this.selectedUnit.id) { + data.items.splice(index, 1) + } + }) + this.createUnitMarker(data.items) + }) + } else { + let paramsdata: any = { + PageSize: 99999, + Lon: this.selectedUnit.location.x, + Lat: this.selectedUnit.location.y, + Distance: Distance, + BuildingTypeIdList: this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] + } + this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { + data.items.forEach((i, index) => { + if (i.id == this.selectedUnit.id) { + data.items.splice(index, 1) + } + }) + this.createUnitMarker(data.items) + }) + } } - this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => { - data.items.forEach((i,index) => { - if(i.id == this.selectedUnit.id){ - data.items.splice(index,1) + } + //创建单位markers + unitCluster: any //重点单位点聚合实例 + createUnitMarker(list) { + let unitMarkerArrcluster = [] + this.unitCluster ? this.unitCluster.setData([]) : null + list.forEach((item) => { + let image + if (item.buildingTypes[0].name.indexOf('高层') != -1) { + image = '/assets/images/Highbuilding.png' + } else if (item.buildingTypes[0].name.indexOf('化工') != -1) { + image = '/assets/images/Chemicalindustry.png' + } else if (item.buildingTypes[0].name.indexOf('餐饮') != -1) { + image = '/assets/images/canyin.png' + } else if (item.buildingTypes[0].name.indexOf('厂房') != -1) { + image = '/assets/images/changfang.png' + } else if (item.buildingTypes[0].name.indexOf('储罐') != -1) { + image = '/assets/images/chuguanlei.png' + } else if (item.buildingTypes[0].name.indexOf('地下') != -1) { + image = '/assets/images/dixia.png' + } else if (item.buildingTypes[0].name.indexOf('古建筑') != -1) { + image = '/assets/images/gujianzhu.png' + } else if (item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1) { + image = '/assets/images/guidaojiaotong.png' + } else if (item.buildingTypes[0].name.indexOf('商场' || '超市') != -1) { + image = '/assets/images/shangchangchaoshi.png' + } else if (item.buildingTypes[0].name.indexOf('隧道') != -1) { + image = '/assets/images/suidao.png' + } else if (item.buildingTypes[0].name.indexOf('危化品') != -1) { + image = '/assets/images/weihuapin.png' + } else if (item.buildingTypes[0].name.indexOf('学校' || '教育') != -1) { + image = '/assets/images/xuexiao.png' + } else if (item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1) { + image = '/assets/images/yiyuan.png' + } else if (item.buildingTypes[0].name.indexOf('影' || '剧') != -1) { + image = '/assets/images/yingjuyuan.png' + } else if (item.buildingTypes[0].name.indexOf('娱乐') != -1) { + image = '/assets/images/yule.png' + } else if (item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1) { + image = '/assets/images/zhanlanjianzhu.png' + } else { + image = '/assets/images/qita.png' } - }) - this.createUnitMarker(data.items) + // 用于点集合的数组 + unitMarkerArrcluster.push({ + lnglat: [item.location.x, item.location.y], + image: image, + data: item + }) }) - }else{ - let paramsdata:any = { - PageSize:99999, - Lon : this.selectedUnit.location.x, - Lat : this.selectedUnit.location.y, - Distance : Distance, - BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123'] + + var gridSize = 60 + var count = unitMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); + var div = document.createElement('div'); + var Hue = 180 - factor * 180; + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); } - this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => { - data.items.forEach((i,index) => { - if(i.id == this.selectedUnit.id){ - data.items.splice(index,1) + this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + this.unitCluster.on('click', (e) => { + if (e.clusterData.length == 1) { + let item = e.clusterData[0].data + let markerContent = + `
+
${item.name}
+
+
单位性质:
+
消防负责人:
+
+
+
防火级别:
+
消防管理人:
+
+
+
防火管辖:
+
防火监督员:
+
+
+
责任队站:
+
总建筑面积:
+
+
+
建筑信息分类:
+
总占地面积:
+
+
+
值班电话:
+
+
+
基本信息
+
导航
+
全景漫游
+
三维场景
+
查看预案
+
分享
+
+
` + // 创建一个自定义内容的 infowindow 实例 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [item.location.x, item.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, + }); + this.infoWindow.open(this.map); + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件 + } + },this) + + + } + //取消显示单位 + resetUnit() { + this.keyUnitForm.reset() + this.keyUnitForm.controls.areaUnit.setValue('-1') + this.map.remove(this.circle) + this.unitCluster ? this.unitCluster.setData([]) : null + } + + + //消防力量提交 + fireForceSubmit(value) { + if (this.markers.length == 0) { + let paramsdata: any = { + PageSize: 99999, + Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 } - }) - this.createUnitMarker(data.items) + this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => { + this.createFireForceMarker(data) + }) + } else { + this.circleoffireForce.setRadius(Number(this.fireForceAreaDefault)) + this.circleoffireForce.setCenter(this.markers[0]._position) + this.circleoffireForce.setMap(this.map) + let Distance + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + if (this.fireForceAreaDefault == '0') { + this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) + Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) + } else { + Distance = Math.abs(lnglat.offset(0, this.fireForceAreaDefault).lat - this.selectedUnit.location.y) + } + if (this.fireForceAreaDefault == '-1') {//如果勾选全部 + let paramsdata: any = { + PageSize: 99999, + Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 + } + this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => { + this.createFireForceMarker(data) + }) + } else { + let paramsdata: any = { + PageSize: 99999, + Lon: this.selectedUnit.location.x, + Lat: this.selectedUnit.location.y, + Distance: Distance, + Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 + } + this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => { + this.createFireForceMarker(data) + }) + } + } + } + //创建消防力量markers + fireForceCluster: any //消防力量点聚合实例 + createFireForceMarker(list) { + let fireForceMarkerArrcluster = [] + this.fireForceCluster ? this.fireForceCluster.setData([]) : null + list.forEach((item) => { + let image + if (item.forceType == 2) { + image = '/assets/fireForcesMarkers/qita.png' + } else if (item.level == 0) { + image = '/assets/fireForcesMarkers/zongdui.png' + } else if (item.level == 1) { + image = '/assets/fireForcesMarkers/zhidui.png' + } else if (item.level == 2) { + image = '/assets/fireForcesMarkers/dadui.png' + } else if (item.level == 3) { + image = '/assets/fireForcesMarkers/zhongdui.png' + } + // 用于点集合的数组 + item.fireForceDetailInfo.location ? + fireForceMarkerArrcluster.push({ + lnglat: [item.fireForceDetailInfo.location.x, item.fireForceDetailInfo.location.y], + image: image, + data: item + }) : null }) - } - } - } - //创建单位markers - unitCluster:any //重点单位点聚合实例 - createUnitMarker(list){ - let unitMarkerArrcluster = [] - this.unitCluster ? this.unitCluster.setData([]) : null - list.forEach((item) => { - let image - if(item.buildingTypes[0].name.indexOf('高层') != -1){ - image = '/assets/images/Highbuilding.png' - }else if(item.buildingTypes[0].name.indexOf('化工') != -1){ - image = '/assets/images/Chemicalindustry.png' - }else if(item.buildingTypes[0].name.indexOf('餐饮') != -1){ - image = '/assets/images/canyin.png' - }else if(item.buildingTypes[0].name.indexOf('厂房') != -1){ - image = '/assets/images/changfang.png' - }else if(item.buildingTypes[0].name.indexOf('储罐') != -1){ - image = '/assets/images/chuguanlei.png' - }else if(item.buildingTypes[0].name.indexOf('地下') != -1){ - image = '/assets/images/dixia.png' - }else if(item.buildingTypes[0].name.indexOf('古建筑') != -1){ - image = '/assets/images/gujianzhu.png' - }else if(item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1){ - image = '/assets/images/guidaojiaotong.png' - }else if(item.buildingTypes[0].name.indexOf('商场' || '超市') != -1){ - image = '/assets/images/shangchangchaoshi.png' - }else if(item.buildingTypes[0].name.indexOf('隧道') != -1){ - image = '/assets/images/suidao.png' - }else if(item.buildingTypes[0].name.indexOf('危化品') != -1){ - image = '/assets/images/weihuapin.png' - }else if(item.buildingTypes[0].name.indexOf('学校' || '教育') != -1){ - image = '/assets/images/xuexiao.png' - }else if(item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1){ - image = '/assets/images/yiyuan.png' - }else if(item.buildingTypes[0].name.indexOf('影' || '剧') != -1){ - image = '/assets/images/yingjuyuan.png' - }else if(item.buildingTypes[0].name.indexOf('娱乐') != -1){ - image = '/assets/images/yule.png' - }else if(item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1){ - image = '/assets/images/zhanlanjianzhu.png' - }else{ - image = '/assets/images/qita.png' - } - // 用于点集合的数组 - unitMarkerArrcluster.push({ - lnglat : [item.location.x,item.location.y], - image : image, - data : item - }) - }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = unitMarkerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); - var div = document.createElement('div'); - var Hue = 180 - factor * 180; - var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; - var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; - var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; - var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; - div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); - div.style.width = div.style.height = size + 'px'; - div.style.border = 'solid 1px ' + borderColor; - div.style.borderRadius = size / 2 + 'px'; - div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.unitCluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let item = e.clusterData[0].data - let markerContent = - `
-
${item.name}
-
-
单位性质:
-
消防负责人:
-
-
-
防火级别:
-
消防管理人:
-
-
-
防火管辖:
-
防火监督员:
-
-
-
责任队站:
-
总建筑面积:
-
-
-
建筑信息分类:
-
总占地面积:
-
-
-
值班电话:
-
-
-
基本信息
-
导航
-
全景漫游
-
三维场景
-
查看预案
-
分享
-
-
` - // 创建一个自定义内容的 infowindow 实例 - this.infoWindow = new AMap.InfoWindow({ - position: [item.location.x,item.location.y], - offset: new AMap.Pixel(0, -30), - content: markerContent, - }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(item) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(item) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(item) })//全景漫游点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(item) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(item) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(item) })//分享点击事件 + + var gridSize = 60 + var count = fireForceMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); + var div = document.createElement('div'); + var Hue = 180 - factor * 180; + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); } - }) - }); - - } - //取消显示单位 - resetUnit(){ - this.keyUnitForm.reset() - this.keyUnitForm.controls.areaUnit.setValue('-1') - this.map.remove(this.circle) - this.unitCluster.setData([]) - } - - - //消防力量提交 - fireForceSubmit(value){ - if(this.markers.length == 0){ - let paramsdata:any = { - PageSize:99999, - Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 - } - this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => { - this.createFireForceMarker(data) - }) - }else{ - this.circleoffireForce.setRadius(Number(this.fireForceAreaDefault)) - this.circleoffireForce.setCenter(this.markers[0]._position) - this.circleoffireForce.setMap(this.map) - let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 - if(this.fireForceAreaDefault == '0'){ - this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds())/2) - Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) - }else{ - Distance = Math.abs(lnglat.offset(0, this.fireForceAreaDefault).lat - this.selectedUnit.location.y) - } - if(this.fireForceAreaDefault == '-1'){//如果勾选全部 - let paramsdata:any = { - PageSize:99999, - Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 + this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + + } + //取消消防力量 + resetFireForce() { + this.fireForceForm.reset() + this.fireForceForm.controls.areaFireForce.setValue('-1') + this.map.remove(this.circleoffireForce) + this.fireForceCluster ? this.fireForceCluster.setData([]) : null + } + + + + + //联动力量提交 + linkageForcesSubmit(value) { + console.log(this.selectedLinkageForcesList) + if (this.markers.length == 0) { + let paramsdata: any = { + PageSize: 999999, + LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 + } + this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => { + console.log(data) + this.createLinkageForcesMarker(data.items) + }) + } else { + this.circleoflinkageForces.setRadius(Number(this.linkageForcesAreaDefault)) + this.circleoflinkageForces.setCenter(this.markers[0]._position) + this.circleoflinkageForces.setMap(this.map) + let Distance + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + if (this.linkageForcesAreaDefault == '0') { + this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) + Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) + } else { + Distance = Math.abs(lnglat.offset(0, this.linkageForcesAreaDefault).lat - this.selectedUnit.location.y) + } + if (this.linkageForcesAreaDefault == '-1') {//如果勾选全部 + let paramsdata: any = { + PageSize: 999999, + LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 + } + this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => { + this.createLinkageForcesMarker(data.items) + }) + } else { + let paramsdata: any = { + PageSize: 99999, + Lon: this.selectedUnit.location.x, + Lat: this.selectedUnit.location.y, + Distance: Distance, + LinkageForceTypes: this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 + } + this.http.get("/api/LinkageForces", { params: paramsdata }).subscribe((data: any) => { + this.createLinkageForcesMarker(data.items) + }) + } } - this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => { - this.createFireForceMarker(data) + } + //创建联动力量markers + linkageForcesCluster: any //联动力量点聚合实例 + createLinkageForcesMarker(list) { + let linkageForcesMarkerArrcluster = [] + this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null + list.forEach((item) => { + let image + if (item.linkageForceType == 0) {//消火栓 + image = '/assets/linkageForcesMarkers/anjian.png' + } else if (item.linkageForceType == 1) {//消防水池 + image = '/assets/linkageForcesMarkers/dianliju.png' + } else if (item.linkageForceType == 2) {//天然联动力量 + image = '/assets/linkageForcesMarkers/gongan.png' + } else if (item.linkageForceType == 3) {//天然水源 + image = '/assets/linkageForcesMarkers/haishi.png' + } else if (item.linkageForceType == 4) {//天然水源 + image = '/assets/linkageForcesMarkers/huanbaoju.png' + } else if (item.linkageForceType == 5) {//天然水源 + image = '/assets/linkageForcesMarkers/jiaotong.png' + } else if (item.linkageForceType == 6) {//天然水源 + image = '/assets/linkageForcesMarkers/minzheng.png' + } else if (item.linkageForceType == 7) {//天然水源 + image = '/assets/linkageForcesMarkers/qixiangju.png' + } else if (item.linkageForceType == 8) {//天然水源 + image = '/assets/linkageForcesMarkers/ranqiju.png' + } else if (item.linkageForceType == 9) {//天然水源 + image = '/assets/linkageForcesMarkers/shizheng.png' + } else if (item.linkageForceType == 10) {//天然水源 + image = '/assets/linkageForcesMarkers/shuili.png' + } else if (item.linkageForceType == 11) {//天然水源 + image = '/assets/linkageForcesMarkers/tongxin.png' + } else if (item.linkageForceType == 12) {//天然水源 + image = '/assets/linkageForcesMarkers/yiliao.png' + } else if (item.linkageForceType == 13) {//天然水源 + image = '/assets/linkageForcesMarkers/yingjiguanli.png' + } else if (item.linkageForceType == 14) {//天然水源 + image = '/assets/linkageForcesMarkers/zhujian.png' + } + // 用于点集合的数组 + if (item.location && item.location.x) { + linkageForcesMarkerArrcluster.push({ + lnglat: [item.location.x, item.location.y], + image: image, + data: item + }) + } + // 用于点集合的数组 }) - }else{ - let paramsdata:any = { - PageSize:99999, - Lon : this.selectedUnit.location.x, - Lat : this.selectedUnit.location.y, - Distance : Distance, - Levels : this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 + + var gridSize = 60 + var count = linkageForcesMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); + var div = document.createElement('div'); + var Hue = 180 - factor * 180; + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); } - this.http.get("/api/CustomFireForce",{params:paramsdata}).subscribe((data:any) => { - this.createFireForceMarker(data) - }) - } - } - } - //创建消防力量markers - fireForceCluster:any //消防力量点聚合实例 - createFireForceMarker(list){ - let fireForceMarkerArrcluster = [] - this.fireForceCluster ? this.fireForceCluster.setData([]) : null - list.forEach((item) => { - let image - if(item.forceType == 2){ - image = '/assets/fireForcesMarkers/qita.png' - }else if(item.level == 0){ - image = '/assets/fireForcesMarkers/zongdui.png' - }else if(item.level == 1){ - image = '/assets/fireForcesMarkers/zhidui.png' - }else if(item.level == 2){ - image = '/assets/fireForcesMarkers/dadui.png' - }else if(item.level == 3){ - image = '/assets/fireForcesMarkers/zhongdui.png' - } - // 用于点集合的数组 - item.fireForceDetailInfo.location ? - fireForceMarkerArrcluster.push({ - lnglat : [item.fireForceDetailInfo.location.x,item.fireForceDetailInfo.location.y], - image : image, - data : item - }) : null - }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = fireForceMarkerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); - var div = document.createElement('div'); - var Hue = 180 - factor * 180; - var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; - var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; - var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; - var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; - div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); - div.style.width = div.style.height = size + 'px'; - div.style.border = 'solid 1px ' + borderColor; - div.style.borderRadius = size / 2 + 'px'; - div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - }); - } - //取消消防力量 - resetFireForce(){ - this.fireForceForm.reset() - this.fireForceForm.controls.areaFireForce.setValue('-1') - this.map.remove(this.circleoffireForce) - this.fireForceCluster.setData([]) - } - - - - - //联动力量提交 - linkageForcesSubmit(value){ - console.log(this.selectedLinkageForcesList) - if(this.markers.length == 0){ - let paramsdata:any = { - PageSize : 999999, - LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 - } - this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => { - console.log(data) - this.createLinkageForcesMarker(data.items) - }) - }else{ - this.circleoflinkageForces.setRadius(Number(this.linkageForcesAreaDefault)) - this.circleoflinkageForces.setCenter(this.markers[0]._position) - this.circleoflinkageForces.setMap(this.map) - let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 - if(this.linkageForcesAreaDefault == '0'){ - this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds())/2) - Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) - }else{ - Distance = Math.abs(lnglat.offset(0, this.linkageForcesAreaDefault).lat - this.selectedUnit.location.y) - } - if(this.linkageForcesAreaDefault == '-1'){//如果勾选全部 - let paramsdata:any = { - PageSize : 999999, - LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 + + this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + + } + //取消联动力量 + resetLinkageForces() { + this.linkageForcesForm.reset() + this.linkageForcesForm.controls.areaLinkageForces.setValue('-1') + this.map.remove(this.circleoflinkageForces) + this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null + } + + + + + + //水源提交 + waterSubmit(value) { + if (this.markers.length == 0) { + if (this.selectedWaterList.length != 0) {//勾选了水源类型 + let paramsdata: any = { + PageSize: 99999, + WaterSourceTypes: this.selectedWaterList + } + this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => { + this.createwaterMarker(data.items) + }) + } else { + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请勾选想要显示的水源类型', '确定', config); + } + } else { + this.circleofwater.setRadius(Number(this.waterAreaDefault)) + this.circleofwater.setCenter(this.markers[0]._position) + this.circleofwater.setMap(this.map) + let Distance + let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 + + //如果选择当前的视野范围算出查询半径 + if (this.waterAreaDefault == '0') { + this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) + Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) + } else { + Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y) + } + //如果选择全部 + if (this.waterAreaDefault == '-1') { + if (this.selectedWaterList.length != 0) { + let paramsdata: any = { + PageSize: 99999, + WaterSourceTypes: this.selectedWaterList + } + this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => { + this.createwaterMarker(data.items) + }) + } else { + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请勾选想要显示的水源类型', '确定', config); + } + + } else { + if (this.selectedWaterList.length != 0) { + let paramsdata: any = { + PageSize: 99999, + Lon: this.selectedUnit.location.x, + Lat: this.selectedUnit.location.y, + Distance: Distance, + WaterSourceTypes: this.selectedWaterList + } + this.http.get("/api/WaterSources", { params: paramsdata }).subscribe((data: any) => { + this.createwaterMarker(data.items) + }) + } else { + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请勾选想要显示的水源类型', '确定', config); + } + } } - this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => { - this.createLinkageForcesMarker(data.items) + } + //循环渲染出所有水源markers + waterCluster: any //水源聚合实例 + createwaterMarker(list) { + let waterMarkerArrcluster = [] + this.waterCluster ? this.waterCluster.setData([]) : null + list.forEach((item) => { + let image + if (item.waterSourceType == 0) {//消火栓 + image = '/assets/waterMarkers/szxhs.png' + } else if (item.waterSourceType == 1) {//消防水池 + image = '/assets/waterMarkers/fxcsc.png' + } else if (item.waterSourceType == 2) {//天然水源 + image = '/assets/waterMarkers/trsy.png' + } + // 用于点集合的数组 + waterMarkerArrcluster.push({ + lnglat: [item.location.x, item.location.y], + image: image, + data: item + }) }) - }else{ - let paramsdata:any = { - PageSize:99999, - Lon : this.selectedUnit.location.x, - Lat : this.selectedUnit.location.y, - Distance : Distance, - LinkageForceTypes:this.selectedLinkageForcesList.length != 0 ? this.selectedLinkageForcesList : -1 + + var gridSize = 60 + var count = waterMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); + var div = document.createElement('div'); + var Hue = 180 - factor * 180; + var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + div.style.backgroundColor = bgColor; + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + div.style.width = div.style.height = size + 'px'; + div.style.border = 'solid 1px ' + borderColor; + div.style.borderRadius = size / 2 + 'px'; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); } - this.http.get("/api/LinkageForces",{params:paramsdata}).subscribe((data:any) => { - this.createLinkageForcesMarker(data.items) - }) - } - } - } - //创建联动力量markers - linkageForcesCluster:any //联动力量点聚合实例 - createLinkageForcesMarker(list){ - let linkageForcesMarkerArrcluster = [] - this.linkageForcesCluster ? this.linkageForcesCluster.setData([]) : null - list.forEach((item) => { - let image - if(item.linkageForceType == 0){//消火栓 - image = '/assets/linkageForcesMarkers/anjian.png' - }else if(item.linkageForceType == 1){//消防水池 - image = '/assets/linkageForcesMarkers/dianliju.png' - }else if(item.linkageForceType == 2){//天然联动力量 - image = '/assets/linkageForcesMarkers/gongan.png' - }else if(item.linkageForceType == 3){//天然水源 - image = '/assets/linkageForcesMarkers/haishi.png' - }else if(item.linkageForceType == 4){//天然水源 - image = '/assets/linkageForcesMarkers/huanbaoju.png' - }else if(item.linkageForceType == 5){//天然水源 - image = '/assets/linkageForcesMarkers/jiaotong.png' - }else if(item.linkageForceType == 6){//天然水源 - image = '/assets/linkageForcesMarkers/minzheng.png' - }else if(item.linkageForceType == 7){//天然水源 - image = '/assets/linkageForcesMarkers/qixiangju.png' - }else if(item.linkageForceType == 8){//天然水源 - image = '/assets/linkageForcesMarkers/ranqiju.png' - }else if(item.linkageForceType == 9){//天然水源 - image = '/assets/linkageForcesMarkers/shizheng.png' - }else if(item.linkageForceType == 10){//天然水源 - image = '/assets/linkageForcesMarkers/shuili.png' - }else if(item.linkageForceType == 11){//天然水源 - image = '/assets/linkageForcesMarkers/tongxin.png' - }else if(item.linkageForceType == 12){//天然水源 - image = '/assets/linkageForcesMarkers/yiliao.png' - }else if(item.linkageForceType == 13){//天然水源 - image = '/assets/linkageForcesMarkers/yingjiguanli.png' - }else if(item.linkageForceType == 14){//天然水源 - image = '/assets/linkageForcesMarkers/zhujian.png' - } - // 用于点集合的数组 - if(item.location && item.location.x){ - linkageForcesMarkerArrcluster.push({ - lnglat : [item.location.x,item.location.y], - image : image, - data : item - }) - } - // 用于点集合的数组 - }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = linkageForcesMarkerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); - var div = document.createElement('div'); - var Hue = 180 - factor * 180; - var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; - var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; - var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; - var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; - div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); - div.style.width = div.style.height = size + 'px'; - div.style.border = 'solid 1px ' + borderColor; - div.style.borderRadius = size / 2 + 'px'; - div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.linkageForcesCluster = new AMap.MarkerCluster(this.map, linkageForcesMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - }); - } - //取消联动力量 - resetLinkageForces(){ - this.linkageForcesForm.reset() - this.linkageForcesForm.controls.areaLinkageForces.setValue('-1') - this.map.remove(this.circleoflinkageForces) - this.linkageForcesCluster.setData([]) - } - - - - - - //水源提交 - waterSubmit(value){ - if(this.markers.length == 0){ - if(this.selectedWaterList.length != 0){//勾选了水源类型 - let paramsdata:any = { - PageSize:99999, - WaterSourceTypes : this.selectedWaterList + + // var _renderClusterMarker = function (context) { + // var factor = Math.pow(context.count / count, 1 / 18); + // var div = document.createElement('div'); + // var Hue = 180 - factor * 180; + // var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; + // var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; + // var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; + // var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; + // div.style.backgroundColor = bgColor; + // var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + // div.style.width = div.style.height = size + 'px'; + // div.style.border = 'solid 1px ' + borderColor; + // div.style.borderRadius = size / 2 + 'px'; + // div.style.boxShadow = '0 0 5px ' + shadowColor; + // div.innerHTML = context.count; + // div.style.lineHeight = size + 'px'; + // div.style.color = fontColor; + // div.style.fontSize = '14px'; + // div.style.textAlign = 'center'; + // context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); + // context.marker.setContent(div) + // }; + // var _renderMarker = (context) => { + // var content = ``; + // var offset = MapFactory.PixelInstance(-15, -15); + // context.marker.setContent(content) + // context.marker.setOffset(offset) + // } + this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + + // this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { + // gridSize: gridSize, // 设置网格像素大小 + // renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 + // renderMarker: _renderMarker, // 自定义非聚合点样式 + // }); + this.waterCluster.on('click', (e) => { + if (e.clusterData.length == 1) { + + } + },this) + + } + //取消显示水源 + resetWater() { + this.watertForm.reset() + this.watertForm.controls.areaWater.setValue('-1') + this.map.remove(this.circleofwater) + this.waterCluster ? this.waterCluster.setData([]) : null + } + + + //计算两地距离 + Calculationofdistance(bounds) { + let p1 = [bounds.northEast.lng, bounds.northEast.lat]; + let p2 = [bounds.northEast.lng, bounds.southWest.lat]; + // 返回 p1 到 p2 间的地面距离,单位:米 + return this.map.distance(p1, p2); + } + + //全选重点单位 + selectedAllUnit(event) { + if (event.checked) { + this.units.controls.forEach(item => { item.setValue(true) }) + } else { + this.keyUnitForm.reset() + this.keyUnitForm.controls.areaUnit.setValue('0') } - this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => { - this.createwaterMarker(data.items) - }) - }else{ - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请勾选想要显示的水源类型','确定',config); - } - }else{ - this.circleofwater.setRadius(Number(this.waterAreaDefault)) - this.circleofwater.setCenter(this.markers[0]._position) - this.circleofwater.setMap(this.map) - let Distance - let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 - - //如果选择当前的视野范围算出查询半径 - if(this.waterAreaDefault == '0'){ - this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2) - Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y) - }else{ - Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y) - } - //如果选择全部 - if(this.waterAreaDefault == '-1'){ - if(this.selectedWaterList.length != 0){ - let paramsdata:any = { - PageSize:99999, - WaterSourceTypes : this.selectedWaterList - } - this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => { - this.createwaterMarker(data.items) - }) - }else{ - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请勾选想要显示的水源类型','确定',config); + } + //全选水源 + selectedAllWater(event) { + if (event.checked) { + this.waters.controls.forEach(item => { item.setValue(true) }) + } else { + this.watertForm.reset() + this.watertForm.controls.areaWater.setValue('0') } - - }else{ - if(this.selectedWaterList.length != 0){ - let paramsdata:any = { - PageSize:99999, - Lon : this.selectedUnit.location.x, - Lat : this.selectedUnit.location.y, - Distance : Distance, - WaterSourceTypes :this.selectedWaterList - } - this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => { - this.createwaterMarker(data.items) - }) - }else{ - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请勾选想要显示的水源类型','确定',config); + } + //全选消防力量 + selectedAllFireForce(event) { + if (event.checked) { + this.fireForce.controls.forEach(item => { item.setValue(true) }) + } else { + this.fireForceForm.reset() + this.fireForceForm.controls.areaFireForce.setValue('0') } - } - } - } - //循环渲染出所有水源markers - waterCluster:any //水源聚合实例 - createwaterMarker(list){ - let waterMarkerArrcluster = [] - this.waterCluster ? this.waterCluster.setData([]) : null - list.forEach((item) => { - let image - if(item.waterSourceType == 0){//消火栓 - image = '/assets/waterMarkers/szxhs.png' - }else if(item.waterSourceType == 1){//消防水池 - image = '/assets/waterMarkers/fxcsc.png' - }else if(item.waterSourceType == 2){//天然水源 - image = '/assets/waterMarkers/trsy.png' - } - // 用于点集合的数组 - waterMarkerArrcluster.push({ - lnglat : [item.location.x,item.location.y], - image : image, - data : item - }) - }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = waterMarkerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); - var div = document.createElement('div'); - var Hue = 180 - factor * 180; - var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; - var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; - var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; - var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; - div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); - div.style.width = div.style.height = size + 'px'; - div.style.border = 'solid 1px ' + borderColor; - div.style.borderRadius = size / 2 + 'px'; - div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context)=> { - var content = ``; - var offset = new AMap.Pixel(-15, -15); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.waterCluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - + } + //全选联动力量 + selectedAllLinkageForces(event) { + if (event.checked) { + this.linkageForces.controls.forEach(item => { item.setValue(true) }) + } else { + this.linkageForcesForm.reset() + this.linkageForcesForm.controls.areaLinkageForces.setValue('0') } - }) - }); - - } - //取消显示水源 - resetWater(){ - this.watertForm.reset() - this.watertForm.controls.areaWater.setValue('-1') - this.map.remove(this.circleofwater) - this.waterCluster.setData([]) - } - - - //计算两地距离 - Calculationofdistance(bounds){ - let p1 = [bounds.northEast.lng, bounds.northEast.lat]; - let p2 = [bounds.northEast.lng, bounds.southWest.lat]; - // 返回 p1 到 p2 间的地面距离,单位:米 - let dis = AMap.GeometryUtil.distance(p1, p2); - return dis - } - - //全选重点单位 - selectedAllUnit(event){ - if(event.checked){ - this.units.controls.forEach(item => {item.setValue(true)}) - }else{ - this.keyUnitForm.reset() - this.keyUnitForm.controls.areaUnit.setValue('0') - } - } - //全选水源 - selectedAllWater(event){ - if(event.checked){ - this.waters.controls.forEach(item => {item.setValue(true)}) - }else{ - this.watertForm.reset() - this.watertForm.controls.areaWater.setValue('0') - } - } - //全选消防力量 - selectedAllFireForce(event){ - if(event.checked){ - this.fireForce.controls.forEach(item => {item.setValue(true)}) - }else{ - this.fireForceForm.reset() - this.fireForceForm.controls.areaFireForce.setValue('0') - } - } - //全选联动力量 - selectedAllLinkageForces(event){ - if(event.checked){ - this.linkageForces.controls.forEach(item => {item.setValue(true)}) - }else{ - this.linkageForcesForm.reset() - this.linkageForcesForm.controls.areaLinkageForces.setValue('0') - } - } - - - - - //右上角点击每一个title - clickTitle(index){ - this.selectedTitle = index - } - closertdiv(){ - this.selectedTitle = null - } - - //卫星图层 - satelliteLayer = new AMap.TileLayer.Satellite(); - satelliteModel:boolean = false - satelliteChange(e){ - e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer); - } - - //路网图层 - roadNetLayer = new AMap.TileLayer.RoadNet(); - loadModel:boolean = false - loadChange(e){ - e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer); - } - - @ViewChild( 'appLeft',{static: false} ) appLeft:any //子组件 - leftDivState:boolean = false; //左侧工作区显示隐藏 - showLeftDiv:boolean = false//左侧工作区消失 - - //左侧工作区显示隐藏 - toggleLeft (e) { - this.leftDivState = e - } - - //左侧工作区关闭 - closeDiv(){ - this.leftDivState = false - this.showLeftDiv = false - } - - map:any //地图 - markers:any = []; //markers标注 - - //地图2D 3D切换 - mapPattern:boolean = true//默认是2D - mapPatternChange(type){ - this.unitCluster = null - this.waterCluster = null - this.checkRadio = false - if(type == '2D'){ - this.mapPattern = true - this.mapInit() - }else{ - this.unitCluster ? this.unitCluster.setData([]) : null - this.mapPattern = false - this.map = new AMap.Map('map',{ - viewMode: '3D', - pitch: 60, - rotation: -35, - features: ['bg', 'road', 'point','building'], - mapStyle: 'amap://styles/light', - }); - this.map.setCity('上海市'); - } - this.satelliteModel = false - this.loadModel = false - } - - //地图初始化 - mapInit () { - let that = this - var layer = new AMap.createDefaultLayer({ - zooms:[3,20], //可见级别 - visible:true, //是否可见 - opacity:1, //透明度 - zIndex:0, //叠加层级 - resizeEnable: true //是否监控地图容器尺寸变化, - }) - that.map = new AMap.Map('map',{ - layers:[layer], //当只想显示标准图层时layers属性可缺省, - WebGLParams: { - preserveDrawingBuffer: true - } - }); - - that.map.setCity('上海市'); - AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () { - that.mouseTool=new AMap.MouseTool(that.map); - }); - - } - - searchText:string; //搜索单位名称 - allCompany = []; //搜索到 匹配的单位 - - measureDistance; //测距离 - distanceList = []; //测距离 点和线 - measureArea; //测面积 - mouseTool;//二合一测距和侧面积 - checkRadio=false //判断测距和侧面积是否选中 - - //测距离 开始 - startDistance(){ - this.measureArea.close(false) - this.measureDistance.turnOn() - } - - //侧面积 开始 - startArea(){ - this.measureDistance.turnOff() - this.measureArea.measureArea({ - strokeColor:'#80d8ff', - fillColor:'#80d8ff', - fillOpacity:0.3 - //同 Polygon 的 Option 设置 - }); - } - - //清空距离测量 - clearDistance(){ - this.distanceList.forEach(item=>{ - if (item.className == 'AMap.Marker') { - let parent = item.dom.parentNode - let children = item.dom.nextElementSibling - parent && children? parent.removeChild(item.dom.nextElementSibling) : null - this.map.remove(item) - } else { - this.map.remove(item) - } - }) - this.distanceList = [] //清空数组 - } - - //清空面积测量 - clearArea(){ - this.measureArea.close(true) - } - //合并测距和侧面积 - measure(type){ - switch(type){ - case 'rule':{ - this.mouseTool.rule({ - startMarkerOptions : {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize:new AMap.Size(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" - }) - }, - endMarkerOptions : {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize:new AMap.Size(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" - }), - offset: new AMap.Pixel(-9, -31) - }, - midMarkerOptions : {//可缺省 - icon: new AMap.Icon({ - size: new AMap.Size(19, 31),//图标大小 - imageSize:new AMap.Size(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" - }), - offset: new AMap.Pixel(-9, -31) - }, - lineOptions : {//可缺省 - strokeStyle: "solid", - strokeColor: "#FF33FF", - strokeOpacity: 1, - strokeWeight: 2 - } - //同 RangingTool 的 自定义 设置,缺省为默认样式 - }); - break; - } - case 'measureArea':{ - this.mouseTool.measureArea({ - strokeColor:'#80d8ff', - fillColor:'#80d8ff', - fillOpacity:0.3 + } + + + + + //右上角点击每一个title + clickTitle(index) { + this.selectedTitle = index + } + closertdiv() { + this.selectedTitle = null + } + + //卫星图层 + satelliteLayer = MapFactory.TileLayerInstance().Satellite(); + satelliteModel: boolean = false + satelliteChange(e) { + e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer); + } + + //路网图层 + roadNetLayer = MapFactory.TileLayerInstance().RoadNet(); + loadModel: boolean = false + loadChange(e) { + e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer); + } + + @ViewChild('appLeft', { static: false }) appLeft: any //子组件 + leftDivState: boolean = false; //左侧工作区显示隐藏 + showLeftDiv: boolean = false//左侧工作区消失 + + //左侧工作区显示隐藏 + toggleLeft(e) { + this.leftDivState = e + } + + //左侧工作区关闭 + closeDiv() { + this.leftDivState = false + this.showLeftDiv = false + } + + map: IMap //地图 + markers: any = []; //markers标注 + + //地图2D 3D切换 + mapPattern: boolean = true//默认是2D + mapPatternChange(type) { + this.unitCluster = null + this.waterCluster = null + this.checkRadio = false + if (type == '2D') { + this.mapPattern = true + this.mapInit() + } else { + this.unitCluster ? this.unitCluster.setData([]) : null + this.mapPattern = false + this.map = MapFactory.MapInstance('map', { + viewMode: '3D', + pitch: 60, + rotation: -35, + features: ['bg', 'road', 'point', 'building'], + mapStyle: 'amap://styles/light', + }); + this.map.setCity('上海市'); + } + this.satelliteModel = false + this.loadModel = false + } + + //地图初始化 + mapInit() { + let that = this + var layer = MapFactory.LayerInstance({ + zooms: [3, 20], //可见级别 + visible: true, //是否可见 + opacity: 1, //透明度 + zIndex: 0, //叠加层级 + resizeEnable: true //是否监控地图容器尺寸变化, + }) + that.map = MapFactory.MapInstance('map', { + layers: [layer], + WebGLParams: {preserveDrawingBuffer: true} + }); + that.map.setCity('上海市'); + that.mouseTool = MapFactory.MouseToolInstance(that.map); + + } + + searchText: string; //搜索单位名称 + allCompany = []; //搜索到 匹配的单位 + + measureDistance; //测距离 + distanceList = []; //测距离 点和线 + measureArea; //测面积 + mouseTool:IMouseTool;//二合一测距和侧面积 + checkRadio = false //判断测距和侧面积是否选中 + + //测距离 开始 + startDistance() { + this.measureArea.close(false) + this.measureDistance.turnOn() + } + + //侧面积 开始 + startArea() { + this.measureDistance.turnOff() + this.measureArea.measureArea({ + strokeColor: '#80d8ff', + fillColor: '#80d8ff', + fillOpacity: 0.3 //同 Polygon 的 Option 设置 - }); - break; - } - } - } - //合并清空 - clearnAll(){ - this.mouseTool.close(true) - this.checkRadio=false - } - - //搜索 - search () { - this.allCompany = [] - let paramsdata:any = {Name: this.searchText || ''} - this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any)=>{ - this.allCompany = data.items - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open(`搜索目标结果为${data.items.length}个`,'确定',config); - }) - } - - //清除 - clear () { - this.allCompany = [] - this.searchText = '' - this.markers ? this.markers.forEach((element,index) => { this.map.remove(element);}) : null - this.infoWindow ? this.map.remove(this.infoWindow) : null - } - - selectedUnit:any//当前打开的单位 - - //选择 单位 地图跳转 - //弹窗实例 - infoWindow:any - selectCompany (e) { - if (e.location && e.location.x && e.location.y) { - this.selectedUnit = e - this.markers.forEach((element,index) => { this.map.remove(element);}); //先删除所有标点 - this.markers = [] - - let marker = new AMap.Marker({ - map: this.map, - position: [e.location.x,e.location.y], // 基点位置, - }); - this.markers.push(marker) - - let markerContent = `
+ }); + } + + //清空距离测量 + clearDistance() { + + } + + //清空面积测量 + clearArea() { + this.measureArea.close(true) + } + //合并测距和侧面积 + measure(type) { + switch (type) { + case 'rule': { + this.mouseTool.rule({ + startMarkerOptions: {//可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" + }) + }, + endMarkerOptions: {//可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" + }), + offset: MapFactory.PixelInstance(-9, -31) + }, + midMarkerOptions: {//可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31),//图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" + }), + offset: MapFactory.PixelInstance(-9, -31) + }, + lineOptions: {//可缺省 + strokeStyle: "solid", + strokeColor: "#FF33FF", + strokeOpacity: 1, + strokeWeight: 2 + } + //同 RangingTool 的 自定义 设置,缺省为默认样式 + }); + break; + } + case 'measureArea': { + this.mouseTool.measureArea({ + strokeColor: '#80d8ff', + fillColor: '#80d8ff', + fillOpacity: 0.3 + //同 Polygon 的 Option 设置 + }); + break; + } + } + } + //合并清空 + clearnAll() { + this.mouseTool.close(true) + this.checkRadio = false + } + + //搜索 + search() { + this.allCompany = [] + let paramsdata: any = { Name: this.searchText || '' } + this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { + this.allCompany = data.items + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open(`搜索目标结果为${data.items.length}个`, '确定', config); + }) + } + + //清除 + clear() { + this.allCompany = [] + this.searchText = '' + this.markers ? this.markers.forEach((element, index) => { this.map.remove(element); }) : null + this.infoWindow ? this.map.remove(this.infoWindow) : null + } + + selectedUnit: any//当前打开的单位 + + //选择 单位 地图跳转 + //弹窗实例 + infoWindow: any + selectCompany(e) { + if (e.location && e.location.x && e.location.y) { + this.selectedUnit = e + this.markers.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点 + this.markers = [] + + let marker = MapFactory.MarkerInstance({ + map: this.map, + position: [e.location.x, e.location.y], // 基点位置, + }); + this.markers.push(marker) + + let markerContent = `
${e.name}
-
单位性质:
+
单位性质:
消防负责人:
@@ -1179,252 +1219,251 @@ export class GisLabelingComponent implements OnInit {
分享
` - // 创建一个自定义内容的 infowindow 实例 - this.infoWindow = new AMap.InfoWindow({ - position: [e.location.x,e.location.y], - offset: new AMap.Pixel(0, -30), - content: markerContent, - }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件 - marker.on('click', (ev) => { //marker点击事件 - this.infoWindow = new AMap.InfoWindow({ - position: [e.location.x,e.location.y], - offset: new AMap.Pixel(0, -30), - content: markerContent, + // 创建一个自定义内容的 infowindow 实例 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [e.location.x, e.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, + }); + this.infoWindow.open(this.map); + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 + marker.on('click', (ev) => { //marker点击事件 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [e.location.x, e.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, + }); + this.infoWindow.open(this.map); + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 + }) + this.map.setZoomAndCenter(13, [marker._position[0], marker._position[1] + 0.015]); //设置地图中心点 + this.allCompany = [] + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请完善单位地理位置', '确定', config); + } + } + + //基本信息 + baseInformation(e) { + this.leftDivState = true + this.showLeftDiv = true + this.appLeft.selectBaseInfo(e) //调用子组件方法 + } + + //导航 + route(e) { + this.leftDivState = false + this.showLeftDiv = false + this.isShowRouteGIS = true + this.routeEnd = e.name + this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y) + } + + //全景漫游 + fullViewNavigation(e) { + console.log(e, '全景漫游') + } + + //三维场景 + threeeScene(e) { + window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/') + } + + //查看预案 + seePlan(e) { + let data = e + let dialogRef = this.dialog.open(LookPlanDialog, {//调用open方法打开对话框并且携带参数过去 + width: '1400px', + height: '800px', + id: 'lookPlanDialog', + data }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件 - }) - this.map.setZoomAndCenter(13,[marker._position[0],marker._position[1]+0.015]); //设置地图中心点 - this.allCompany = [] - } else { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请完善单位地理位置','确定',config); - } - } - - //基本信息 - baseInformation (e) { - this.leftDivState = true - this.showLeftDiv = true - this.appLeft.selectBaseInfo(e) //调用子组件方法 - } - - //导航 - route (e) { - this.leftDivState = false - this.showLeftDiv = false - this.isShowRouteGIS = true - this.routeEnd = e.name - this.endCoordinate = new AMap.LngLat(e.location.x, e.location.y) - } - - //全景漫游 - fullViewNavigation (e) { - console.log(e,'全景漫游') - } - - //三维场景 - threeeScene (e) { - window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/') - } - - //查看预案 - seePlan (e) { - let data = e - let dialogRef = this.dialog.open(LookPlanDialog,{//调用open方法打开对话框并且携带参数过去 - width: '1400px', - height:'800px', - id:'lookPlanDialog', - data - }); - dialogRef.afterClosed().subscribe((data)=>{ - - }); - } - - //分享 - share (e) { - let data = { - url:'https://www.baidu.com/', - buildingType:e.buildingTypes[0].name, - address:e.address - } - let dialogRef = this.dialog.open(ShareUrlDialog,{//调用open方法打开对话框并且携带参数过去 - width: '540px', - height:'596px', - id:'shareDialog', - data}); - dialogRef.afterClosed().subscribe((data)=>{ - - }); - } - - //导航路线 - isShowRouteGIS:boolean = false; //导航路线 显隐 - routeStart:any; //起点 - routeStartList:any = [] //起点 搜索结果 - routeEnd:any; //终点 - routeEndList:any = [] //终点 搜索结果 - timeout:any; //延时器 - routeGIS:any; //查询结果 规划路线 - selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵 - - //关闭导航路线 - closeRouteGIS () { - this.isShowRouteGIS = false - } - - //输入框 输入事件 - routeChange (e) { - let that = this - window.clearTimeout(this.timeout) - this.timeout = window.setTimeout(()=>{ - - that.map.getCity( function(info){ //获取当前 city - AMap.plugin(['AMap.AutoComplete'], () =>{ - var autoOptions = {city: info.city} - let keywords - e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = new AMap.Autocomplete(autoOptions); - autoComplete.search(keywords, function(status, result) { - if (result && result.tips && result.tips.length) { //搜索到数据时 - that._ngZone.run(()=>{ - if(e == 0){//起点 - that.routeStartList = result.tips - if(result.tips.length != 0){ - for (let index = 0; index < result.tips.length; index++) { - const element = result.tips[index]; - if(element.location){ - that.startCoordinate = new AMap.LngLat(element.location.lng, element.location.lat) - return - } - } - } - }else{//终点 - that.routeEndList = result.tips - that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat) + dialogRef.afterClosed().subscribe((data) => { + + }); + } + + //分享 + share(e) { + let data = { + url: 'https://www.baidu.com/', + buildingType: e.buildingTypes[0].name, + address: e.address + } + let dialogRef = this.dialog.open(ShareUrlDialog, {//调用open方法打开对话框并且携带参数过去 + width: '540px', + height: '596px', + id: 'shareDialog', + data + }); + dialogRef.afterClosed().subscribe((data) => { + + }); + } + + //导航路线 + isShowRouteGIS: boolean = false; //导航路线 显隐 + routeStart: any; //起点 + routeStartList: any = [] //起点 搜索结果 + routeEnd: any; //终点 + routeEndList: any = [] //终点 搜索结果 + timeout: any; //延时器 + routeGIS: IDriving; //查询结果 规划路线 + selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵 + + //关闭导航路线 + closeRouteGIS() { + this.isShowRouteGIS = false + } + + //输入框 输入事件 + routeChange(e) { + let that = this + window.clearTimeout(this.timeout) + this.timeout = window.setTimeout(() => { + + that.map.getCity(function (info) { //获取当前 city + var autoOptions = { city: info.city } + let keywords + e == 0 ? keywords = that.routeStart : keywords = that.routeEnd + var autoComplete = MapFactory.AutocompleteInstance(autoOptions,that); + autoComplete.search(keywords, function (status, result) { + if (result && result.tips && result.tips.length) { //搜索到数据时 + that._ngZone.run(() => { + if (e == 0) {//起点 + that.routeStartList = result.tips + if (result.tips.length != 0) { + for (let index = 0; index < result.tips.length; index++) { + const element = result.tips[index]; + if (element.location) { + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) + return + } + } + } + } else {//终点 + that.routeEndList = result.tips + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) + } + }); + + } //if + }) + }); //获取当前 city + + }, 500) + } + + //清空导航输入框 + deleteSearchGIS(e) { + if (e == 0) { + this.routeStart = null + this.routeStartList = [] + this.startCoordinate = null + } else { + this.routeEnd = null + this.routeEndList = [] + this.endCoordinate = null + } + } + + //清除路线 + clearGISRoute() { + this.routeStart = null + this.routeStartList = [] + this.routeEnd = null + this.routeEndList = [] + this.startCoordinate = null + this.endCoordinate = null + this.routeGIS ? this.routeGIS.clear() : null + this.routes = { distance: 0, time: 0, steps: [], } + this.map.setZoomAndCenter(13, [this.selectedUnit.location.x, this.selectedUnit.location.y]); //设置地图中心点 + } + + //交换起始点 + exchangeGISRoute() { + let data = this.routeStart + this.routeStart = this.routeEnd + this.routeEnd = data + this.routeStartList = [] + this.routeEndList = [] + let data2 = this.startCoordinate + this.startCoordinate = this.endCoordinate + this.endCoordinate = data2 + } + + routes: any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 + + startCoordinate: any//开始坐标 + endCoordinate: any//结束坐标 + + //导航查询 + queryGISRoute() { + //构造路线导航类 + let that = this + this.selectType = true + this.routeGIS ? this.routeGIS.clear() : null + this.routeGIS = MapFactory.DrivingInstance({ + map: this.map, + }); + if (!this.startCoordinate) { + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('未查询到起点坐标信息,请输入有效地址', '确定', config); + return + } else if (!this.endCoordinate) { + let config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('未查询到终点坐标信息,请输入有效地址', '确定', config); + return + } else { + this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, + function (status, result) { + if (status === 'complete') { + that.routes = result.routes[0] + } else { alert('获取驾驶规划路线失败') } } - }); - - } //if - }) - }) - }); //获取当前 city - - },500) - } - - //清空导航输入框 - deleteSearchGIS (e) { - if (e==0) { - this.routeStart = null - this.routeStartList = [] - this.startCoordinate = null - } else { - this.routeEnd = null - this.routeEndList = [] - this.endCoordinate = null - } - } - - //清除路线 - clearGISRoute () { - this.routeStart = null - this.routeStartList = [] - this.routeEnd = null - this.routeEndList = [] - this.startCoordinate = null - this.endCoordinate = null - this.routeGIS? this.routeGIS.clear() : null - this.routes = { distance: 0, time: 0, steps: [], } - this.map.setZoomAndCenter(13,[this.selectedUnit.location.x,this.selectedUnit.location.y]); //设置地图中心点 - } - - //交换起始点 - exchangeGISRoute () { - let data = this.routeStart - this.routeStart = this.routeEnd - this.routeEnd = data - this.routeStartList = [] - this.routeEndList = [] - let data2 = this.startCoordinate - this.startCoordinate = this.endCoordinate - this.endCoordinate = data2 - } - - routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 - - startCoordinate:any//开始坐标 - endCoordinate:any//结束坐标 - - //导航查询 - queryGISRoute () { - //构造路线导航类 - let that = this - this.selectType = true - this.routeGIS? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ - map: this.map, - }); - if(!this.startCoordinate){ - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('未查询到起点坐标信息,请输入有效地址','确定',config); - return - }else if(!this.startCoordinate){ - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('未查询到终点坐标信息,请输入有效地址','确定',config); - return - }else{ - this.routeGIS.search(this.startCoordinate,this.endCoordinate, - function(status, result) { - if (status === 'complete') { - that.routes = result.routes[0] - } else { alert('获取驾驶规划路线失败') } + ); } - ); - } - - } - - //切换 导航模式 推荐方案/躲避拥堵 - toggleRoute (e) { - let that = this - if (this.selectType != e) { - this.selectType = e - this.routeGIS? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ - map: this.map, - policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC - }); - // 根据起终点名称规划驾车导航路线 - - this.routeGIS.search(this.startCoordinate,this.endCoordinate, - function(status, result) { - if (status === 'complete') { - that.routes = result.routes[0] - } else { alert('获取驾驶规划路线失败') } + + } + + //切换 导航模式 推荐方案/躲避拥堵 + toggleRoute(e) { + let that = this + if (this.selectType != e) { + this.selectType = e + this.routeGIS ? this.routeGIS.clear() : null + this.routeGIS = MapFactory.DrivingInstance({ + map: this.map, + policy: e == true ? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC + }); + // 根据起终点名称规划驾车导航路线 + + this.routeGIS.search(this,this.startCoordinate, this.endCoordinate, + function (status, result) { + if (status === 'complete') { + that.routes = result.routes[0] + } else { alert('获取驾驶规划路线失败') } + } + ); } - ); } - } @@ -1434,291 +1473,292 @@ export class GisLabelingComponent implements OnInit { //分享 @Component({ - selector: 'shareUrl-dialog', - templateUrl: './shareUrl.html', - styleUrls: ['./shareUrl.scss'] + selector: 'shareUrl-dialog', + templateUrl: './shareUrl.html', + styleUrls: ['./shareUrl.scss'] }) export class ShareUrlDialog { - constructor(public http: HttpClient,public snackBar: MatSnackBar, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2) {} - - selectetime:any = [{id:0,name:'今日有效'},{id:1,name:'本周有效'},{id:2,name:'本月有效'},{id:3,name:'仅一次有效'}] - selectedTimeIndex = 0 - ngOnInit() { - this.makeCode() - } - //生成二维码 - qrCode - makeCode () { - this.qrCode = new QRCode(document.getElementById("qrcode"),{ - text: this.data.url, - width: 200, - height: 200, - colorDark : "#000000", - colorLight : "#ffffff", - correctLevel : QRCode.CorrectLevel.H - }); - } - //下载二维码 - downloadFile () { - let canvas = this.qrCode._el.querySelector("canvas") - var base64Text = canvas.toDataURL("image/png"); - let url = base64Text //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - link.setAttribute("download", '二维码'); - document.body.appendChild(link); - link.click(); - } - //复制链接 - copyUrl(){ - var copyTest = this.data.url - var inputTest = document.createElement('input') - inputTest.value = copyTest - document.body.appendChild(inputTest) - inputTest.select() - document.execCommand('Copy') - inputTest.className = 'oInput' - inputTest.style.display = 'none' - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('复制链接成功','确定',config); - } - selectedTime(index){ - if(this.selectedTimeIndex != index){ - this.selectedTimeIndex = index - this.qrCode.clear(); - if(index == 0){//如果今日有效 - console.log("今日") - } - if(index == 1){//如果本周有效 - console.log("本周") - this.qrCode.makeCode("http://www.w3cschool.cc") - } - if(index == 2){//如果本月有效 - console.log("本月") - } - if(index == 3){//如果仅一次有效 - console.log("一次") - } - } - } - //关闭 - closeDiv(){ - this.dialogRef.close() - } + constructor(public http: HttpClient, public snackBar: MatSnackBar, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2) { } + + selectetime: any = [{ id: 0, name: '今日有效' }, { id: 1, name: '本周有效' }, { id: 2, name: '本月有效' }, { id: 3, name: '仅一次有效' }] + selectedTimeIndex = 0 + ngOnInit() { + this.makeCode() + } + //生成二维码 + qrCode + makeCode() { + this.qrCode = new QRCode(document.getElementById("qrcode"), { + text: this.data.url, + width: 200, + height: 200, + colorDark: "#000000", + colorLight: "#ffffff", + correctLevel: QRCode.CorrectLevel.H + }); + } + //下载二维码 + downloadFile() { + let canvas = this.qrCode._el.querySelector("canvas") + var base64Text = canvas.toDataURL("image/png"); + let url = base64Text //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + link.setAttribute("download", '二维码'); + document.body.appendChild(link); + link.click(); + } + //复制链接 + copyUrl() { + var copyTest = this.data.url + var inputTest = document.createElement('input') + inputTest.value = copyTest + document.body.appendChild(inputTest) + inputTest.select() + document.execCommand('Copy') + inputTest.className = 'oInput' + inputTest.style.display = 'none' + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('复制链接成功', '确定', config); + } + selectedTime(index) { + if (this.selectedTimeIndex != index) { + this.selectedTimeIndex = index + this.qrCode.clear(); + if (index == 0) {//如果今日有效 + console.log("今日") + } + if (index == 1) {//如果本周有效 + console.log("本周") + this.qrCode.makeCode("http://www.w3cschool.cc") + } + if (index == 2) {//如果本月有效 + console.log("本月") + } + if (index == 3) {//如果仅一次有效 + console.log("一次") + } + } + } + //关闭 + closeDiv() { + this.dialogRef.close() + } } //查看预案 @Component({ - selector: 'lookPlan-dialog', - templateUrl: './lookPlan.html', - styleUrls: ['./lookPlan.scss'] + selector: 'lookPlan-dialog', + templateUrl: './lookPlan.html', + styleUrls: ['./lookPlan.scss'] }) export class LookPlanDialog { - constructor(public http: HttpClient,public snackBar: MatSnackBar, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2,public dialog: MatDialog) {} - - - ngOnInit() { - // console.log(this.data) - this.getAllPlans() - } - //关闭弹窗 - closeDiv(){ - this.dialogRef.close() - } - //查看单位详情 - lookUnitDetails(){ - window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`) - } - //获得所有预案组件 - allPlanComponents:any//所有预案组件 - getAllPlans(){ - let paramsData:any = { - companyId:this.data.id, - pageNumber: 1, - pageSize: "100", - sort: "" - } - this.http.get("/api/PlanComponents",{params:paramsData}).subscribe((data:any)=>{ - this.allPlanComponents = data.items - }) - } - //查看预案 - lookPlan(e){ - if(e.planMode == 0){ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('本地文件,请下载查看','确定',config); - } - if(e.planMode == 1){ - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('查看导入word文件','确定',config); - } - if(e.planMode == 2){ //如果是在线编辑 - let id = e.id - sessionStorage.setItem("planId",id) - sessionStorage.setItem("companyId",this.data.id) - sessionStorage.setItem("buildingTypeId",this.data.buildingTypes[0].id) - sessionStorage.setItem("editable","0") - sessionStorage.setItem("planName",e.name) - let companyId = sessionStorage.getItem("companyId") - window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`); - } - if(e.planMode == 3){ //如果是跳转网页 - sessionStorage.setItem("url",e.url) - window.open(`/planManagement/webLook`) - } - } - - //点击下载 - readFile(element){ - this.uploadFileLonging = element - let data =element - const dialogRef = this.dialog.open(DownloadFile, { - width:"435px", - data - }); - dialogRef.afterClosed().subscribe( - data=>{ - if(data){ - this.downloadFileName = data.fileName - this.download = data - this.downloadFile() + constructor(public http: HttpClient, public snackBar: MatSnackBar, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog) { } + + + ngOnInit() { + // console.log(this.data) + this.getAllPlans() + } + //关闭弹窗 + closeDiv() { + this.dialogRef.close() + } + //查看单位详情 + lookUnitDetails() { + window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`) + } + //获得所有预案组件 + allPlanComponents: any//所有预案组件 + getAllPlans() { + let paramsData: any = { + companyId: this.data.id, + pageNumber: 1, + pageSize: "100", + sort: "" } - } - ); - } - - //下载↓ - selectDownloadFile:any; //选择下载的文件 - download:any; //下载文件元数据 - downloadFileName:any //下载文件的文件名 - downloadisLoading:boolean = false; //进度条loading是否加载 - downloadProgress:number = 0; //进度条进度 - - uploadFileLonging:any - downloadFile(){ - this.downloadProgress = 0 - let file = this.download - let fileSize = file.fileLength//下载文件的总大小 - let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB - - if (file && fileSize<=shardSize) { //<=10MB时直接下载 - this.downloadisLoading = true - this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{ - let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ; - link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" +this.uploadFileLonging.name + "." + suffix); - document.body.appendChild(link); - link.click(); - this.downloadisLoading = false - }) - } else if (file && fileSize > shardSize) { //>10MB时分块下载 - this.blockingDownload() //分段下载 - this.downloadisLoading = true - } - } - //分段下载并合并 - async blockingDownload () { - let file = this.download - let fileSize = file.fileLength //下载文件的总大小 - let shardSize = 3 * 1024 * 1024 //3MB一个分片 - let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段 - let allFile:any = [] //所有的file分段 - - for (let i=0;i{ - this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{ - result(data) }) - }) - allFile.push(result) - - - - if (allFile.length === allSlice) { //合并文件输出给浏览器 - let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ; - link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" +this.uploadFileLonging.name + "." + suffix); - document.body.appendChild(link); - link.click(); - this.downloadisLoading = false - } + this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => { + this.allPlanComponents = data.items + }) + } + //查看预案 + lookPlan(e) { + if (e.planMode == 0) { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('本地文件,请下载查看', '确定', config); + } + if (e.planMode == 1) { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('查看导入word文件', '确定', config); + } + if (e.planMode == 2) { //如果是在线编辑 + let id = e.id + sessionStorage.setItem("planId", id) + sessionStorage.setItem("companyId", this.data.id) + sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id) + sessionStorage.setItem("editable", "0") + sessionStorage.setItem("planName", e.name) + let companyId = sessionStorage.getItem("companyId") + window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`); + } + if (e.planMode == 3) { //如果是跳转网页 + sessionStorage.setItem("url", e.url) + window.open(`/planManagement/webLook`) + } + } + + //点击下载 + readFile(element) { + this.uploadFileLonging = element + let data = element + const dialogRef = this.dialog.open(DownloadFile, { + width: "435px", + data + }); + dialogRef.afterClosed().subscribe( + data => { + if (data) { + this.downloadFileName = data.fileName + this.download = data + this.downloadFile() + } + } + ); + } - } //for循环 + //下载↓ + selectDownloadFile: any; //选择下载的文件 + download: any; //下载文件元数据 + downloadFileName: any //下载文件的文件名 + downloadisLoading: boolean = false; //进度条loading是否加载 + downloadProgress: number = 0; //进度条进度 + + uploadFileLonging: any + downloadFile() { + this.downloadProgress = 0 + let file = this.download + let fileSize = file.fileLength//下载文件的总大小 + let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB + + if (file && fileSize <= shardSize) { //<=10MB时直接下载 + this.downloadisLoading = true + this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { responseType: 'blob' },).subscribe(data => { + let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length); + link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" + this.uploadFileLonging.name + "." + suffix); + document.body.appendChild(link); + link.click(); + this.downloadisLoading = false + }) + } else if (file && fileSize > shardSize) { //>10MB时分块下载 + this.blockingDownload() //分段下载 + this.downloadisLoading = true + } + } + //分段下载并合并 + async blockingDownload() { + let file = this.download + let fileSize = file.fileLength //下载文件的总大小 + let shardSize = 3 * 1024 * 1024 //3MB一个分片 + let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段 + let allFile: any = [] //所有的file分段 + + for (let i = 0; i < allSlice; i++) { + let start = i * shardSize //每次下载文件开始位置 + let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止 + + let result = await new Promise((result, reject) => { + this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { headers: { 'range': `bytes= ${start}-${end}` }, responseType: 'blob' }).subscribe(data => { + result(data) + }) + }) + allFile.push(result) + + + + if (allFile.length === allSlice) { //合并文件输出给浏览器 + let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length); + link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" + this.uploadFileLonging.name + "." + suffix); + document.body.appendChild(link); + link.click(); + this.downloadisLoading = false + } - } + } //for循环 - //取消分块下载 - cancelDowload () { - } + } + + //取消分块下载 + cancelDowload() { + } } //下载文件弹出框 @Component({ - selector: 'downloadfile', - templateUrl: './downloadFile.html', - styleUrls: ['./downloadFile.scss'] + selector: 'downloadfile', + templateUrl: './downloadFile.html', + styleUrls: ['./downloadFile.scss'] }) export class DownloadFile { - - constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {} - name:any //如果真实姓名为空时 - fileUrls:any //当前预案附件地址数组 - fileDatas:any = [] //用于循环的数组 - selectedFileIndex : any = 0 - selectedFileData : any - - ngOnInit(): void { - // console.log(this.data) - this.name = this.data.name - this.fileUrls = this.data.attachmentUrls - this.fileUrls.forEach(item=>{ - this.http.get('/api/ObjectMetadata/PlanPlatform/'+item).subscribe((data:any)=>{ - data.filePige = (data.fileLength / (1024*1024)).toFixed(2) - this.fileDatas.push(data) - this.selectedFileData = data - }) - }) - - } - - //取消 - onNoClick(): void { - this.dialogRef.close(); - } - //确定 - confirm(){ - this.dialogRef.close(this.selectedFileData); - } - - //点击想要下载的文件 - addurl(item,key){ - // console.log(item,key) - this.selectedFileIndex = key - this.selectedFileData = item - } + + constructor(private http: HttpClient, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data, public snackBar: MatSnackBar) { } + name: any //如果真实姓名为空时 + fileUrls: any //当前预案附件地址数组 + fileDatas: any = [] //用于循环的数组 + selectedFileIndex: any = 0 + selectedFileData: any + + ngOnInit(): void { + // console.log(this.data) + this.name = this.data.name + this.fileUrls = this.data.attachmentUrls + this.fileUrls.forEach(item => { + this.http.get('/api/ObjectMetadata/PlanPlatform/' + item).subscribe((data: any) => { + data.filePige = (data.fileLength / (1024 * 1024)).toFixed(2) + this.fileDatas.push(data) + this.selectedFileData = data + }) + }) + + } + + //取消 + onNoClick(): void { + this.dialogRef.close(); + } + //确定 + confirm() { + this.dialogRef.close(this.selectedFileData); + } + + //点击想要下载的文件 + addurl(item, key) { + // console.log(item,key) + this.selectedFileIndex = key + this.selectedFileData = item + } } \ No newline at end of file diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 5dd308d..df5228d 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,8 +1,6 @@ import { Component, OnInit, Renderer2, ElementRef } from '@angular/core'; import { HttpClient } from '@angular/common/http' declare var echarts: any; -declare var AMap: any; -declare var AMapUI: any; diff --git a/src/app/key-unit/basicinfo-look/basicinfo.component.ts b/src/app/key-unit/basicinfo-look/basicinfo.component.ts index 0278bc0..21543c8 100644 --- a/src/app/key-unit/basicinfo-look/basicinfo.component.ts +++ b/src/app/key-unit/basicinfo-look/basicinfo.component.ts @@ -5,21 +5,16 @@ import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import format from 'date-fns/format'; import { TreeService } from '../../http-interceptors/tree.service' import { FileUploader, FileItem } from 'ng2-file-upload' import { DomSanitizer } from '@angular/platform-browser' -import { Injectable } from "@angular/core" -import { filter } from 'rxjs/operators'; -import { async } from '@angular/core/testing'; -import { MatTableDataSource } from '@angular/material/table'; -import { isNgTemplate } from '@angular/compiler'; import * as _ from 'lodash'; import Swiper from 'swiper'; import { ActivatedRoute } from '@angular/router'; import { StatisticsOfFireFightingFacilities } from '../basicinfo/basicinfo.component'; import Viewer from 'viewerjs'; -declare var AMap: any; +import { IMap, IMarker } from '@src/modules/map/declare/map'; +import { MapFactory } from '@src/modules/map/declare/factory'; @Component({ selector: 'app-basicinfo-look', @@ -131,11 +126,11 @@ export class BasicinfoLookComponent implements OnInit { isMapLabel: boolean //地图标注位置 markerPosition: any = { x: 0, y: 0 }//单位坐标 - map: any //地图实例 + map: IMap //地图实例 isGisTopBox: boolean = false//点击位置按钮 isGisTopBoxTwo: boolean = false//点击位置按钮 - oldPositionMarker: any //旧位置marker实例 - newPositionMarker: any //新位置marker实例 + oldPositionMarker: IMarker //旧位置marker实例 + newPositionMarker: IMarker //新位置marker实例 newPositionMarkerContent: any = '
' + @@ -145,7 +140,7 @@ export class BasicinfoLookComponent implements OnInit { //初始化地图 labelGis() { - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom: 12 }) this.map.on('complete', () => { @@ -156,10 +151,10 @@ export class BasicinfoLookComponent implements OnInit { if (this.isMapLabel) {//如果已经标注单位坐标 // console.log('已标注单位位置') this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]); - this.oldPositionMarker = new AMap.Marker({ + this.oldPositionMarker = MapFactory.MarkerInstance({ position: [this.unitinfo.location.x, this.unitinfo.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }) // 将 markers 添加到地图 this.map.add(this.oldPositionMarker); diff --git a/src/app/key-unit/basicinfo/basicinfo.component.ts b/src/app/key-unit/basicinfo/basicinfo.component.ts index fdb4a5a..b37ad82 100644 --- a/src/app/key-unit/basicinfo/basicinfo.component.ts +++ b/src/app/key-unit/basicinfo/basicinfo.component.ts @@ -5,23 +5,19 @@ import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import format from 'date-fns/format'; import { TreeService } from '../../http-interceptors/tree.service' import { FileUploader, FileItem } from 'ng2-file-upload' import { AddHouseInfo } from './addhouseinfo.component' import { DomSanitizer } from '@angular/platform-browser' -import { Injectable } from "@angular/core" -import { filter } from 'rxjs/operators'; -import { async } from '@angular/core/testing'; -import { MatTableDataSource } from '@angular/material/table'; -import { isNgTemplate } from '@angular/compiler'; import * as _ from 'lodash'; import Swiper from 'swiper'; import { LookMaster } from './lookmaster.component' import { ActivatedRoute } from '@angular/router'; import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service'; -declare var AMap: any; import Viewer from 'viewerjs'; +import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map'; +import { MapFactory } from '@src/modules/map/declare/factory'; + @Component({ selector: 'app-basicinfo', templateUrl: './basicinfo.component.html', @@ -129,11 +125,11 @@ export class BasicinfoComponent implements OnInit { isMapLabel: boolean //地图标注位置 markerPosition: any = { x: 0, y: 0 }//单位坐标 - map: any //地图实例 + map: IMap //地图实例 isGisTopBox: boolean = false//点击位置按钮 isGisTopBoxTwo: boolean = false//点击位置按钮 - oldPositionMarker: any //旧位置marker实例 - newPositionMarker: any //新位置marker实例 + oldPositionMarker: IMarker //旧位置marker实例 + newPositionMarker: IMarker //新位置marker实例 newPositionMarkerContent: any = '
' + @@ -152,7 +148,7 @@ export class BasicinfoComponent implements OnInit { '
' //初始化地图 searchTitle: any//搜索内容 - placeSearch: any//地址搜索类 + placeSearch: IPlaceSearch//地址搜索类 search() { this.placeSearch.search(this.searchTitle, (status, result) => { // 搜索成功时,result即是对应的匹配数据 @@ -169,7 +165,7 @@ export class BasicinfoComponent implements OnInit { } //初始化地图 labelGis() { - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom: 12 }) this.map.on('complete', () => { @@ -179,26 +175,21 @@ export class BasicinfoComponent implements OnInit { var autoOptions = { input: "tipinput" }; - AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => { - var auto = new AMap.AutoComplete(autoOptions); - this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 - auto.on("select", (e) => { - // console.log(e) - // console.log( this.newPositionMarker) - this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) - this.markerPosition2 = { x: e.poi.location.lng, y: e.poi.location.lat } - this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 - - }); + var auto = MapFactory.AutocompleteInstance(autoOptions,this); + this.placeSearch = MapFactory.PlaceSearchInstance(this); //构造地点查询类 + auto.on("select", (e) => { + this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) + this.markerPosition2 = { x: e.poi.location.lng, y: e.poi.location.lat } + this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 if (this.isMapLabel) {//如果已经标注单位坐标 // console.log('已标注单位位置') this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]); - this.oldPositionMarker = new AMap.Marker({ + this.oldPositionMarker = MapFactory.MarkerInstance({ position: [this.unitinfo.location.x, this.unitinfo.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }) // 将 markers 添加到地图 this.map.add(this.oldPositionMarker); @@ -222,11 +213,11 @@ export class BasicinfoComponent implements OnInit { this.newPositionMarker.setContent(this.oldPositionMarkerContent) } - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ draggable: true, position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContentBtn, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.add(this.newPositionMarker); @@ -237,24 +228,24 @@ export class BasicinfoComponent implements OnInit { this.markerPosition2 = { x: this.map.getCenter().lng, y: this.map.getCenter().lat } //获取当前地图中心位置 } this.newPositionMarker.on('dragend', (e) => { - let lnglat = this.map.containerToLngLat(e.pixel) + let lnglat = this.newPositionMarker.getLngLatByMarkerEvent(this.map,e); this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT } // console.log(`${lnglat.KL},${lnglat.kT}`); - }) + },this) this.newPositionMarker.on('dragging', (e) => { //console.log('dragging',e) - let lnglat = this.map.containerToLngLat(e.pixel) + let lnglat = this.newPositionMarker.getLngLatByMarkerEvent(this.map,e); this.newPositionMarker.setPosition(lnglat); - }) + },this) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'), 'click', (event) => { this.map.clearMap(); this.isGisTopBox = true this.isGisTopBoxTwo = false - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition2.x, this.markerPosition2.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.markerPosition = this.markerPosition2 this.map.add(this.newPositionMarker); @@ -264,10 +255,10 @@ export class BasicinfoComponent implements OnInit { this.isGisTopBox = true this.isGisTopBoxTwo = false this.map.clearMap(); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -277,10 +268,10 @@ export class BasicinfoComponent implements OnInit { this.map.clearMap(); this.isGisTopBox = true this.isGisTopBoxTwo = false - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition2.x, this.markerPosition2.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.markerPosition = this.markerPosition2 this.map.add(this.newPositionMarker); @@ -290,10 +281,10 @@ export class BasicinfoComponent implements OnInit { this.isGisTopBox = true this.isGisTopBoxTwo = false this.map.clearMap(); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -311,11 +302,11 @@ export class BasicinfoComponent implements OnInit { this.map.setCenter(center); } - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ draggable: true, position: center, content: this.newPositionMarkerContentBtn, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.add(this.newPositionMarker); @@ -326,25 +317,25 @@ export class BasicinfoComponent implements OnInit { this.markerPosition2 = { x: this.map.getCenter().lng, y: this.map.getCenter().lat } //获取当前地图中心位置 } this.newPositionMarker.on('dragend', (e) => { - let lnglat = this.map.containerToLngLat(e.pixel) + let lnglat = this.newPositionMarker.getLngLatByMarkerEvent(this.map,e) this.markerPosition2 = { x: lnglat.KL, y: lnglat.kT } // console.log(`${lnglat.KL},${lnglat.kT}`); - }) + },this) this.newPositionMarker.on('dragging', (e) => { //console.log('dragging',e) - let lnglat = this.map.containerToLngLat(e.pixel) + let lnglat = this.newPositionMarker.getLngLatByMarkerEvent(this.map,e) this.newPositionMarker.setPosition(lnglat); - }) + },this) //点击确定 this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'), 'click', (event) => { this.isGisTopBox = true this.isGisTopBoxTwo = false this.markerPosition = this.markerPosition2 this.map.clearMap(); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.add(this.newPositionMarker); }) @@ -353,10 +344,10 @@ export class BasicinfoComponent implements OnInit { this.isGisTopBoxTwo = false this.markerPosition = this.markerPosition2 this.map.clearMap(); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.add(this.newPositionMarker); }) @@ -365,10 +356,10 @@ export class BasicinfoComponent implements OnInit { this.isGisTopBox = true this.isGisTopBoxTwo = false if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点 - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.add(this.newPositionMarker); @@ -379,10 +370,10 @@ export class BasicinfoComponent implements OnInit { this.isGisTopBox = true this.isGisTopBoxTwo = false if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点 - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.markerPosition.x, this.markerPosition.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-34, -36) + offset: MapFactory.PixelInstance(-34, -36) }); this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.add(this.newPositionMarker); diff --git a/src/app/key-unit/router-gis/router-gis.component.ts b/src/app/key-unit/router-gis/router-gis.component.ts index 114a152..edc9228 100644 --- a/src/app/key-unit/router-gis/router-gis.component.ts +++ b/src/app/key-unit/router-gis/router-gis.component.ts @@ -2,6 +2,8 @@ import { HttpClient } from '@angular/common/http'; import { Component, EventEmitter, NgZone, OnInit, Output } from '@angular/core'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IDriving, IMap } from '@src/modules/map/declare/map'; declare var AMap: any; @Component({ @@ -31,14 +33,14 @@ export class RouterGISComponent implements OnInit { this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe((data:any)=>{ if (data.driveRouteStartPoint && data.driveRouteStartPoint.x && data.driveRouteStartPoint.y && data.driveRouteStartName) { //开始坐标 名称 this.routeStart = data.driveRouteStartName - this.startCoordinate = [data.driveRouteStartPoint.x,data.driveRouteStartPoint.y] + this.startCoordinate = MapFactory.LngLatInstance(data.driveRouteStartPoint.x, data.driveRouteStartPoint.y) } if (data.driveRouteEndPoint && data.driveRouteEndPoint.x && data.driveRouteEndPoint.y && data.driveRouteEndName) { //结束坐标 名称 this.routeEnd = data.driveRouteEndName - this.endCoordinate = [data.driveRouteEndPoint.x,data.driveRouteEndPoint.y] + this.endCoordinate = MapFactory.LngLatInstance(data.driveRouteEndPoint.x, data.driveRouteEndPoint.y) } else if (data.location && data.location.x && data.location.y) { this.routeEnd = data.name - this.endCoordinate = [data.location.x,data.location.y] + this.endCoordinate = MapFactory.LngLatInstance(data.location.x, data.location.y) } resolve('success') }) //http @@ -88,29 +90,27 @@ export class RouterGISComponent implements OnInit { //地图初始化 mapInit () { let that = this - var layer = new AMap.createDefaultLayer({ + var layer = MapFactory.LayerInstance({ zooms:[3,20], //可见级别 visible:true, //是否可见 opacity:1, //透明度 zIndex:0, //叠加层级 resizeEnable: true //是否监控地图容器尺寸变化, }) - that.map = new AMap.Map('map',{ + that.map = MapFactory.MapInstance('map',{ layers:[layer], //当只想显示标准图层时layers属性可缺省, }); that.map.setCity('上海市'); - AMap.plugin('AMap.Driving', function() { - that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null - }) + that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null } - map:any; //地图实例 + map:IMap; //地图实例 routeStart:any; //起点 routeStartList:any = [] //起点 搜索结果 routeEnd:any; //终点 routeEndList:any = [] //终点 搜索结果 timeout:any; //延时器 - routeGIS:any; //查询结果 规划路线 + routeGIS:IDriving; //查询结果 规划路线 selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵 routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 startCoordinate:any//开始坐标 @@ -123,34 +123,32 @@ export class RouterGISComponent implements OnInit { this.timeout = window.setTimeout(()=>{ that.map.getCity( function(info){ //获取当前 city - AMap.plugin(['AMap.AutoComplete'], () =>{ - var autoOptions = {city: info.city} - let keywords - e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = new AMap.Autocomplete(autoOptions); - autoComplete.search(keywords, function(status, result) { - if (result && result.tips && result.tips.length) { //搜索到数据时 - that._ngZone.run(()=>{ - if(e == 0){ - that.routeStartList = result.tips - if(result.tips.length != 0){ - for (let index = 0; index < result.tips.length; index++) { - const element = result.tips[index]; - if(element.location){ - that.startCoordinate = new AMap.LngLat(element.location.lng, element.location.lat) - return - } + var autoOptions = {city: info.city} + let keywords + e == 0 ? keywords = that.routeStart : keywords = that.routeEnd + var autoComplete = MapFactory.AutocompleteInstance(autoOptions,that); + autoComplete.search(keywords, function(status, result) { + if (result && result.tips && result.tips.length) { //搜索到数据时 + that._ngZone.run(()=>{ + if(e == 0){ + that.routeStartList = result.tips + if(result.tips.length != 0){ + for (let index = 0; index < result.tips.length; index++) { + const element = result.tips[index]; + if(element.location){ + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) + return } } - }else{ - that.routeEndList = result.tips - that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat) } - }); - - } //if - }) + }else{ + that.routeEndList = result.tips + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) + } + }); + } //if }) + }); //获取当前 city },500) @@ -201,7 +199,7 @@ export class RouterGISComponent implements OnInit { let that = this this.selectType = true this.routeGIS? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ + this.routeGIS = MapFactory.DrivingInstance({ map: this.map, }); if(!this.startCoordinate){ @@ -217,7 +215,7 @@ export class RouterGISComponent implements OnInit { this.snackBar.open('未查询到终点坐标信息,请输入有效地址','确定',config); return }else{ - this.routeGIS.search(this.startCoordinate,this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate,this.endCoordinate, function(status, result) { if (status === 'complete') { that.routes = result.routes[0] @@ -239,12 +237,12 @@ export class RouterGISComponent implements OnInit { if (this.selectType != e) { this.selectType = e this.routeGIS? this.routeGIS.clear() : null - this.routeGIS = new AMap.Driving({ + this.routeGIS = MapFactory.DrivingInstance({ map: this.map, policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC }); // 根据起终点名称规划驾车导航路线 - this.routeGIS.search(this.startCoordinate,this.endCoordinate, + this.routeGIS.search(this,this.startCoordinate,this.endCoordinate, function(status, result) { if (status === 'complete') { that.routes = result.routes[0] diff --git a/src/app/key-unit/six-familiarity/six-familiarity.component.ts b/src/app/key-unit/six-familiarity/six-familiarity.component.ts index 9f36c2b..cdb98e1 100644 --- a/src/app/key-unit/six-familiarity/six-familiarity.component.ts +++ b/src/app/key-unit/six-familiarity/six-familiarity.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -declare var AMap: any; +import { MapFactory } from '@src/modules/map/declare/factory'; @Component({ selector: 'app-six-familiarity', @@ -47,26 +47,11 @@ export class routerMapComponent implements OnInit { //地图初始化 mapInit () { //创建地图 - let map = new AMap.Map('contentMap', { + let map = MapFactory.MapInstance('contentMap', { resizeEnable: true, cursor: 'default', zooms:[6,18], }); - //构造路线导航类 实际路线 - let driving = new AMap.Driving({ - map: map, - showTraffic: true, - isOutline: true, - }); - driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); - //构造路线导航类 导航路线 - let drivingTwo = new AMap.Driving({ - map: map, - showTraffic: false, - }); - drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); - //function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数 - //new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标 } diff --git a/src/app/key-unit/water-road/water-road.component.ts b/src/app/key-unit/water-road/water-road.component.ts index fa24d5e..1567400 100644 --- a/src/app/key-unit/water-road/water-road.component.ts +++ b/src/app/key-unit/water-road/water-road.component.ts @@ -4,6 +4,8 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { ICircle, IMap, IMarker } from '@src/modules/map/declare/map'; declare var AMap: any; declare var html2canvas: any; @Component({ @@ -29,17 +31,17 @@ export class WaterRoadComponent implements OnInit { }) } - map: any //地图 - watertForm: FormGroup //gis右上角水源表单 - waterList = [ - { id: '0', name: '消火栓', selected: true }, - { id: '1', name: '消防水池', selected: true }, - { id: '2', name: '天然水源', selected: true }, - { id: '3', name: '总队', selected: true }, - { id: '4', name: '支队', selected: true }, - { id: '5', name: '大队', selected: true }, - { id: '6', name: '中队(消防站)', selected: true }, - { id: '7', name: '其他消防队伍', selected: true } + map:IMap //地图 + watertForm:FormGroup //gis右上角水源表单 + waterList = [ + {id:'0',name:'消火栓',selected:true}, + {id:'1',name:'消防水池',selected:true}, + {id:'2',name:'天然水源',selected:true}, + {id:'3',name:'总队',selected:true}, + {id:'4',name:'支队',selected:true}, + {id:'5',name:'大队',selected:true}, + {id:'6',name:'中队(消防站)',selected:true}, + {id:'7',name:'其他消防队伍',selected:true} ] fireForceList: any[] = [ @@ -48,7 +50,7 @@ export class WaterRoadComponent implements OnInit { waterAreaDefault: any = '5000' //默认水源范围 selectedWaterList: any = [] //选择提交的水源 //地图范围圆圈---水源 - circleofwater = new AMap.Circle({ + circleofwater:ICircle = MapFactory.CircleInstance({ center: null, radius: 0, //半径 strokeOpacity: 1, @@ -111,7 +113,7 @@ export class WaterRoadComponent implements OnInit { this.circleofwater.setMap(this.map) let Distance - let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标 + let lnglat = MapFactory.LngLatInstance(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标 //如果选择当前的视野范围算出查询半径 if (this.waterAreaDefault == '0') { @@ -223,11 +225,12 @@ export class WaterRoadComponent implements OnInit { } }) - this.map.plugin(["AMap.MarkerClusterer"], () => { - var gridSize = 60 - var count = waterMarkerArrcluster.length; - var _renderClusterMarker = function (context) { - var factor = Math.pow(context.count / count, 1 / 18); + var gridSize = 60 + var count = waterMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / count, 1 / 18); var div = document.createElement('div'); var Hue = 180 - factor * 180; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; @@ -235,36 +238,38 @@ export class WaterRoadComponent implements OnInit { var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; div.style.backgroundColor = bgColor; - var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); div.style.width = div.style.height = size + 'px'; div.style.border = 'solid 1px ' + borderColor; div.style.borderRadius = size / 2 + 'px'; - // div.style.boxShadow = '0 0 5px ' + shadowColor; - div.innerHTML = context.count; + div.style.boxShadow = '0 0 5px ' + shadowColor; + div.innerHTML = contextCount; div.style.lineHeight = size + 'px'; div.style.color = fontColor; div.style.fontSize = '14px'; div.style.textAlign = 'center'; - context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); - context.marker.setContent(div) - }; - var _renderMarker = (context) => { - var content = ``; - var offset = new AMap.Pixel(-12.5, -12.5); - context.marker.setContent(content) - context.marker.setOffset(offset) - } - this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - renderMarker: _renderMarker, // 自定义非聚合点样式 - }); - this.waterCluster.on('click', (e) => { - if (e.clusterData.length == 1) { + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; - } - }) + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + this.waterCluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + + } + },this) } @@ -273,7 +278,7 @@ export class WaterRoadComponent implements OnInit { this.watertForm.reset() this.watertForm.controls.areaWater.setValue('0') this.map.remove(this.circleofwater) - this.waterCluster.setData([]) + this.waterCluster? this.waterCluster.setData([]) : null } //计算两地距离 @@ -281,8 +286,7 @@ export class WaterRoadComponent implements OnInit { let p1 = [bounds.northEast.lng, bounds.northEast.lat]; let p2 = [bounds.northEast.lng, bounds.southWest.lat]; // 返回 p1 到 p2 间的地面距离,单位:米 - let dis = AMap.GeometryUtil.distance(p1, p2); - return dis + return this.map.distance(p1, p2); } //构造水源checkbox控制器 @@ -294,24 +298,24 @@ export class WaterRoadComponent implements OnInit { } //地图初始化 - unitMarker: any//单位标点 - newPositionMarkerContent: any = - '
' + - ' ' + - '
' - creatMap() { - this.map = new AMap.Map('center', { + unitMarker:IMarker//单位标点 + newPositionMarkerContent:any = + '
' + + ' ' + + '
' + creatMap(){ + this.map = MapFactory.MapInstance('center',{ zoom: 13, //初始地图级别 WebGLParams: { preserveDrawingBuffer: true } }); - if (this.unitData.location && this.unitData.location.x) { - this.map.setCenter([this.unitData.location.x, this.unitData.location.y]); - this.unitMarker = new AMap.Marker({ - position: [this.unitData.location.x, this.unitData.location.y], + if(this.unitData.location && this.unitData.location.x){ + this.map.setCenter([this.unitData.location.x,this.unitData.location.y]); + this.unitMarker = MapFactory.MarkerInstance({ + position: [this.unitData.location.x,this.unitData.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-10, -13) + offset: MapFactory.PixelInstance(-10, -13) }) // 将 markers 添加到地图 this.map.add(this.unitMarker); diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index c138d87..19ae75f 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -1,148 +1,150 @@ -import { Component, OnInit } from '@angular/core'; +import { ApplicationRef, Component, ComponentFactoryResolver, Injector, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http' import { Data } from '../../interface' -import { Router,ActivatedRoute } from '@angular/router' -import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务 -import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar'; -import { MatDialog,MatDialogRef } from '@angular/material/dialog'; - - +import { Router, ActivatedRoute } from '@angular/router' +import { CacheTokenService } from '../../http-interceptors/cache-token.service'//引入服务 +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; +import { MatDialog, MatDialogRef } from '@angular/material/dialog'; @Component({ - selector: 'app-login', - templateUrl: './login.component.html', - styleUrls: ['./login.component.scss'], + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.scss'], }) export class LoginComponent implements OnInit { - constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public snackBar: MatSnackBar, public dialog: MatDialog) { } - - ngOnInit() { - this.automaticLogin() - } - - errmsg :string = '' - - onSubmit(e){ - this.http.post('/api/Account/SignIn',{ - name: e.name, - password: e.password}).subscribe( (data: Data) => { - sessionStorage.setItem("level",data.level); - sessionStorage.setItem("token",data.token); - sessionStorage.setItem("refreshToken",data.refreshToken); - sessionStorage.setItem("isDefaultPassword",data.isDefaultPassword);//是否需要修改默认密码 - this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{ - let isHave = data.find(item=>{ return item.url == "/statisticanalysis/home"}) - let isHaveGis = data.find(item=>{ return item.url == "/gis"}) - if (isHave) { - this.router.navigate([`/statisticanalysis/home`]) - this.dialogChangePassword() - return - } else if(isHaveGis){ - this.router.navigate([`/gis`]) - this.dialogChangePassword() - return - } else if(data.length != 0){ - this.router.navigate([`/keyUnit`]) - this.dialogChangePassword() - return - data.forEach(item => { - if(item.url){ - - } - }); - }else{ - this.snackBar.open('该用户角色未分配任何菜单', '确定', { - duration: 3000 + constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public snackBar: MatSnackBar, public dialog: MatDialog) { + + } + + ngOnInit() { + this.automaticLogin() + } + + errmsg: string = '' + + onSubmit(e) { + this.http.post('/api/Account/SignIn', { + name: e.name, + password: e.password + }).subscribe((data: Data) => { + sessionStorage.setItem("level", data.level); + sessionStorage.setItem("token", data.token); + sessionStorage.setItem("refreshToken", data.refreshToken); + sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);//是否需要修改默认密码 + this.http.get('/api/Account/NavMenus').subscribe((data: any) => { + let isHave = data.find(item => { return item.url == "/statisticanalysis/home" }) + let isHaveGis = data.find(item => { return item.url == "/gis" }) + if (isHave) { + this.router.navigate([`/statisticanalysis/home`]) + this.dialogChangePassword() + return + } else if (isHaveGis) { + this.router.navigate([`/gis`]) + this.dialogChangePassword() + return + } else if (data.length != 0) { + this.router.navigate([`/keyUnit`]) + this.dialogChangePassword() + return + data.forEach(item => { + if (item.url) { + + } + }); + } else { + this.snackBar.open('该用户角色未分配任何菜单', '确定', { + duration: 3000 + }); + } + + }) + if (e.notlogin) { //7天免登录时 + localStorage.setItem("isnologin", "true") + localStorage.setItem("token", data.token) + localStorage.setItem("refreshToken", data.refreshToken) + } + //调用服务中的function刷新token + this.token.startUp() + }, + (err) => { this.errmsg = err } + ) + } + + + dialogChangePassword() { + if (sessionStorage.getItem('isDefaultPassword') == 'true') { + let dialogRef = this.dialog.open(ChangepasswordComponent2, + { width: '348px' }); + + dialogRef.afterClosed().subscribe((data) => { + sessionStorage.setItem('isDefaultPassword', 'false') }); - } - - }) - if(e.notlogin){ //7天免登录时 - localStorage.setItem("isnologin","true") - localStorage.setItem("token",data.token) - localStorage.setItem("refreshToken",data.refreshToken) } - //调用服务中的function刷新token - this.token.startUp() - }, - (err) => {this.errmsg = err} - ) - } - - - dialogChangePassword(){ - if(sessionStorage.getItem('isDefaultPassword') == 'true'){ - let dialogRef = this.dialog.open(ChangepasswordComponent2, - {width:'348px'}); - - dialogRef.afterClosed().subscribe((data)=>{ - sessionStorage.setItem('isDefaultPassword','false') - }); + } + } + //7天免登录自动登录 + automaticLogin() { + let isNoLogin = localStorage.getItem("isnologin") + if (isNoLogin) { //7天免登录时 + let token = localStorage.getItem("token"); + let refreshToken = localStorage.getItem("refreshToken"); + this.http.post('/api/Account/RefreshToken', { + token: token, + refreshToken: refreshToken + }).subscribe((data: any) => { + sessionStorage.setItem("level", data.level); + sessionStorage.setItem("token", data.token); + sessionStorage.setItem("refreshToken", data.refreshToken); + this.token.startUp() + this.router.navigate(['/keyUnit']) + this.snackBar.open('已自动登录', '确定', { duration: 3000 }); + }) + } //if + + } + + //打开弹窗 + open() { + this.snackBar.open('请联系管理员', '确定', { + duration: 3000 + }); } - } - //7天免登录自动登录 - automaticLogin () { - let isNoLogin = localStorage.getItem("isnologin") - if (isNoLogin) { //7天免登录时 - let token = localStorage.getItem("token"); - let refreshToken = localStorage.getItem("refreshToken"); - this.http.post('/api/Account/RefreshToken', { - token: token, - refreshToken: refreshToken}).subscribe((data:any)=>{ - sessionStorage.setItem("level",data.level); - sessionStorage.setItem("token",data.token); - sessionStorage.setItem("refreshToken",data.refreshToken); - this.token.startUp() - this.router.navigate(['/keyUnit']) - this.snackBar.open('已自动登录', '确定', {duration: 3000}); - }) - } //if - - } - - //打开弹窗 - open () { - this.snackBar.open('请联系管理员', '确定', { - duration: 3000 - }); - } } @Component({ - selector: 'app-changepassword', - templateUrl: './changePassword.html', - styleUrls: ['./changepassword.scss'] + selector: 'app-changepassword', + templateUrl: './changePassword.html', + styleUrls: ['./changepassword.scss'] }) export class ChangepasswordComponent2 implements OnInit { - - constructor(private http:HttpClient,public snackBar: MatSnackBar, - public dialogRef: MatDialogRef) { } - - ngOnInit() { - } - errmsg :string = '' - - onSubmit(e){ - this.http.put( - '/api/Account/Password', - { - newPassword: e.newPassword, - password: 'SHya119!@' - } - ).subscribe(data=> { - this.dialogRef.close(data); - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('密码修改成功','确定',config); - },(err) => - {this.errmsg = err} - ) - } + + constructor(private http: HttpClient, public snackBar: MatSnackBar, + public dialogRef: MatDialogRef) { } + + ngOnInit() { + } + errmsg: string = '' + + onSubmit(e) { + this.http.put( + '/api/Account/Password', + { + newPassword: e.newPassword, + password: 'SHya119!@' + } + ).subscribe(data => { + this.dialogRef.close(data); + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('密码修改成功', '确定', config); + }, (err) => { this.errmsg = err } + ) + } diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index b17d918..25b1d60 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -1,10 +1,8 @@ import { Routes, RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; -import { HomeComponent } from './home/home.component'; -import { HomedetailComponent } from './homedetail/homedetail.component'; + const routes: Routes = [ - { path: '', component: HomeComponent}, - { path: 'detail', component: HomedetailComponent}, + ]; @NgModule({ diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index c56369e..8b13789 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -1 +1 @@ -

pages works!

+ diff --git a/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts b/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts index e38e736..e7b08f5 100644 --- a/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts +++ b/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts @@ -2,10 +2,12 @@ import { HttpClient } from '@angular/common/http'; import { Component, Input, OnInit } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { MatSnackBar } from '@angular/material/snack-bar'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap, IMarker } from '@src/modules/map/declare/map'; import Viewer from 'viewerjs' import { ViewDetailsComponent } from '../view-details/view-details.component'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-fireforce-audit', templateUrl: './fireforce-audit.component.html', @@ -37,16 +39,16 @@ export class FireforceAuditComponent implements OnInit { this.FireForceDetailInfo.RelevantInfomationData ? this.AttachmentArr = JSON.parse(this.FireForceDetailInfo.RelevantInfomationData) : null console.log(789,this.ZongcontactData) setTimeout(() => { - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom:18 }) if(this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){ this.map.setCenter([this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y]); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-10, -12) + offset: MapFactory.PixelInstance(-10, -12) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); @@ -56,8 +58,8 @@ export class FireforceAuditComponent implements OnInit { }, 0); } - map:any - newPositionMarker:any + map:IMap + newPositionMarker:IMarker newPositionMarkerContent:any = '
' + ' ' + diff --git a/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts b/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts index 8fbedf8..3ddc08d 100644 --- a/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts +++ b/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts @@ -4,8 +4,10 @@ import { ViewDetailsComponent } from '../view-details/view-details.component'; import Viewer from 'viewerjs' import { MatSnackBar } from '@angular/material/snack-bar'; import { MatDialog } from '@angular/material/dialog'; +import { MapFactory } from '@src/modules/map/declare/factory'; +import { IMap, IMarker } from '@src/modules/map/declare/map'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-linkageforces-audit', templateUrl: './linkageforces-audit.component.html', @@ -33,8 +35,8 @@ export class LinkageforcesAuditComponent implements OnInit { {id:14,name:'住建',imgUrl:'/assets/linkageForces/zhujian.png',isChecked:false} ] AttachmentArr:any//附件 - map:any - newPositionMarker:any + map:IMap + newPositionMarker:IMarker newPositionMarkerContent:any = '
' + ' ' + @@ -43,16 +45,16 @@ export class LinkageforcesAuditComponent implements OnInit { this.AttachmentArr = JSON.parse(this.LinkageForceDetailInfo.relevantInfomationData) this.LinkageForceDetailInfo.location ? null : this.LinkageForceDetailInfo.location={x:null,y:null} setTimeout(() => { - this.map = new AMap.Map('container', { + this.map = MapFactory.MapInstance('container', { zoom:18 }) if(this.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){ this.map.setCenter([this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y]); - this.newPositionMarker = new AMap.Marker({ + this.newPositionMarker = MapFactory.MarkerInstance({ position: [this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y], content: this.newPositionMarkerContent, - offset: new AMap.Pixel(-10, -12) + offset: MapFactory.PixelInstance(-10, -12) }) // 将 markers 添加到地图 this.map.add(this.newPositionMarker); diff --git a/src/app/plan-audit/plan-record/plan-record.component.html b/src/app/plan-audit/plan-record/plan-record.component.html index f61698a..518831f 100644 --- a/src/app/plan-audit/plan-record/plan-record.component.html +++ b/src/app/plan-audit/plan-record/plan-record.component.html @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-12-25 10:19:31 * @LastEditors: sueRimn - * @LastEditTime: 2021-04-21 15:24:43 + * @LastEditTime: 2021-07-08 09:25:11 -->
@@ -172,7 +172,7 @@
-
+
diff --git a/src/app/plan-audit/plan-record/plan-record.component.ts b/src/app/plan-audit/plan-record/plan-record.component.ts index 9e2024d..2b0e425 100644 --- a/src/app/plan-audit/plan-record/plan-record.component.ts +++ b/src/app/plan-audit/plan-record/plan-record.component.ts @@ -4,7 +4,7 @@ * @Author: sueRimn * @Date: 2020-12-25 10:19:31 * @LastEditors: sueRimn - * @LastEditTime: 2021-04-22 10:47:06 + * @LastEditTime: 2021-07-08 09:35:53 */ import { Component, OnInit, Inject } from '@angular/core'; import { FormControl } from '@angular/forms'; @@ -132,6 +132,7 @@ export class PlanRecordComponent implements OnInit { LinkageForceDetailInfo: any//需要传递给子组件的联动力量信息 fireForceDetailInfo: any//需要传递给子组件的消防力量信息 postlevel: any + bianzhi = false tableClick(e, item) { this.showtype = -1 //e.target.parentElement.bgColor='#2196F3' @@ -142,17 +143,20 @@ export class PlanRecordComponent implements OnInit { this.fetchUrl = '' this.viewer = {} if (item.contentType == 11) { + this.bianzhi = false window.setTimeout(() => { this.showtype = 3 sessionStorage.setItem('companyId', item.itemId) }, 0) } else if (item.contentType == 12) { + this.bianzhi = false //水源 this.http.get(`/api/WaterSources/${item.itemId}`).subscribe((data) => { this.waterData = data this.showtype = 12 }) } else if (item.contentType == 13) { + this.bianzhi = false //消防力量 this.http.get(`/api/CustomFireForce/${item.itemId}`).subscribe((data: any) => { if (data.forceType != 0) {//如果是其他消防力量 @@ -166,6 +170,7 @@ export class PlanRecordComponent implements OnInit { this.showtype = 13 }) } else if (item.contentType == 14) { + this.bianzhi = false //联动力量 this.http.get(`/api/LinkageForces/${item.itemId}`).subscribe((data: any) => { @@ -177,38 +182,46 @@ export class PlanRecordComponent implements OnInit { this.http.get(`/api/PlanComponents/${item.itemId}`).subscribe((data: any) => { this.companyId = data.companyId this.companyName = data.companyName - if (data.planType != 2 && data.planType != 1) { - this.fetchUrl = data.attachmentUrls[0] - var index = this.fetchUrl.indexOf("\/") - if (this.fetchUrl.substr(0, index) == 'psw') { - this.showtype = 1 - var obj = document.getElementById('viewer') - if (obj != null) { - obj.innerHTML = '' - } - window.setTimeout(() => { - this.viewer = new Viewer({ - container: document.querySelector('#viewer'), - panorama: '/api/Objects/PlanPlatform/' + this.fetchUrl, + if (data.planMode == 2) { + this.bianzhi = true + this.src = `/planManagement/createplanonlinefive?navIsOpen=false&companyId=${data.companyId}&planName=${data.name}&unitName=${data.companyName}&planCategory=${data.planCategory}&planId=${data.id}&unitTypeId=${data.company.buildingTypes[0].id}&orName=${data.company.organizationName}&orId=${data.company.organizationId}&pattern=false` + //this.src=`/keyUnit/viewunitinfoplan?id=${data.companyId}&orName=${data.company.organizationId}&orId=${data.company.organizationName}` + } else { + this.bianzhi = false + if (data.planType != 2 && data.planType != 1) { + this.fetchUrl = data.attachmentUrls[0] + var index = this.fetchUrl.indexOf("\/") + if (this.fetchUrl.substr(0, index) == 'psw') { + this.showtype = 1 + var obj = document.getElementById('viewer') + if (obj != null) { + obj.innerHTML = '' + } + window.setTimeout(() => { + this.viewer = new Viewer({ + container: document.querySelector('#viewer'), + panorama: '/api/Objects/PlanPlatform/' + this.fetchUrl, - }); - }) + }); + }) + } else { + this.lookWord() + } } else { - this.lookWord() - } - } else { - this.organizationName = item.organizationName - this.planData = data - this.handleData() - return + this.organizationName = item.organizationName + this.planData = data + this.handleData() + return - //this.src=`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1` - //this.iframeSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src); - //window.open(`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`) + //this.src=`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1` + //this.iframeSrc=this.sanitizer.bypassSecurityTrustResourceUrl(this.src); + //window.open(`/planAudit/planpass?id=${data.companyId}&companyName=${data.companyName}&auditPlanId=${data.id}&auditStatus=${data.auditStatus}&planType=1`) + } } + }) } @@ -232,13 +245,13 @@ export class PlanRecordComponent implements OnInit { //毕升 lookWord() { this.showtype = 0 - let src + let src let suffix = this.fetchUrl.split('.')[this.fetchUrl.split('.').length - 1].toLowerCase() if (suffix == 'docx' || suffix == 'doc') { let arr = this.fetchUrl.split('.') arr[arr.length - 1] = 'pdf' - src = `/api/Objects/PlanPlatform/` + arr.join('.') - }else if (suffix == 'pdf') { + src = `/api/Objects/PlanPlatform/` + arr.join('.') + } else if (suffix == 'pdf') { src = `/api/Objects/PlanPlatform/` + this.fetchUrl } this.iframeSrc = this.sanitizer.bypassSecurityTrustResourceUrl(src); diff --git a/src/app/plan-audit/wait-examineer/wait-examineer.component.html b/src/app/plan-audit/wait-examineer/wait-examineer.component.html index c0127ca..c634c4a 100644 --- a/src/app/plan-audit/wait-examineer/wait-examineer.component.html +++ b/src/app/plan-audit/wait-examineer/wait-examineer.component.html @@ -91,7 +91,7 @@
+ *ngIf="showtype == 0||bianzhi">查看详情