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';
declare var AMap: any;
declare var QRCode: any;
import { MapFactory } from '../../../modules/map/declare/factory'
@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
})
})
this.map.plugin(["AMap.MarkerClusterer"], () => {
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, // 设置网格像素大小
render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.unitCluster.on('click', (e) => {
if (e.clusterData.length == 1) {
let item = e.clusterData[0].data
let markerContent =
``
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = MapFactory.InfoWindowInstance({
position: [item.location.x, item.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件
}
})
});
}
//取消显示单位
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'
}
// 用于点集合的数组
item.fireForceDetailInfo.location ?
fireForceMarkerArrcluster.push({
lnglat: [item.fireForceDetailInfo.location.x, item.fireForceDetailInfo.location.y],
image: image,
data: item
}) : null
})
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60
var count = fireForceMarkerArrcluster.length;
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, // 设置网格像素大小
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
})
}
// 用于点集合的数组
})
this.map.plugin(["AMap.MarkerClusterer"], () => {
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, // 设置网格像素大小
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
})
})
this.map.plugin(["AMap.MarkerClusterer"], () => {
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, // 设置网格像素大小
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) {
}
})
});
}
//取消显示水源
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] });
that.map.setCity('上海市');
that.map.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
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() {
this.distanceList.forEach(item => {
if (item.className == 'AMap.Marker') {
let parent = item.dom.parentNode
let children = item.dom.nextElementSibling
parent && children ? parent.removeChild(item.dom.nextElementSibling) : null
this.map.remove(item)
} else {
this.map.remove(item)
}
})
this.distanceList = [] //清空数组
}
//清空面积测量
clearArea() {
this.measureArea.close(true)
}
//合并测距和侧面积
measure(type) {
switch (type) {
case 'rule': {
this.mouseTool.rule({
startMarkerOptions: {//可缺省
icon: MapFactory.IconInstance({
size: MapFactory.SizeInstance(19, 31),//图标大小
imageSize: MapFactory.SizeInstance(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
})
},
endMarkerOptions: {//可缺省
icon: MapFactory.IconInstance({
size: MapFactory.SizeInstance(19, 31),//图标大小
imageSize: MapFactory.SizeInstance(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: MapFactory.PixelInstance(-9, -31)
},
midMarkerOptions: {//可缺省
icon: MapFactory.IconInstance({
size: MapFactory.SizeInstance(19, 31),//图标大小
imageSize: MapFactory.SizeInstance(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: MapFactory.PixelInstance(-9, -31)
},
lineOptions: {//可缺省
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 2
}
//同 RangingTool 的 自定义 设置，缺省为默认样式
});
break;
}
case 'measureArea': {
this.mouseTool.measureArea({
strokeColor: '#80d8ff',
fillColor: '#80d8ff',
fillOpacity: 0.3
//同 Polygon 的 Option 设置
});
break;
}
}
}
//合并清空
clearnAll() {
this.mouseTool.close(true)
this.checkRadio = false
}
//搜索
search() {
this.allCompany = []
let paramsdata: any = { Name: this.searchText || '' }
this.http.get("/api/Companies", { params: paramsdata }).subscribe((data: any) => {
this.allCompany = data.items
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(`搜索目标结果为${data.items.length}个`, '确定', config);
})
}
//清除
clear() {
this.allCompany = []
this.searchText = ''
this.markers ? this.markers.forEach((element, index) => { this.map.remove(element); }) : null
this.infoWindow ? this.map.remove(this.infoWindow) : null
}
selectedUnit: any//当前打开的单位
//选择 单位 地图跳转
//弹窗实例
infoWindow: any
selectCompany(e) {
if (e.location && e.location.x && e.location.y) {
this.selectedUnit = e
this.markers.forEach((element, index) => { this.map.remove(element); }); //先删除所有标点
this.markers = []
let marker = MapFactory.MarkerInstance({
map: this.map,
position: [e.location.x, e.location.y], // 基点位置,
});
this.markers.push(marker)
let markerContent = ``
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
marker.on('click', (ev) => { //marker点击事件
this.infoWindow = MapFactory.InfoWindowInstance({
position: [e.location.x, e.location.y],
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(e) })//基本信息点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(e) })//导航点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(e) })//全景漫游点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(e) })//三维场景点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(e) })//分享点击事件
})
this.map.setZoomAndCenter(13, [marker._position[0], marker._position[1] + 0.015]); //设置地图中心点
this.allCompany = []
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请完善单位地理位置', '确定', config);
}
}
//基本信息
baseInformation(e) {
this.leftDivState = true
this.showLeftDiv = true
this.appLeft.selectBaseInfo(e) //调用子组件方法
}
//导航
route(e) {
this.leftDivState = false
this.showLeftDiv = false
this.isShowRouteGIS = true
this.routeEnd = e.name
this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y)
}
//全景漫游
fullViewNavigation(e) {
console.log(e, '全景漫游')
}
//三维场景
threeeScene(e) {
window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/')
}
//查看预案
seePlan(e) {
let data = e
let dialogRef = this.dialog.open(LookPlanDialog, {//调用open方法打开对话框并且携带参数过去
width: '1400px',
height: '800px',
id: 'lookPlanDialog',
data
});
dialogRef.afterClosed().subscribe((data) => {
});
}
//分享
share(e) {
let data = {
url: 'https://www.baidu.com/',
buildingType: e.buildingTypes[0].name,
address: e.address
}
let dialogRef = this.dialog.open(ShareUrlDialog, {//调用open方法打开对话框并且携带参数过去
width: '540px',
height: '596px',
id: 'shareDialog',
data
});
dialogRef.afterClosed().subscribe((data) => {
});
}
//导航路线
isShowRouteGIS: boolean = false; //导航路线 显隐
routeStart: any; //起点
routeStartList: any = [] //起点 搜索结果
routeEnd: any; //终点
routeEndList: any = [] //终点 搜索结果
timeout: any; //延时器
routeGIS: IDriving; //查询结果 规划路线
selectType: boolean = true; //路线选择 推荐方案/躲避用拥堵
//关闭导航路线
closeRouteGIS() {
this.isShowRouteGIS = false
}
//输入框 输入事件
routeChange(e) {
let that = this
window.clearTimeout(this.timeout)
this.timeout = window.setTimeout(() => {
that.map.getCity(function (info) { //获取当前 city
that.map.plugin(['AMap.AutoComplete'], () => {
var autoOptions = { city: info.city }
let keywords
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
var autoComplete = MapFactory.AutocompleteInstance(autoOptions);
autoComplete.search(keywords, function (status, result) {
if (result && result.tips && result.tips.length) { //搜索到数据时
that._ngZone.run(() => {
if (e == 0) {//起点
that.routeStartList = result.tips
if (result.tips.length != 0) {
for (let index = 0; index < result.tips.length; index++) {
const element = result.tips[index];
if (element.location) {
that.startCoordinate = 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.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.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,
@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,
@Inject(MAT_DIALOG_DATA) public data, private render2: Renderer2, public dialog: MatDialog) { }
ngOnInit() {
// console.log(this.data)
this.getAllPlans()
}
//关闭弹窗
closeDiv() {
this.dialogRef.close()
}
//查看单位详情
lookUnitDetails() {
window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`)
}
//获得所有预案组件
allPlanComponents: any//所有预案组件
getAllPlans() {
let paramsData: any = {
companyId: this.data.id,
pageNumber: 1,
pageSize: "100",
sort: ""
}
this.http.get("/api/PlanComponents", { params: paramsData }).subscribe((data: any) => {
this.allPlanComponents = data.items
})
}
//查看预案
lookPlan(e) {
if (e.planMode == 0) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('本地文件，请下载查看', '确定', config);
}
if (e.planMode == 1) {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('查看导入word文件', '确定', config);
}
if (e.planMode == 2) { //如果是在线编辑
let id = e.id
sessionStorage.setItem("planId", id)
sessionStorage.setItem("companyId", this.data.id)
sessionStorage.setItem("buildingTypeId", this.data.buildingTypes[0].id)
sessionStorage.setItem("editable", "0")
sessionStorage.setItem("planName", e.name)
let companyId = sessionStorage.getItem("companyId")
window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
}
if (e.planMode == 3) { //如果是跳转网页
sessionStorage.setItem("url", e.url)
window.open(`/planManagement/webLook`)
}
}
//点击下载
readFile(element) {
this.uploadFileLonging = element
let data = element
const dialogRef = this.dialog.open(DownloadFile, {
width: "435px",
data
});
dialogRef.afterClosed().subscribe(
data => {
if (data) {
this.downloadFileName = data.fileName
this.download = data
this.downloadFile()
}
}
);
}
//下载↓
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, @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
}
}
基本信息
导航
全景漫游
三维场景
查看预案
分享