From 078c69cf58b5cd541394e3e323b73ad182a4d202 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Wed, 15 Mar 2023 09:19:06 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=AE=8C=E5=96=84=E8=BE=93?= =?UTF-8?q?=E5=85=A5=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- proxy.config.json | 2 +- .../gis-labeling/gis-labeling.component.html | 411 +- .../gis-labeling/gis-labeling.component.ts | 3917 +++++++++-------- .../gis-management/gis-management.module.ts | 267 +- 4 files changed, 2536 insertions(+), 2061 deletions(-) diff --git a/proxy.config.json b/proxy.config.json index 040b81f..e7ec4d2 100644 --- a/proxy.config.json +++ b/proxy.config.json @@ -1,6 +1,6 @@ { "/api": { - "target": "http://10.81.73.39:8000/", + "target": "http://121.36.37.70:8201/", "secure": false, "changeOrigin": true } diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.html b/src/app/gis-management/gis-labeling/gis-labeling.component.html index 6561c06..92b9347 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.html +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.html @@ -1,4 +1,3 @@ -
@@ -27,35 +26,43 @@
- +
import_export
- - - - + + + + {{item.district}} {{item.name}} + + +
- - - - + + + + {{item.district}} {{item.name}} + + +
- +
- - + +
@@ -64,7 +71,8 @@

起

-
+

←

↑

→

@@ -81,207 +89,218 @@
- +
- - + +
- -
-
- - {{item.name}} -
+ +
+
+ + {{item.name}}
+
-
-
-
-
- 全选 - clear -
-
- - {{keyUnitList[i].name}} - -
-
-
- 显示范围 : - - - -
- - - -
- -
-
-
-
-
- 全选 - clear -
-
- - {{waterList[i].name}} - -
-
-
- 显示范围 : - - - -
- - - -
- -
-
-
-
-
- 全选 - clear -
-
- - {{fireForceList[i].name}} - -
-
-
- 显示范围 : - - - -
- - - +
+
+ +
+ 全选 + clear +
+
+ + {{keyUnitList[i].name}} + +
+
+
+ 显示范围 : + + +
- - -
-
-
-
- 全选 - clear + + + +
+ +
+
+
+
+
+ 全选 + clear +
+
+ + {{waterList[i].name}} + +
+
+
+ 显示范围 : + + +
-
- - {{linkageForcesList[i].name}} - + + + +
+ + +
+
+
+
+ 全选 + clear +
+
+ + {{fireForceList[i].name}} + +
+
+
+ 显示范围 : + + +
-
-
- 显示范围 : - - - -
- - - + + + +
+ + +
+
+
+
+ 全选 + clear +
+
+ + {{linkageForcesList[i].name}} + +
+
+
+ 显示范围 : + + +
- - + + + +
+ + +
+
+
+  距离测量 +  面积测量
-
-
-  距离测量 -  面积测量 + +
+
+
+ 图层 +
+ 卫星图层 + 路网图层 + clear
-
-
-
- 图层 -
- 卫星图层 - 路网图层 - clear -
+
+
+ + 2D
-
-
- - 2D -
-
- - 3D -
+
+ + 3D
-
-
-
- -
+
+
+ +
\ No newline at end of file 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 58a45d4..0bfd40c 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -1,438 +1,519 @@ -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 { 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' +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 { + 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 - }) - 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) - }); - 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); - }); - return this.fb.array(arr); - } - //构造水源checkbox控制器 - waterUnits() { - const arr = this.waterList.map(item => { - return this.fb.control(item.selected); + 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; }); - return this.fb.array(arr); - } - //构造消防力量checkbox控制器 - fireForceController() { - const arr = this.fireForceList.map(item => { - return this.fb.control(item.selected); + 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); }); - return this.fb.array(arr); - } - //构造联动力量checkbox控制器 - linkageForcesController() { - const arr = this.linkageForcesList.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); - } + this.selectedWaterList = selects; + }); - //初始化获取勾选项 - 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, - }) - //地图范围圆圈---水源 - circleofwater: ICircle = MapFactory.CircleInstance({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#ee2200', - zIndex: 50, - }) - //地图范围圆圈---消防力量 - circleoffireForce: ICircle = MapFactory.CircleInstance({ - center: null, - radius: 0, //半径 - strokeOpacity: 1, - fillOpacity: 0.4, - strokeStyle: 'dashed', - strokeDasharray: [10, 10], - // 线样式还支持 'dashed' - fillColor: '#e830cc', - zIndex: 50, - }) - //地图范围圆圈---联动力量 - circleoflinkageForces: ICircle = MapFactory.CircleInstance({ - 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 = 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) - }) - } - } - } - //创建单位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 - }) - }) - - 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); + 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); + }); + 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); + } + }); + 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, + }); + //地图范围圆圈---水源 + circleofwater: ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: "dashed", + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: "#ee2200", + zIndex: 50, + }); + //地图范围圆圈---消防力量 + circleoffireForce: ICircle = MapFactory.CircleInstance({ + center: null, + radius: 0, //半径 + strokeOpacity: 1, + fillOpacity: 0.4, + strokeStyle: "dashed", + strokeDasharray: [10, 10], + // 线样式还支持 'dashed' + fillColor: "#e830cc", + zIndex: 50, + }); + //地图范围圆圈---联动力量 + circleoflinkageForces: ICircle = MapFactory.CircleInstance({ + 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 = 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"], }; - - render.contentNonRender = (src) => { - return ``; + 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"], }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - maxZoom: 15, - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.unitCluster.on('click', (e) => { - if (e.clusterData.length == 1) { - let item = e.clusterData[0].data - let markerContent = - `
-
${item.name}
+ 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); + }); + } + } + } + //创建单位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, + }); + }); + + 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.unitCluster = MapFactory.MarkerClusterInstance( + this.map, + unitMarkerArrcluster, + { + gridSize: gridSize, // 设置网格像素大小 + maxZoom: 15, + render: render, //自定义聚合点样式, 自定义非聚合点样式 + } + ); + this.unitCluster.on( + "click", + (e) => { + if (e.clusterData.length == 1) { + let item = e.clusterData[0].data; + let markerContent = `
+
${ + item.name + }
-
单位性质:
-
消防负责人:
+
单位性质:
+
消防负责人:
-
防火级别:
-
消防管理人:
+
防火级别:
+
消防管理人:
-
防火管辖:
-
防火监督员:
+
防火管辖:
+
防火监督员:
-
责任队站:
-
总建筑面积:
+
责任队站:
+
总建筑面积:
-
建筑信息分类:
-
总占地面积:
+
建筑信息分类:
+
总占地面积:
-
值班电话:
+
值班电话:
基本信息
@@ -441,817 +522,1004 @@ export class GisLabelingComponent implements OnInit {
查看预案
分享
-
` - // 创建一个自定义内容的 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) })//分享点击事件 +
`; + // 创建一个自定义内容的 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) - } - - setMaxZoom() { - this.unitCluster ? this.unitCluster.setMaxZoom(0) : null - - this.waterCluster ? this.waterCluster.setMaxZoom(0) : null - this.fireForceCluster ? this.fireForceCluster.setMaxZoom(0) : null - this.linkageForcesCluster ? this.linkageForcesCluster.setMaxZoom(0) : null - } - - //取消显示单位 - 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.renderer2.listen( + this.elementRef.nativeElement.querySelector("#route"), + "click", + (event) => { + this.route(item); } - 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) + ); //导航点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#fullViewNavigation"), + "click", + (event) => { + this.fullViewNavigation(item); } - 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) - }) + ); //全景漫游点击事件 + //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); } - } - } - //创建消防力量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' - } else { - image = '/assets/fireForcesMarkers/qita.png' + ); //查看预案点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#share"), + "click", + (event) => { + this.share(item); } - // 用于点集合的数组 - item.fireForceDetailInfo.location ? - fireForceMarkerArrcluster.push({ - lnglat: [item.fireForceDetailInfo.location.x, item.fireForceDetailInfo.location.y], - image: image, - data: item - }) : null - }) - - 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); + ); //分享点击事件 } - this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - maxZoom: 15, - render: render //自定义聚合点样式, 自定义非聚合点样式 + }, + this + ); + } + + setMaxZoom() { + this.unitCluster ? this.unitCluster.setMaxZoom(0) : null; + + this.waterCluster ? this.waterCluster.setMaxZoom(0) : null; + this.fireForceCluster ? this.fireForceCluster.setMaxZoom(0) : null; + this.linkageForcesCluster ? this.linkageForcesCluster.setMaxZoom(0) : null; + } + + //取消显示单位 + 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.http + .get("/api/CustomFireForce", { params: paramsdata }) + .subscribe((data: any) => { + this.createFireForceMarker(data); }); - - } - //取消消防力量 - 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) - }) - } - } - } - //创建联动力量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 - }) - } - // 用于点集合的数组 - }) - - 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); + } 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, }; - - render.contentNonRender = (src) => { - return ``; + 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, }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - - this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - maxZoom: 15, - render: render //自定义聚合点样式, 自定义非聚合点样式 + 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"; + } else { + image = "/assets/fireForcesMarkers/qita.png"; + } + // 用于点集合的数组 + item.fireForceDetailInfo.location + ? fireForceMarkerArrcluster.push({ + lnglat: [ + item.fireForceDetailInfo.location.x, + item.fireForceDetailInfo.location.y, + ], + image: image, + data: item, + }) + : null; + }); + + 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); + }; + this.fireForceCluster = MapFactory.MarkerClusterInstance( + this.map, + fireForceMarkerArrcluster, + { + gridSize: gridSize, // 设置网格像素大小 + maxZoom: 15, + 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); }); - - } - //取消联动力量 - 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); - } - } - } - } - //循环渲染出所有水源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 - }) - }) - - 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); + } 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, }; - - render.contentNonRender = (src) => { - return ``; + 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, }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - - // 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, // 设置网格像素大小 - maxZoom: 15, - render: render //自定义聚合点样式, 自定义非聚合点样式 + 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.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') - } - } - //全选水源 - selectedAllWater(event) { - if (event.checked) { - this.waters.controls.forEach(item => { item.setValue(true) }) + } + // 用于点集合的数组 + }); + + 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.linkageForcesCluster = MapFactory.MarkerClusterInstance( + this.map, + linkageForcesMarkerArrcluster, + { + gridSize: gridSize, // 设置网格像素大小 + maxZoom: 15, + 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 { - this.watertForm.reset() - this.watertForm.controls.areaWater.setValue('0') + 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 { + 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 { - this.fireForceForm.reset() - this.fireForceForm.controls.areaFireForce.setValue('0') + let config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请勾选想要显示的水源类型", "确定", config); } - } - //全选联动力量 - selectedAllLinkageForces(event) { - if (event.checked) { - this.linkageForces.controls.forEach(item => { item.setValue(true) }) - } else { - this.linkageForcesForm.reset() - this.linkageForcesForm.controls.areaLinkageForces.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, + }); + }); + + 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); + }; + + // 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, // 设置网格像素大小 + maxZoom: 15, + 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) { } - } - - - - - //右上角点击每一个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 } + }, + 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"); + } + } + //全选水源 + 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 = 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 设置 + }); + } + + //清空距离测量 + clearDistance() {} + + //清空面积测量 + clearArea() { + this.measureArea.close(true); + } + //合并测距和侧面积 + measure(type) { + switch (type) { + case "rule": { + this.mouseTool.rule({ + startMarkerOptions: { + //可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31), //图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png", + }), + }, + endMarkerOptions: { + //可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31), //图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png", + }), + offset: MapFactory.PixelInstance(-9, -31), + }, + midMarkerOptions: { + //可缺省 + icon: MapFactory.IconInstance({ + size: MapFactory.SizeInstance(19, 31), //图标大小 + imageSize: MapFactory.SizeInstance(19, 31), + image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png", + }), + offset: MapFactory.PixelInstance(-9, -31), + }, + lineOptions: { + //可缺省 + strokeStyle: "solid", + strokeColor: "#FF33FF", + strokeOpacity: 1, + strokeWeight: 2, + }, + //同 RangingTool 的 自定义 设置，缺省为默认样式 }); - 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; + } + case "measureArea": { + this.mouseTool.measureArea({ + strokeColor: "#80d8ff", + fillColor: "#80d8ff", + fillOpacity: 0.3, + //同 Polygon 的 Option 设置 }); - } - - //清空距离测量 - clearDistance() { - - } - - //清空面积测量 - clearArea() { - this.measureArea.close(true) - } - //合并测距和侧面积 - measure(type) { - switch (type) { - case 'rule': { - this.mouseTool.rule({ - startMarkerOptions: {//可缺省 - icon: MapFactory.IconInstance({ - size: MapFactory.SizeInstance(19, 31),//图标大小 - imageSize: MapFactory.SizeInstance(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png" - }) - }, - endMarkerOptions: {//可缺省 - icon: MapFactory.IconInstance({ - size: MapFactory.SizeInstance(19, 31),//图标大小 - imageSize: MapFactory.SizeInstance(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png" - }), - offset: MapFactory.PixelInstance(-9, -31) - }, - midMarkerOptions: {//可缺省 - icon: MapFactory.IconInstance({ - size: MapFactory.SizeInstance(19, 31),//图标大小 - imageSize: MapFactory.SizeInstance(19, 31), - image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png" - }), - offset: MapFactory.PixelInstance(-9, -31) - }, - lineOptions: {//可缺省 - strokeStyle: "solid", - strokeColor: "#FF33FF", - strokeOpacity: 1, - strokeWeight: 2 - } - //同 RangingTool 的 自定义 设置，缺省为默认样式 - }); - break; + break; + } + } + } + //合并清空 + clearnAll() { + this.mouseTool.close(true); + this.checkRadio = false; + } + + //搜索 + search() { + let that = this; + let placeSearch = MapFactory.PlaceSearchInstance(that); //构造地点查询类 + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + + this.allCompany = []; + let paramsdata: any = { Name: this.searchText || "" }; + this.http + .get("/api/Companies", { params: paramsdata }) + .subscribe((data: any) => { + if (data.items.length) { + //数据库api 搜索 + this.allCompany = data.items; + this.snackBar.open( + `搜索目标结果为${data.items.length}个`, + "确定", + config + ); + } else { + //高德api 搜索 + placeSearch.search(that.searchText, (status, result) => { + if (status != "complete") { + this.snackBar.open(`搜索目标结果为0个`, "确定", config); + console.log(status, result); + return; } - case 'measureArea': { - this.mouseTool.measureArea({ - strokeColor: '#80d8ff', - fillColor: '#80d8ff', - fillOpacity: 0.3 - //同 Polygon 的 Option 设置 - }); - break; + if (result.poiList.pois.length) { + let resultList = []; + result.poiList.pois.forEach((element: any) => { + let item = { + address: element.address, + buildingTypes: [], + id: null, + imageUrl: null, + location: { + x: element.location.lng, + y: element.location.lat, + }, + name: element.name, + }; + resultList.push(item); + }); + that.allCompany = resultList; + that.snackBar.open( + `搜索目标结果为${resultList.length}个`, + "确定", + config + ); + } else { + that.snackBar.open(`搜索目标结果为0个`, "确定", config); } + }); } - } - //合并清空 - clearnAll() { - this.mouseTool.close(true) - this.checkRadio = false - } - - //搜索 - search() { - let that = this - let placeSearch = MapFactory.PlaceSearchInstance(that); //构造地点查询类 - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000; - - this.allCompany = [] - let paramsdata: any = { Name: this.searchText || '' } - this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => { - if (data.items.length) { //数据库api 搜索 - this.allCompany = data.items - this.snackBar.open(`搜索目标结果为${data.items.length}个`, '确定', config); - } else { //高德api 搜索 - placeSearch.search(that.searchText, (status, result) => { - if (status != "complete") { - this.snackBar.open(`搜索目标结果为0个`, '确定', config); - console.log(status, result) - return - } - if (result.poiList.pois.length) { - let resultList = [] - result.poiList.pois.forEach((element: any) => { - let item = { - address: element.address, - buildingTypes: [], - id: null, - imageUrl: null, - location: { x: element.location.lng, y: element.location.lat }, - name: element.name - } - resultList.push(item) - }); - that.allCompany = resultList - that.snackBar.open(`搜索目标结果为${resultList.length}个`, '确定', config); - } else { - that.snackBar.open(`搜索目标结果为0个`, '确定', config); - } - }) - } + }); + } + + //清除 + clear() { + this.allCompany = []; + this.searchText = ""; + this.markers + ? this.markers.forEach((element, index) => { + this.map.remove(element); }) - } - - //清除 - clear() { - this.allCompany = [] - this.searchText = '' - this.markers ? this.markers.forEach((element, index) => { this.map.remove(element); }) : null - this.infoWindow ? this.map.remove(this.infoWindow) : null - } - - selectedUnit: any//当前打开的单位 - - //选择 单位 地图跳转 - //弹窗实例 - infoWindow: any - selectCompany(e) { - if (e.location && e.location.x && e.location.y) { - this.selectedUnit = e - this.markers.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点 - this.markers = [] - - let marker = MapFactory.MarkerInstance({ - map: this.map, - position: [e.location.x, e.location.y], // 基点位置, - }); - this.markers.push(marker) - - let markerContent = `
-
${e.name}
+ : null; + this.infoWindow ? this.map.remove(this.infoWindow) : null; + } + + selectedUnit: any; //当前打开的单位 + + //选择 单位 地图跳转 + //弹窗实例 + infoWindow: any; + selectCompany(e) { + if (e.location && e.location.x && e.location.y) { + this.selectedUnit = e; + this.markers.forEach((element, index) => { + this.map.remove(element); + }); //先删除所有标点 + this.markers = []; + + let marker = MapFactory.MarkerInstance({ + map: this.map, + position: [e.location.x, e.location.y], // 基点位置, + }); + this.markers.push(marker); + + let markerContent = `
+
${ + e.name + }
-
单位性质:
-
消防负责人:
+
单位性质:
+
消防负责人:
-
防火级别:
-
消防管理人:
+
防火级别:
+
消防管理人:
-
防火管辖:
-
防火监督员:
+
防火管辖:
+
防火监督员:
-
责任队站:
-
总建筑面积:
+
责任队站:
+
总建筑面积:
-
建筑信息分类:
-
总占地面积:
+
建筑信息分类:
+
总占地面积:
-
值班电话:
+
值班电话:
基本信息
@@ -1260,404 +1528,518 @@ export class GisLabelingComponent implements OnInit {
查看预案
分享
-
` - // 创建一个自定义内容的 infowindow 实例 - this.infoWindow = MapFactory.InfoWindowInstance({ - position: [e.location.x, e.location.y], - offset: MapFactory.PixelInstance(0, -30), - content: markerContent, - }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 - //this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 - marker.on('click', (ev) => { //marker点击事件 - this.infoWindow = MapFactory.InfoWindowInstance({ - position: [e.location.x, e.location.y], - offset: MapFactory.PixelInstance(0, -30), - content: markerContent, - }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 - //this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 - }) - this.map.setZoomAndCenter(15, [marker._position[0], marker._position[1]]); //设置地图中心点 - this.allCompany = [] - } else { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('请完善单位地理位置', '确定', config); +
`; + // 创建一个自定义内容的 infowindow 实例 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [e.location.x, e.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, + }); + this.infoWindow.open(this.map); + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#baseInformation"), + "click", + (event) => { + this.baseInformation(e); } - } - - //基本信息 - baseInformation(e) { - if (!e.id) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('暂无单位数据', '确定', config); - return + ); //基本信息点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#route"), + "click", + (event) => { + this.route(e); } - this.leftDivState = true - this.showLeftDiv = true - this.appLeft.selectBaseInfo(e) //调用子组件方法 - } - - //导航 - route(e) { - this.leftDivState = false - this.showLeftDiv = false - this.isShowRouteGIS = true - this.routeEnd = e.name - this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y) - } - - //全景漫游 - fullViewNavigation(e) { - console.log(e, '全景漫游') - } - - //三维场景 - threeeScene(e) { - window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/') - } - - //查看预案 - seePlan(e) { - if (!e.id) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('暂无单位数据', '确定', config); - return - } - let data = e - let dialogRef = this.dialog.open(LookPlanDialog, {//调用open方法打开对话框并且携带参数过去 - width: '1400px', - height: '800px', - id: 'lookPlanDialog', - data - }); - dialogRef.afterClosed().subscribe((data) => { - - }); - } - - //分享 - share(e) { - if (!e.id) { - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('暂无单位数据', '确定', config); - return + ); //导航点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#fullViewNavigation"), + "click", + (event) => { + this.fullViewNavigation(e); } - let data = { - url: 'https://', - buildingType: e.buildingTypes.length ? e.buildingTypes[0].name : null, - address: e.address + ); //全景漫游点击事件 + //this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#seePlan"), + "click", + (event) => { + this.seePlan(e); } - let dialogRef = this.dialog.open(ShareUrlDialog, {//调用open方法打开对话框并且携带参数过去 - width: '540px', - height: '596px', - id: 'shareDialog', - data - }); - dialogRef.afterClosed().subscribe((data) => { - - }); - } - - //导航路线 - isShowRouteGIS: boolean = false; //导航路线 显隐 - routeStart: any; //起点 - routeStartList: any = [] //起点 搜索结果 - routeEnd: any; //终点 - routeEndList: any = [] //终点 搜索结果 - timeout: any; //延时器 - routeGIS: IDriving; //查询结果 规划路线 - selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵 - - //关闭导航路线 - closeRouteGIS() { - this.isShowRouteGIS = false - } - - //输入框 输入事件 - routeChange(e) { - let that = this - window.clearTimeout(this.timeout) - this.timeout = window.setTimeout(() => { - that.map.getCity(function (info) { //获取当前 city - var autoOptions = { city: info.city } - let keywords - e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = MapFactory.AutocompleteInstance(autoOptions, that); - autoComplete.search(keywords, function (status, result) { - console.log(result) - if (result && result.tips && result.tips.length) { //搜索到数据时 - that._ngZone.run(() => { - if (e == 0) {//起点 - that.routeStartList = result.tips - if (result.tips.length != 0) { - for (let index = 0; index < result.tips.length; index++) { - const element = result.tips[index]; - if (element.location) { - that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) - return - } - } - } - } else {//终点 - that.routeEndList = result.tips - that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) - } - }); - - } //if - }) - }); //获取当前 city - - }, 500) - } - - //清空导航输入框 - deleteSearchGIS(e) { - if (e == 0) { - this.routeStart = null - this.routeStartList = [] - this.startCoordinate = null - } else { - this.routeEnd = null - this.routeEndList = [] - this.endCoordinate = null + ); //查看预案点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#share"), + "click", + (event) => { + this.share(e); } - } - - //清除路线 - clearGISRoute() { - this.routeStart = null - this.routeStartList = [] - this.routeEnd = null - this.routeEndList = [] - this.startCoordinate = null - this.endCoordinate = null - this.routeGIS ? this.routeGIS.clear() : null - this.routes = { distance: 0, time: 0, steps: [], } - this.map.setZoomAndCenter(15, [this.selectedUnit.location.x, this.selectedUnit.location.y]); //设置地图中心点 - } - - //交换起始点 - exchangeGISRoute() { - let data = this.routeStart - this.routeStart = this.routeEnd - this.routeEnd = data - this.routeStartList = [] - this.routeEndList = [] - let data2 = this.startCoordinate - this.startCoordinate = this.endCoordinate - this.endCoordinate = data2 - } - - routes: any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 - - startCoordinate: any//开始坐标 - endCoordinate: any//结束坐标 - - //导航查询 - queryGISRoute() { - //构造路线导航类 - let that = this - this.selectType = true - this.routeGIS ? this.routeGIS.clear() : null - this.routeGIS = MapFactory.DrivingInstance({ - map: this.map, + ); //分享点击事件 + marker.on("click", (ev) => { + //marker点击事件 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [e.location.x, e.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, }); - if (!this.startCoordinate) { - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('未查询到起点坐标信息，请输入有效地址', '确定', config); - return - } else if (!this.endCoordinate) { - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config); - return - } else { - this.routeGIS.search(this, this.startCoordinate, this.endCoordinate, - function (status, result) { - if (status === 'complete') { - that.routes = result.routes[0] - } else { alert('获取驾驶规划路线失败') } + this.infoWindow.open(this.map); + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#baseInformation"), + "click", + (event) => { + this.baseInformation(e); + } + ); //基本信息点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#route"), + "click", + (event) => { + this.route(e); + } + ); //导航点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#fullViewNavigation"), + "click", + (event) => { + this.fullViewNavigation(e); + } + ); //全景漫游点击事件 + //this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#seePlan"), + "click", + (event) => { + this.seePlan(e); + } + ); //查看预案点击事件 + this.renderer2.listen( + this.elementRef.nativeElement.querySelector("#share"), + "click", + (event) => { + this.share(e); + } + ); //分享点击事件 + }); + this.map.setZoomAndCenter(15, [marker._position[0], marker._position[1]]); //设置地图中心点 + this.allCompany = []; + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("请完善单位地理位置", "确定", config); + } + } + + //基本信息 + baseInformation(e) { + if (!e.id) { + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("暂无单位数据", "确定", config); + return; + } + this.leftDivState = true; + this.showLeftDiv = true; + this.appLeft.selectBaseInfo(e); //调用子组件方法 + } + + //导航 + route(e) { + this.leftDivState = false; + this.showLeftDiv = false; + this.isShowRouteGIS = true; + this.routeEnd = e.name; + this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y); + } + + //全景漫游 + fullViewNavigation(e) { + console.log(e, "全景漫游"); + } + + //三维场景 + threeeScene(e) { + window.open( + "http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/" + ); + } + + //查看预案 + seePlan(e) { + if (!e.id) { + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("暂无单位数据", "确定", config); + return; + } + let data = e; + let dialogRef = this.dialog.open(LookPlanDialog, { + //调用open方法打开对话框并且携带参数过去 + width: "1400px", + height: "800px", + id: "lookPlanDialog", + data, + }); + dialogRef.afterClosed().subscribe((data) => {}); + } + + //分享 + share(e) { + if (!e.id) { + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("暂无单位数据", "确定", config); + return; + } + let data = { + url: "https://", + buildingType: e.buildingTypes.length ? e.buildingTypes[0].name : null, + address: e.address, + }; + let dialogRef = this.dialog.open(ShareUrlDialog, { + //调用open方法打开对话框并且携带参数过去 + width: "540px", + height: "596px", + id: "shareDialog", + data, + }); + dialogRef.afterClosed().subscribe((data) => {}); + } + + //导航路线 + isShowRouteGIS: boolean = false; //导航路线 显隐 + routeStart: any; //起点 + routeStartList: any = []; //起点 搜索结果 + routeEnd: any; //终点 + routeEndList: any = []; //终点 搜索结果 + timeout: any; //延时器 + routeGIS: IDriving; //查询结果 规划路线 + selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵 + + //关闭导航路线 + closeRouteGIS() { + this.isShowRouteGIS = false; + } + + //输入框 输入事件 + routeChange(e) { + let that = this; + window.clearTimeout(this.timeout); + this.timeout = window.setTimeout(() => { + that.map.getCity(function (info) { + //获取当前 city + var autoOptions = { city: info.city }; + let keywords; + e == 0 ? (keywords = that.routeStart) : (keywords = that.routeEnd); + var autoComplete = MapFactory.AutocompleteInstance(autoOptions, that); + autoComplete.search(keywords, (status, result) => { + console.log(result); + + if (result && result.tips && result.tips.length) { + //搜索到数据时 + that._ngZone.run(() => { + if (e == 0) { + //起点 + console.log("走这里了吗1"); + console.log("走这里了吗2", that.routeStartList); + that.routeStartList = []; + setTimeout(() => { + + that.routeStartList = [...result.tips]; + + console.log("走这里了吗3", that.routeStartList); + }, 0); + + if (result.tips.length != 0) { + for (let index = 0; index < result.tips.length; index++) { + const element = result.tips[index]; + if (element.location) { + that.startCoordinate = MapFactory.LngLatInstance( + element.location.lng, + element.location.lat + ); + return; + } + } } - ); - } - - } - - //切换 导航模式 推荐方案/躲避拥堵 - toggleRoute(e) { - let that = this - if (this.selectType != e) { - this.selectType = e - this.routeGIS ? this.routeGIS.clear() : null - this.routeGIS = MapFactory.DrivingInstance({ - map: this.map, - policy: e == true ? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC + } else { + //终点 + that.routeEndList = result.tips; + that.endCoordinate = MapFactory.LngLatInstance( + result.tips[0].location.lng, + result.tips[0].location.lat + ); + } }); - // 根据起终点名称规划驾车导航路线 - - this.routeGIS.search(this, this.startCoordinate, this.endCoordinate, - function (status, result) { - if (status === 'complete') { - that.routes = result.routes[0] - } else { alert('获取驾驶规划路线失败') } - } - ); + } //if + }); + }); //获取当前 city + }, 500); + } + + //清空导航输入框 + deleteSearchGIS(e) { + if (e == 0) { + this.routeStart = null; + this.routeStartList = []; + this.startCoordinate = null; + } else { + this.routeEnd = null; + this.routeEndList = []; + this.endCoordinate = null; + } + } + + //清除路线 + clearGISRoute() { + this.routeStart = null; + this.routeStartList = []; + this.routeEnd = null; + this.routeEndList = []; + this.startCoordinate = null; + this.endCoordinate = null; + this.routeGIS ? this.routeGIS.clear() : null; + this.routes = { distance: 0, time: 0, steps: [] }; + this.map.setZoomAndCenter(15, [ + this.selectedUnit.location.x, + this.selectedUnit.location.y, + ]); //设置地图中心点 + } + + //交换起始点 + exchangeGISRoute() { + let data = this.routeStart; + this.routeStart = this.routeEnd; + this.routeEnd = data; + this.routeStartList = []; + this.routeEndList = []; + let data2 = this.startCoordinate; + this.startCoordinate = this.endCoordinate; + this.endCoordinate = data2; + } + + routes: any = { distance: 0, time: 0, steps: [] }; //导航查询结果 路线规划 + + startCoordinate: any; //开始坐标 + endCoordinate: any; //结束坐标 + + //导航查询 + queryGISRoute() { + //构造路线导航类 + let that = this; + this.selectType = true; + this.routeGIS ? this.routeGIS.clear() : null; + this.routeGIS = MapFactory.DrivingInstance({ + map: this.map, + }); + if (!this.startCoordinate) { + let config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open( + "未查询到起点坐标信息，请输入有效地址", + "确定", + config + ); + return; + } else if (!this.endCoordinate) { + let config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open( + "未查询到终点坐标信息，请输入有效地址", + "确定", + config + ); + return; + } else { + console.log("起点坐标", this.startCoordinate); + console.log("重点坐标", this.endCoordinate); + this.routeGIS.search( + this, + this.startCoordinate, + this.endCoordinate, + function (status, result) { + if (status === "complete") { + that.routes = result.routes[0]; + } else { + alert("获取驾驶规划路线失败"); + } } + ); + } + } + + //切换 导航模式 推荐方案/躲避拥堵 + toggleRoute(e) { + let that = this; + if (this.selectType != e) { + this.selectType = e; + this.routeGIS ? this.routeGIS.clear() : null; + this.routeGIS = MapFactory.DrivingInstance({ + map: this.map, + policy: + e == true + ? AMap.DrivingPolicy.LEAST_TIME + : AMap.DrivingPolicy.REAL_TRAFFIC, + }); + // 根据起终点名称规划驾车导航路线 + + this.routeGIS.search( + this, + this.startCoordinate, + this.endCoordinate, + function (status, result) { + if (status === "complete") { + that.routes = result.routes[0]; + } else { + alert("获取驾驶规划路线失败"); + } + } + ); } - - - + } } - - //分享 @Component({ - selector: 'shareUrl-dialog', - templateUrl: './shareUrl.html', - styleUrls: ['./shareUrl.scss'] + selector: "shareUrl-dialog", + templateUrl: "./shareUrl.html", + styleUrls: ["./shareUrl.scss"], }) export class ShareUrlDialog { - - constructor(public http: HttpClient, public snackBar: MatSnackBar, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2) { } - - selectetime: any = [{ id: 0, name: '今日有效' }, { id: 1, name: '本周有效' }, { id: 2, name: '本月有效' }, { id: 3, name: '仅一次有效' }] - selectedTimeIndex = 0 - ngOnInit() { - this.makeCode() - } - //生成二维码 - qrCode - makeCode() { - this.qrCode = new QRCode(document.getElementById("qrcode"), { - text: this.data.url || "", - width: 200, - height: 200, - colorDark: "#000000", - colorLight: "#ffffff", - correctLevel: QRCode.CorrectLevel.H - }); - } - //下载二维码 - downloadFile() { - let canvas = this.qrCode._el.querySelector("canvas") - var base64Text = canvas.toDataURL("image/png"); - let url = base64Text //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - link.setAttribute("download", '二维码'); - document.body.appendChild(link); - link.click(); - } - //复制链接 - copyUrl() { - var copyTest = this.data.url - var inputTest = document.createElement('input') - inputTest.value = copyTest - document.body.appendChild(inputTest) - inputTest.select() - document.execCommand('Copy') - inputTest.className = 'oInput' - inputTest.style.display = 'none' - const config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('复制链接成功', '确定', config); - } - selectedTime(index) { - if (this.selectedTimeIndex != index) { - this.selectedTimeIndex = index - this.qrCode.clear(); - if (index == 0) {//如果今日有效 - console.log("今日") - } - if (index == 1) {//如果本周有效 - console.log("本周") - this.qrCode.makeCode("http://www.w3cschool.cc") - } - if (index == 2) {//如果本月有效 - console.log("本月") - } - if (index == 3) {//如果仅一次有效 - console.log("一次") - } - } - } - //关闭 - closeDiv() { - this.dialogRef.close() - } + constructor( + public http: HttpClient, + public snackBar: MatSnackBar, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, + private render2: Renderer2 + ) {} + + selectetime: any = [ + { id: 0, name: "今日有效" }, + { id: 1, name: "本周有效" }, + { id: 2, name: "本月有效" }, + { id: 3, name: "仅一次有效" }, + ]; + selectedTimeIndex = 0; + ngOnInit() { + this.makeCode(); + } + //生成二维码 + qrCode; + makeCode() { + this.qrCode = new QRCode(document.getElementById("qrcode"), { + text: this.data.url || "", + width: 200, + height: 200, + colorDark: "#000000", + colorLight: "#ffffff", + correctLevel: QRCode.CorrectLevel.H, + }); + } + //下载二维码 + downloadFile() { + let canvas = this.qrCode._el.querySelector("canvas"); + var base64Text = canvas.toDataURL("image/png"); + let url = base64Text; //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + link.setAttribute("download", "二维码"); + document.body.appendChild(link); + link.click(); + } + //复制链接 + copyUrl() { + var copyTest = this.data.url; + var inputTest = document.createElement("input"); + inputTest.value = copyTest; + document.body.appendChild(inputTest); + inputTest.select(); + document.execCommand("Copy"); + inputTest.className = "oInput"; + inputTest.style.display = "none"; + const config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("复制链接成功", "确定", config); + } + selectedTime(index) { + if (this.selectedTimeIndex != index) { + this.selectedTimeIndex = index; + this.qrCode.clear(); + if (index == 0) { + //如果今日有效 + console.log("今日"); + } + if (index == 1) { + //如果本周有效 + console.log("本周"); + this.qrCode.makeCode("http://www.w3cschool.cc"); + } + if (index == 2) { + //如果本月有效 + console.log("本月"); + } + if (index == 3) { + //如果仅一次有效 + console.log("一次"); + } + } + } + //关闭 + closeDiv() { + this.dialogRef.close(); + } } - - //查看预案 @Component({ - selector: 'lookPlan-dialog', - templateUrl: './lookPlan.html', - styleUrls: ['./lookPlan.scss'] + selector: "lookPlan-dialog", + templateUrl: "./lookPlan.html", + styleUrls: ["./lookPlan.scss"], }) export class LookPlanDialog { - - constructor(public http: HttpClient, public snackBar: MatSnackBar, - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog) { } - - - ngOnInit() { - sessionStorage.setItem("companyId", this.data.id || "") - this.getAllPlans() - } - //关闭弹窗 - closeDiv() { - this.dialogRef.close() - } - //查看单位详情 - lookUnitDetails() { - window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`) - } - //获得所有预案组件 - allPlanComponents: any//所有预案组件 - getAllPlans() { - let paramsData: any = { - companyId: this.data.id, - pageNumber: 1, - pageSize: "100", - sort: "" - } - this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => { - this.allPlanComponents = data.items - }) - } - //查看预案 - lookPlan(e) { - /* if (e.planMode == 0) { + constructor( + public http: HttpClient, + public snackBar: MatSnackBar, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, + private render2: Renderer2, + public dialog: MatDialog + ) {} + + ngOnInit() { + sessionStorage.setItem("companyId", this.data.id || ""); + this.getAllPlans(); + } + //关闭弹窗 + closeDiv() { + this.dialogRef.close(); + } + //查看单位详情 + lookUnitDetails() { + window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`); + } + //获得所有预案组件 + allPlanComponents: any; //所有预案组件 + getAllPlans() { + let paramsData: any = { + companyId: this.data.id, + pageNumber: 1, + pageSize: "100", + sort: "", + }; + this.http + .get("/api/PlanComponents", { params: paramsData }) + .subscribe((data: any) => { + this.allPlanComponents = data.items; + }); + } + //查看预案 + lookPlan(e) { + /* if (e.planMode == 0) { const config = new MatSnackBarConfig(); config.verticalPosition = 'top'; config.duration = 3000 @@ -1691,197 +2073,238 @@ export class LookPlanDialog { } } } */ - let companyId = sessionStorage.getItem("companyId") - if (e.planType == 16 || e.planType == 4 || e.planType == 8) { - if (e.planType == 16 && e.attachmentUrls == null) { - window.open(`/planManagement/createplanonlinefive?navIsOpen=false&companyId=${companyId}&planName=${e.name}&unitName=${this.data.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${this.data.buildingTypes[0].id}&orName=${this.data.organizationName}&pattern=false`) - } else { - var index = e.attachmentUrls[0].indexOf("\/") - let fetchUrl = e.attachmentUrls[0] - //console.log(fetchUrl) - if (fetchUrl) { - let suffix = fetchUrl.split('.')[fetchUrl.split('.').length - 1].toLowerCase() - if (suffix == 'docx' || suffix == 'doc') { - let arr = fetchUrl.split('.') - arr[arr.length - 1] = 'pdf' - window.open(`/api/Objects/PlanPlatform/` + arr.join('.')) - } else if (suffix == 'pdf') { - window.open(`/api/Objects/PlanPlatform/` + fetchUrl) - } else { - let config = new MatSnackBarConfig(); - config.verticalPosition = 'top'; - config.duration = 3000 - this.snackBar.open('该文件类型暂不支持在线查看', '确定', config); - } - } - - } - - } - if (e.planType == 1) { //如果是在线编辑 - let id = e.id - console.log(e) - let companyId = sessionStorage.getItem("companyId") - sessionStorage.setItem("companyName", this.data.name) - sessionStorage.setItem("companyId", companyId) - sessionStorage.setItem("planId", id) - sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id) - sessionStorage.setItem("editable", "0") - sessionStorage.setItem("planName", e.name) - - window.open(`/keyUnit/viewunitinfoplan?id=${companyId}&orName=${this.data.organizationName}&orId=${this.data.organizationId}`) + let companyId = sessionStorage.getItem("companyId"); + if (e.planType == 16 || e.planType == 4 || e.planType == 8) { + if (e.planType == 16 && e.attachmentUrls == null) { + window.open( + `/planManagement/createplanonlinefive?navIsOpen=false&companyId=${companyId}&planName=${e.name}&unitName=${this.data.name}&planCategory=${e.planCategory}&planId=${e.id}&unitTypeId=${this.data.buildingTypes[0].id}&orName=${this.data.organizationName}&pattern=false` + ); + } else { + var index = e.attachmentUrls[0].indexOf("/"); + let fetchUrl = e.attachmentUrls[0]; + //console.log(fetchUrl) + if (fetchUrl) { + let suffix = fetchUrl + .split(".") + [fetchUrl.split(".").length - 1].toLowerCase(); + if (suffix == "docx" || suffix == "doc") { + let arr = fetchUrl.split("."); + arr[arr.length - 1] = "pdf"; + window.open(`/api/Objects/PlanPlatform/` + arr.join(".")); + } else if (suffix == "pdf") { + window.open(`/api/Objects/PlanPlatform/` + fetchUrl); + } else { + let config = new MatSnackBarConfig(); + config.verticalPosition = "top"; + config.duration = 3000; + this.snackBar.open("该文件类型暂不支持在线查看", "确定", config); + } } - if (e.planType == 2) { //如果是跳转网页 - if (e.url.indexOf('app') == 0) { - window.location.href = e.url - } else { - sessionStorage.setItem("url", e.url) - if ((e.url as string).includes('gis/threeDimensionalHome')) { //三维预案 - window.open(`${e.url}?unitId=${this.data.id}&unitName=${this.data.name}&editMode=false`) - } else { - window.open(`/planManagement/webLook`) - } - } + } + } + if (e.planType == 1) { + //如果是在线编辑 + let id = e.id; + console.log(e); + let companyId = sessionStorage.getItem("companyId"); + sessionStorage.setItem("companyName", this.data.name); + sessionStorage.setItem("companyId", companyId); + sessionStorage.setItem("planId", id); + sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id); + sessionStorage.setItem("editable", "0"); + sessionStorage.setItem("planName", e.name); + + window.open( + `/keyUnit/viewunitinfoplan?id=${companyId}&orName=${this.data.organizationName}&orId=${this.data.organizationId}` + ); + } + if (e.planType == 2) { + //如果是跳转网页 + if (e.url.indexOf("app") == 0) { + window.location.href = e.url; + } else { + sessionStorage.setItem("url", e.url); + if ((e.url as string).includes("gis/threeDimensionalHome")) { + //三维预案 + window.open( + `${e.url}?unitId=${this.data.id}&unitName=${this.data.name}&editMode=false` + ); + } else { + window.open(`/planManagement/webLook`); } - } - - //点击下载 - readFile(element) { - this.uploadFileLonging = element - let data = element - const dialogRef = this.dialog.open(DownloadFile, { - width: "435px", - data + } + } + } + + //点击下载 + readFile(element) { + this.uploadFileLonging = element; + let data = element; + const dialogRef = this.dialog.open(DownloadFile, { + width: "435px", + data, + }); + dialogRef.afterClosed().subscribe((data) => { + if (data) { + this.downloadFileName = data.fileName; + this.download = data; + this.downloadFile(); + } + }); + } + + //下载↓ + selectDownloadFile: any; //选择下载的文件 + download: any; //下载文件元数据 + downloadFileName: any; //下载文件的文件名 + downloadisLoading: boolean = false; //进度条loading是否加载 + downloadProgress: number = 0; //进度条进度 + + uploadFileLonging: any; + downloadFile() { + this.downloadProgress = 0; + let file = this.download; + let fileSize = file.fileLength; //下载文件的总大小 + let shardSize = 10 * 1024 * 1024; //文件大小是否大于10MB + + if (file && fileSize <= shardSize) { + //<=10MB时直接下载 + this.downloadisLoading = true; + this.http + .get(`/api/Objects/PlanPlatform/${file.objectName}`, { + responseType: "blob", + }) + .subscribe((data) => { + let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + let suffix = file.objectName.substring( + file.objectName.lastIndexOf(".") + 1, + file.objectName.length + ); + link.setAttribute( + "download", + file.fileName + ? file.fileName + : this.data.name + + "-" + + this.uploadFileLonging.name + + "." + + suffix + ); + document.body.appendChild(link); + link.click(); + this.downloadisLoading = false; }); - dialogRef.afterClosed().subscribe( - data => { - if (data) { - this.downloadFileName = data.fileName - this.download = data - this.downloadFile() - } - } + } else if (file && fileSize > shardSize) { + //>10MB时分块下载 + this.blockingDownload(); //分段下载 + this.downloadisLoading = true; + } + } + //分段下载并合并 + async blockingDownload() { + let file = this.download; + let fileSize = file.fileLength; //下载文件的总大小 + let shardSize = 3 * 1024 * 1024; //3MB一个分片 + let allSlice = Math.ceil(fileSize / shardSize); //总文件/3MB===共分多少段 + let allFile: any = []; //所有的file分段 + + for (let i = 0; i < allSlice; i++) { + let start = i * shardSize; //每次下载文件开始位置 + let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止 + + let result = await new Promise((result, reject) => { + this.http + .get(`/api/Objects/PlanPlatform/${file.objectName}`, { + headers: { range: `bytes= ${start}-${end}` }, + responseType: "blob", + }) + .subscribe((data) => { + result(data); + }); + }); + allFile.push(result); + + if (allFile.length === allSlice) { + //合并文件输出给浏览器 + let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址 + let link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + let suffix = file.objectName.substring( + file.objectName.lastIndexOf(".") + 1, + file.objectName.length ); - } - - //下载↓ - selectDownloadFile: any; //选择下载的文件 - download: any; //下载文件元数据 - downloadFileName: any //下载文件的文件名 - downloadisLoading: boolean = false; //进度条loading是否加载 - downloadProgress: number = 0; //进度条进度 - - uploadFileLonging: any - downloadFile() { - this.downloadProgress = 0 - let file = this.download - let fileSize = file.fileLength//下载文件的总大小 - let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB - - if (file && fileSize <= shardSize) { //<=10MB时直接下载 - this.downloadisLoading = true - this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { responseType: 'blob' },).subscribe(data => { - let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length); - link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" + this.uploadFileLonging.name + "." + suffix); - document.body.appendChild(link); - link.click(); - this.downloadisLoading = false - }) - } else if (file && fileSize > shardSize) { //>10MB时分块下载 - this.blockingDownload() //分段下载 - this.downloadisLoading = true - } - } - //分段下载并合并 - async blockingDownload() { - let file = this.download - let fileSize = file.fileLength //下载文件的总大小 - let shardSize = 3 * 1024 * 1024 //3MB一个分片 - let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段 - let allFile: any = [] //所有的file分段 - - for (let i = 0; i < allSlice; i++) { - let start = i * shardSize //每次下载文件开始位置 - let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止 - - let result = await new Promise((result, reject) => { - this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { headers: { 'range': `bytes= ${start}-${end}` }, responseType: 'blob' }).subscribe(data => { - result(data) - }) - }) - allFile.push(result) - - - - if (allFile.length === allSlice) { //合并文件输出给浏览器 - let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址 - let link = document.createElement("a"); - link.style.display = "none"; - link.href = url; - let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length); - link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" + this.uploadFileLonging.name + "." + suffix); - document.body.appendChild(link); - link.click(); - this.downloadisLoading = false - } - - } //for循环 - - } + link.setAttribute( + "download", + file.fileName + ? file.fileName + : this.data.unitname + + "-" + + this.uploadFileLonging.name + + "." + + suffix + ); + document.body.appendChild(link); + link.click(); + this.downloadisLoading = false; + } + } //for循环 + } - //取消分块下载 - cancelDowload() { - } + //取消分块下载 + cancelDowload() {} } - - //下载文件弹出框 @Component({ - selector: 'downloadfile', - templateUrl: './downloadFile.html', - styleUrls: ['./downloadFile.scss'] + selector: "downloadfile", + templateUrl: "./downloadFile.html", + styleUrls: ["./downloadFile.scss"], }) export class DownloadFile { - - constructor(private http: HttpClient, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data, public snackBar: MatSnackBar) { } - name: any //如果真实姓名为空时 - fileUrls: any //当前预案附件地址数组 - fileDatas: any = [] //用于循环的数组 - selectedFileIndex: any = 0 - selectedFileData: any - - ngOnInit(): void { - // console.log(this.data) - this.name = this.data.name - this.fileUrls = this.data.attachmentUrls - this.fileUrls.forEach(item => { - this.http.get('/api/ObjectMetadata/PlanPlatform/' + item).subscribe((data: any) => { - data.filePige = (data.fileLength / (1024 * 1024)).toFixed(2) - this.fileDatas.push(data) - this.selectedFileData = data - }) - }) - - } - - //取消 - onNoClick(): void { - this.dialogRef.close(); - } - //确定 - confirm() { - this.dialogRef.close(this.selectedFileData); - } - - //点击想要下载的文件 - addurl(item, key) { - // console.log(item,key) - this.selectedFileIndex = key - this.selectedFileData = item - } -} \ No newline at end of file + constructor( + private http: HttpClient, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data, + public snackBar: MatSnackBar + ) {} + name: any; //如果真实姓名为空时 + fileUrls: any; //当前预案附件地址数组 + fileDatas: any = []; //用于循环的数组 + selectedFileIndex: any = 0; + selectedFileData: any; + + ngOnInit(): void { + // console.log(this.data) + this.name = this.data.name; + this.fileUrls = this.data.attachmentUrls; + this.fileUrls.forEach((item) => { + this.http + .get("/api/ObjectMetadata/PlanPlatform/" + item) + .subscribe((data: any) => { + data.filePige = (data.fileLength / (1024 * 1024)).toFixed(2); + this.fileDatas.push(data); + this.selectedFileData = data; + }); + }); + } + + //取消 + onNoClick(): void { + this.dialogRef.close(); + } + //确定 + confirm() { + this.dialogRef.close(this.selectedFileData); + } + + //点击想要下载的文件 + addurl(item, key) { + // console.log(item,key) + this.selectedFileIndex = key; + this.selectedFileData = item; + } +} diff --git a/src/app/gis-management/gis-management.module.ts b/src/app/gis-management/gis-management.module.ts index 18a5f5b..536b7bb 100644 --- a/src/app/gis-management/gis-management.module.ts +++ b/src/app/gis-management/gis-management.module.ts @@ -1,121 +1,154 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { DownloadFile, GisLabelingComponent, LookPlanDialog, ShareUrlDialog } from './gis-labeling/gis-labeling.component'; -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 { GisRoutingModule } from './gis-management-routing.module'; -import { LeftWorkingComponent } from './left-working/left-working.component'; -import { BasicInfoComponent } from './basic-info/basic-info.component'; -import { FunctionPartitionComponent } from './function-partition/function-partition.component'; -import { FireFacilitiesComponent } from './fire-facilities/fire-facilities.component'; -import {ImagesData2}from './fire-facilities/imagesdata.component' -import {AllaroundComponent} from './allaround/allaround.component' -import {ImgDetails}from './allaround/imgdetails.component'; -import {KeySiteLookComponent} from './key-site-look/key-site.component' -import {KeySiteImgs2}from './key-site-look/keysiteimgs.component' -import {RealisticPictureLookComponent} from './realistic-picture-look/realistic-picture.component' -import {previewImg3} from './realistic-picture-look/realistic-picture.component' -import { OpenPlanToolDialog, PlanListComponent } from './plan-list/plan-list.component'; -import { PlanManagementModule } from '../plan-management/plan-management.module'; -import { UiModule } from '../ui/ui.module'; -import { CadDrawComponent } from './cad-draw/cad-draw.component'; -import {previewBigImg2} from './fire-facilities/imagesdata.component' +import { NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { + DownloadFile, + GisLabelingComponent, + LookPlanDialog, + ShareUrlDialog, +} from "./gis-labeling/gis-labeling.component"; +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 { GisRoutingModule } from "./gis-management-routing.module"; +import { LeftWorkingComponent } from "./left-working/left-working.component"; +import { BasicInfoComponent } from "./basic-info/basic-info.component"; +import { FunctionPartitionComponent } from "./function-partition/function-partition.component"; +import { FireFacilitiesComponent } from "./fire-facilities/fire-facilities.component"; +import { ImagesData2 } from "./fire-facilities/imagesdata.component"; +import { AllaroundComponent } from "./allaround/allaround.component"; +import { ImgDetails } from "./allaround/imgdetails.component"; +import { KeySiteLookComponent } from "./key-site-look/key-site.component"; +import { KeySiteImgs2 } from "./key-site-look/keysiteimgs.component"; +import { RealisticPictureLookComponent } from "./realistic-picture-look/realistic-picture.component"; +import { previewImg3 } from "./realistic-picture-look/realistic-picture.component"; +import { + OpenPlanToolDialog, + PlanListComponent, +} from "./plan-list/plan-list.component"; +import { PlanManagementModule } from "../plan-management/plan-management.module"; +import { UiModule } from "../ui/ui.module"; +import { CadDrawComponent } from "./cad-draw/cad-draw.component"; +import { previewBigImg2 } from "./fire-facilities/imagesdata.component"; +import { NzAutocompleteModule } from "ng-zorro-antd/auto-complete"; @NgModule({ - declarations: [GisLabelingComponent, LeftWorkingComponent, FunctionPartitionComponent, RealisticPictureLookComponent,previewImg3,previewBigImg2, - FireFacilitiesComponent,ImagesData2,AllaroundComponent,ImgDetails,KeySiteLookComponent,KeySiteImgs2,BasicInfoComponent,FunctionPartitionComponent,ShareUrlDialog, PlanListComponent,LookPlanDialog,DownloadFile,OpenPlanToolDialog, CadDrawComponent], + declarations: [ + GisLabelingComponent, + LeftWorkingComponent, + FunctionPartitionComponent, + RealisticPictureLookComponent, + previewImg3, + previewBigImg2, + FireFacilitiesComponent, + ImagesData2, + AllaroundComponent, + ImgDetails, + KeySiteLookComponent, + KeySiteImgs2, + BasicInfoComponent, + FunctionPartitionComponent, + ShareUrlDialog, + PlanListComponent, + LookPlanDialog, + DownloadFile, + OpenPlanToolDialog, + CadDrawComponent, + ], - imports: [ - CommonModule, - CommonModule, - GisRoutingModule, - 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, - PlanManagementModule, - UiModule - ] - + imports: [ + CommonModule, + CommonModule, + GisRoutingModule, + 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, + PlanManagementModule, + UiModule, + NzAutocompleteModule, + ], }) -export class GISManagementModule { } +export class GISManagementModule {}