You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1875 lines
80 KiB
1875 lines
80 KiB
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'] |
|
}) |
|
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); |
|
}); |
|
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'] |
|
} |
|
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); |
|
}; |
|
|
|
render.contentNonRender = (src) => { |
|
return `<img class='clusterImgCollection' src="${src}" alt="">`; |
|
}; |
|
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 = |
|
`<div style="font-size: 14px" id="gispopupbox"> |
|
<div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px"> |
|
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${item.buildingTypes.length ? item.buildingTypes[0].name : "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div> |
|
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${item.organizationName || "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">${e.organizationName || "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div> |
|
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${item.phone || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;"> |
|
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div> |
|
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div> |
|
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div> |
|
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div> |
|
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div> |
|
</div> |
|
</div>` |
|
// 创建一个自定义内容的 infowindow 实例 |
|
this.infoWindow = MapFactory.InfoWindowInstance({ |
|
position: [item.location.x, item.location.y], |
|
offset: MapFactory.PixelInstance(0, -30), |
|
content: markerContent, |
|
}); |
|
this.infoWindow.open(this.map); |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件 |
|
//this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件 |
|
} |
|
}, this) |
|
} |
|
|
|
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) |
|
}) |
|
} else { |
|
this.circleoffireForce.setRadius(Number(this.fireForceAreaDefault)) |
|
this.circleoffireForce.setCenter(this.markers[0]._position) |
|
this.circleoffireForce.setMap(this.map) |
|
let Distance |
|
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标 |
|
if (this.fireForceAreaDefault == '0') { |
|
this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) |
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y) |
|
} else { |
|
Distance = Math.abs(lnglat.offset(0, this.fireForceAreaDefault).lat - this.selectedUnit.location.y) |
|
} |
|
if (this.fireForceAreaDefault == '-1') {//如果勾选全部 |
|
let paramsdata: any = { |
|
PageSize: 99999, |
|
Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 |
|
} |
|
this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => { |
|
this.createFireForceMarker(data) |
|
}) |
|
} else { |
|
let paramsdata: any = { |
|
PageSize: 99999, |
|
Lon: this.selectedUnit.location.x, |
|
Lat: this.selectedUnit.location.y, |
|
Distance: Distance, |
|
Levels: this.selectedFireForceList.length != 0 ? this.selectedFireForceList : -1 |
|
} |
|
this.http.get("/api/CustomFireForce", { params: paramsdata }).subscribe((data: any) => { |
|
this.createFireForceMarker(data) |
|
}) |
|
} |
|
} |
|
} |
|
//创建消防力量markers |
|
fireForceCluster: any //消防力量点聚合实例 |
|
createFireForceMarker(list) { |
|
let fireForceMarkerArrcluster = [] |
|
this.fireForceCluster ? this.fireForceCluster.setData([]) : null |
|
list.forEach((item) => { |
|
let image |
|
if (item.forceType == 2) { |
|
image = '/assets/fireForcesMarkers/qita.png' |
|
} else if (item.level == 0) { |
|
image = '/assets/fireForcesMarkers/zongdui.png' |
|
} else if (item.level == 1) { |
|
image = '/assets/fireForcesMarkers/zhidui.png' |
|
} else if (item.level == 2) { |
|
image = '/assets/fireForcesMarkers/dadui.png' |
|
} else if (item.level == 3) { |
|
image = '/assets/fireForcesMarkers/zhongdui.png' |
|
}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 `<img class='clusterImgCollection' src="${src}" alt="">`; |
|
}; |
|
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) |
|
}) |
|
} 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); |
|
}; |
|
|
|
render.contentNonRender = (src) => { |
|
return `<img class='clusterImgCollection' src="${src}" alt="">`; |
|
}; |
|
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 { |
|
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); |
|
}; |
|
|
|
render.contentNonRender = (src) => { |
|
return `<img class='clusterImgCollection' src="${src}" alt="">`; |
|
}; |
|
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 = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; |
|
// 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) { |
|
|
|
} |
|
}, 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 的 自定义 设置，缺省为默认样式 |
|
}); |
|
break; |
|
} |
|
case 'measureArea': { |
|
this.mouseTool.measureArea({ |
|
strokeColor: '#80d8ff', |
|
fillColor: '#80d8ff', |
|
fillOpacity: 0.3 |
|
//同 Polygon 的 Option 设置 |
|
}); |
|
break; |
|
} |
|
} |
|
} |
|
//合并清空 |
|
clearnAll() { |
|
this.mouseTool.close(true) |
|
this.checkRadio = false |
|
} |
|
|
|
//搜索 |
|
search() { |
|
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 (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); }) : 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 = `<div style="font-size: 14px" id="gispopupbox"> |
|
<div style="color: #0080FF;"><span style="margin-left:8px">${e.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${e.address}</label> </div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px"> |
|
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${e.buildingTypes.length ? e.buildingTypes[0].name : "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div> |
|
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${e.contacts || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${e.organizationName || "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">${e.organizationName || "暂无数据"}</label></div> |
|
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div> |
|
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div> |
|
</div> |
|
<div style="display: flex; margin-top: 10px;margin-left:8px""> |
|
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${e.phone || "暂无数据"}</label></div> |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;"> |
|
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div> |
|
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div> |
|
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div> |
|
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div> |
|
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div> |
|
</div> |
|
</div>` |
|
// 创建一个自定义内容的 infowindow 实例 |
|
this.infoWindow = MapFactory.InfoWindowInstance({ |
|
position: [e.location.x, e.location.y], |
|
offset: MapFactory.PixelInstance(0, -30), |
|
content: markerContent, |
|
}); |
|
this.infoWindow.open(this.map); |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 |
|
//this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 |
|
marker.on('click', (ev) => { //marker点击事件 |
|
this.infoWindow = MapFactory.InfoWindowInstance({ |
|
position: [e.location.x, e.location.y], |
|
offset: MapFactory.PixelInstance(0, -30), |
|
content: markerContent, |
|
}); |
|
this.infoWindow.open(this.map); |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件 |
|
//this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件 |
|
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件 |
|
}) |
|
this.map.setZoomAndCenter(13, [marker._position[0], marker._position[1] + 0.015]); //设置地图中心点 |
|
this.allCompany = [] |
|
} else { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('请完善单位地理位置', '确定', config); |
|
} |
|
} |
|
|
|
//基本信息 |
|
baseInformation(e) { |
|
this.leftDivState = true |
|
this.showLeftDiv = true |
|
this.appLeft.selectBaseInfo(e) //调用子组件方法 |
|
} |
|
|
|
//导航 |
|
route(e) { |
|
this.leftDivState = false |
|
this.showLeftDiv = false |
|
this.isShowRouteGIS = true |
|
this.routeEnd = e.name |
|
this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y) |
|
} |
|
|
|
//全景漫游 |
|
fullViewNavigation(e) { |
|
console.log(e, '全景漫游') |
|
} |
|
|
|
//三维场景 |
|
threeeScene(e) { |
|
window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/') |
|
} |
|
|
|
//查看预案 |
|
seePlan(e) { |
|
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, function (status, result) { |
|
if (result && result.tips && result.tips.length) { //搜索到数据时 |
|
that._ngZone.run(() => { |
|
if (e == 0) {//起点 |
|
that.routeStartList = result.tips |
|
if (result.tips.length != 0) { |
|
for (let index = 0; index < result.tips.length; index++) { |
|
const element = result.tips[index]; |
|
if (element.location) { |
|
that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) |
|
return |
|
} |
|
} |
|
} |
|
} else {//终点 |
|
that.routeEndList = result.tips |
|
that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) |
|
} |
|
}); |
|
|
|
} //if |
|
}) |
|
}); //获取当前 city |
|
|
|
}, 500) |
|
} |
|
|
|
//清空导航输入框 |
|
deleteSearchGIS(e) { |
|
if (e == 0) { |
|
this.routeStart = null |
|
this.routeStartList = [] |
|
this.startCoordinate = null |
|
} else { |
|
this.routeEnd = null |
|
this.routeEndList = [] |
|
this.endCoordinate = null |
|
} |
|
} |
|
|
|
//清除路线 |
|
clearGISRoute() { |
|
this.routeStart = null |
|
this.routeStartList = [] |
|
this.routeEnd = null |
|
this.routeEndList = [] |
|
this.startCoordinate = null |
|
this.endCoordinate = null |
|
this.routeGIS ? this.routeGIS.clear() : null |
|
this.routes = { distance: 0, time: 0, steps: [], } |
|
this.map.setZoomAndCenter(13, [this.selectedUnit.location.x, this.selectedUnit.location.y]); //设置地图中心点 |
|
} |
|
|
|
//交换起始点 |
|
exchangeGISRoute() { |
|
let data = this.routeStart |
|
this.routeStart = this.routeEnd |
|
this.routeEnd = data |
|
this.routeStartList = [] |
|
this.routeEndList = [] |
|
let data2 = this.startCoordinate |
|
this.startCoordinate = this.endCoordinate |
|
this.endCoordinate = data2 |
|
} |
|
|
|
routes: any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 |
|
|
|
startCoordinate: any//开始坐标 |
|
endCoordinate: any//结束坐标 |
|
|
|
//导航查询 |
|
queryGISRoute() { |
|
//构造路线导航类 |
|
let that = this |
|
this.selectType = true |
|
this.routeGIS ? this.routeGIS.clear() : null |
|
this.routeGIS = MapFactory.DrivingInstance({ |
|
map: this.map, |
|
}); |
|
if (!this.startCoordinate) { |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('未查询到起点坐标信息，请输入有效地址', '确定', config); |
|
return |
|
} else if (!this.endCoordinate) { |
|
let config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('未查询到终点坐标信息，请输入有效地址', '确定', config); |
|
return |
|
} else { |
|
this.routeGIS.search(this, this.startCoordinate, this.endCoordinate, |
|
function (status, result) { |
|
if (status === 'complete') { |
|
that.routes = result.routes[0] |
|
} else { alert('获取驾驶规划路线失败') } |
|
} |
|
); |
|
} |
|
|
|
} |
|
|
|
//切换 导航模式 推荐方案/躲避拥堵 |
|
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'] |
|
}) |
|
export class ShareUrlDialog { |
|
|
|
constructor(public http: HttpClient, public snackBar: MatSnackBar, |
|
public dialogRef: MatDialogRef<ShareUrlDialog>, |
|
@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'] |
|
}) |
|
export class LookPlanDialog { |
|
|
|
constructor(public http: HttpClient, public snackBar: MatSnackBar, |
|
public dialogRef: MatDialogRef<LookPlanDialog>, |
|
@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 |
|
this.snackBar.open('本地文件，请下载查看', '确定', config); |
|
} |
|
if (e.planMode == 1) { |
|
const config = new MatSnackBarConfig(); |
|
config.verticalPosition = 'top'; |
|
config.duration = 3000 |
|
this.snackBar.open('查看导入word文件', '确定', config); |
|
} |
|
if (e.planMode == 2) { //如果是在线编辑 |
|
let id = e.id |
|
sessionStorage.setItem("planId", id) |
|
sessionStorage.setItem("companyId", this.data.id) |
|
sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id) |
|
sessionStorage.setItem("editable", "0") |
|
sessionStorage.setItem("planName", e.name) |
|
let companyId = sessionStorage.getItem("companyId") |
|
window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`); |
|
} |
|
if (e.planMode == 3) { //如果是跳转网页 |
|
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`) |
|
} |
|
} |
|
} */ |
|
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}`) |
|
} |
|
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 |
|
}); |
|
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 |
|
}) |
|
} else if (file && fileSize > shardSize) { //>10MB时分块下载 |
|
this.blockingDownload() //分段下载 |
|
this.downloadisLoading = true |
|
} |
|
} |
|
//分段下载并合并 |
|
async blockingDownload() { |
|
let file = this.download |
|
let fileSize = file.fileLength //下载文件的总大小 |
|
let shardSize = 3 * 1024 * 1024 //3MB一个分片 |
|
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段 |
|
let allFile: any = [] //所有的file分段 |
|
|
|
for (let i = 0; i < allSlice; i++) { |
|
let start = i * shardSize //每次下载文件开始位置 |
|
let end = Math.min(fileSize, start + shardSize - 1); //每次下载文件结束为止 |
|
|
|
let result = await new Promise((result, reject) => { |
|
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`, { headers: { 'range': `bytes= ${start}-${end}` }, responseType: 'blob' }).subscribe(data => { |
|
result(data) |
|
}) |
|
}) |
|
allFile.push(result) |
|
|
|
|
|
|
|
if (allFile.length === allSlice) { //合并文件输出给浏览器 |
|
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址 |
|
let link = document.createElement("a"); |
|
link.style.display = "none"; |
|
link.href = url; |
|
let suffix = file.objectName.substring(file.objectName.lastIndexOf(".") + 1, file.objectName.length); |
|
link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" + this.uploadFileLonging.name + "." + suffix); |
|
document.body.appendChild(link); |
|
link.click(); |
|
this.downloadisLoading = false |
|
} |
|
|
|
} //for循环 |
|
|
|
} |
|
|
|
//取消分块下载 |
|
cancelDowload() { |
|
} |
|
} |
|
|
|
|
|
|
|
//下载文件弹出框 |
|
@Component({ |
|
selector: 'downloadfile', |
|
templateUrl: './downloadFile.html', |
|
styleUrls: ['./downloadFile.scss'] |
|
}) |
|
export class DownloadFile { |
|
|
|
constructor(private http: HttpClient, public dialogRef: MatDialogRef<DownloadFile>, @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 |
|
} |
|
} |