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 =
+ ``
+ // 创建一个自定义内容的 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 =
- ``
- // 创建一个自定义内容的 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 = `