|
|
|
@ -5,7 +5,7 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial |
|
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
declare var AMap: any; |
|
|
|
declare var AMap: any; |
|
|
|
|
|
|
|
declare var html2canvas: any; |
|
|
|
@Component({ |
|
|
|
@Component({ |
|
|
|
selector: 'app-water-road', |
|
|
|
selector: 'app-water-road', |
|
|
|
templateUrl: './water-road.component.html', |
|
|
|
templateUrl: './water-road.component.html', |
|
|
|
@ -13,46 +13,48 @@ declare var AMap: any; |
|
|
|
}) |
|
|
|
}) |
|
|
|
export class WaterRoadComponent implements OnInit { |
|
|
|
export class WaterRoadComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
|
|
constructor(private http: HttpClient,public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder,private route:ActivatedRoute) { } |
|
|
|
constructor(private http: HttpClient, public renderer2: Renderer2, public snackBar: MatSnackBar, public dialog: MatDialog, private fb: FormBuilder, private route: ActivatedRoute) { } |
|
|
|
|
|
|
|
|
|
|
|
//获得单位信息
|
|
|
|
//获得单位信息
|
|
|
|
unitData:any |
|
|
|
unitData: any |
|
|
|
|
|
|
|
|
|
|
|
async getUnitData(){ |
|
|
|
async getUnitData() { |
|
|
|
await new Promise((resolve, reject) =>{ |
|
|
|
await new Promise((resolve, reject) => { |
|
|
|
this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe(data => { |
|
|
|
let id |
|
|
|
|
|
|
|
this.route.snapshot.queryParams.id ? id = this.route.snapshot.queryParams.id : id = this.route.snapshot.queryParams.companyId |
|
|
|
|
|
|
|
this.http.get(`/api/Companies/${id}`).subscribe(data => { |
|
|
|
this.unitData = data |
|
|
|
this.unitData = data |
|
|
|
resolve(data) |
|
|
|
resolve(data) |
|
|
|
}) |
|
|
|
}) |
|
|
|
})
|
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
map:any //地图
|
|
|
|
map: any //地图
|
|
|
|
watertForm:FormGroup //gis右上角水源表单
|
|
|
|
watertForm: FormGroup //gis右上角水源表单
|
|
|
|
waterList = [
|
|
|
|
waterList = [ |
|
|
|
{id:'0',name:'消火栓',selected:true}, |
|
|
|
{ id: '0', name: '消火栓', selected: true }, |
|
|
|
{id:'1',name:'消防水池',selected:true}, |
|
|
|
{ id: '1', name: '消防水池', selected: true }, |
|
|
|
{id:'2',name:'天然水源',selected:true}, |
|
|
|
{ id: '2', name: '天然水源', selected: true }, |
|
|
|
{id:'3',name:'总队',selected:true}, |
|
|
|
{ id: '3', name: '总队', selected: true }, |
|
|
|
{id:'4',name:'支队',selected:true}, |
|
|
|
{ id: '4', name: '支队', selected: true }, |
|
|
|
{id:'5',name:'大队',selected:true}, |
|
|
|
{ id: '5', name: '大队', selected: true }, |
|
|
|
{id:'6',name:'中队(消防站)',selected:true}, |
|
|
|
{ id: '6', name: '中队(消防站)', selected: true }, |
|
|
|
{id:'7',name:'其他消防队伍',selected:true} |
|
|
|
{ id: '7', name: '其他消防队伍', selected: true } |
|
|
|
] |
|
|
|
] |
|
|
|
|
|
|
|
|
|
|
|
fireForceList:any[] = [ |
|
|
|
fireForceList: any[] = [ |
|
|
|
|
|
|
|
|
|
|
|
] |
|
|
|
] |
|
|
|
waterAreaDefault:any = '5000' //默认水源范围
|
|
|
|
waterAreaDefault: any = '5000' //默认水源范围
|
|
|
|
selectedWaterList:any = [] //选择提交的水源
|
|
|
|
selectedWaterList: any = [] //选择提交的水源
|
|
|
|
//地图范围圆圈---水源
|
|
|
|
//地图范围圆圈---水源
|
|
|
|
circleofwater = new AMap.Circle({ |
|
|
|
circleofwater = new AMap.Circle({ |
|
|
|
center: null, |
|
|
|
center: null, |
|
|
|
radius: 0, //半径
|
|
|
|
radius: 0, //半径
|
|
|
|
strokeOpacity: 1,
|
|
|
|
strokeOpacity: 1, |
|
|
|
fillOpacity: 0.4, |
|
|
|
fillOpacity: 0.4, |
|
|
|
strokeStyle: 'dashed', |
|
|
|
strokeStyle: 'dashed', |
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
strokeDasharray: [10, 10], |
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
fillColor: '#1791fc', |
|
|
|
fillColor: '#1791fc', |
|
|
|
zIndex: 50, |
|
|
|
zIndex: 50, |
|
|
|
@ -60,19 +62,19 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
|
|
async ngOnInit(): Promise<void> { |
|
|
|
async ngOnInit(): Promise<void> { |
|
|
|
this.watertForm = this.fb.group({ |
|
|
|
this.watertForm = this.fb.group({ |
|
|
|
waters:this.waterUnits(), |
|
|
|
waters: this.waterUnits(), |
|
|
|
allSelectedWater:new FormControl(), |
|
|
|
allSelectedWater: new FormControl(), |
|
|
|
areaWater:new FormControl() |
|
|
|
areaWater: new FormControl() |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.waters.valueChanges.subscribe(values => { |
|
|
|
this.waters.valueChanges.subscribe(values => { |
|
|
|
let selects:string[] = [] |
|
|
|
let selects: string[] = [] |
|
|
|
values.forEach((selected:boolean,i:number) => { |
|
|
|
values.forEach((selected: boolean, i: number) => { |
|
|
|
selected === true && selects.push(this.waterList[i].id) |
|
|
|
selected === true && selects.push(this.waterList[i].id) |
|
|
|
}); |
|
|
|
}); |
|
|
|
this.selectedWaterList = selects |
|
|
|
this.selectedWaterList = selects |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.waterList.forEach(item => { |
|
|
|
this.waterList.forEach(item => { |
|
|
|
if(item.selected){ |
|
|
|
if (item.selected) { |
|
|
|
this.selectedWaterList.push(item.id) |
|
|
|
this.selectedWaterList.push(item.id) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -82,56 +84,56 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
}, 0); |
|
|
|
}, 0); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
get waters():any{ |
|
|
|
get waters(): any { |
|
|
|
return this.watertForm.get('waters') |
|
|
|
return this.watertForm.get('waters') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//全选水源
|
|
|
|
//全选水源
|
|
|
|
selectedAllWater(event){ |
|
|
|
selectedAllWater(event) { |
|
|
|
if(event.checked){ |
|
|
|
if (event.checked) { |
|
|
|
this.waters.controls.forEach(item => {item.setValue(true)}) |
|
|
|
this.waters.controls.forEach(item => { item.setValue(true) }) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.watertForm.reset()
|
|
|
|
this.watertForm.reset() |
|
|
|
this.watertForm.controls.areaWater.setValue('0') |
|
|
|
this.watertForm.controls.areaWater.setValue('0') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//水源提交
|
|
|
|
//水源提交
|
|
|
|
waterSubmit(value){ |
|
|
|
waterSubmit(value) { |
|
|
|
if(!this.unitMarker){ |
|
|
|
if (!this.unitMarker) { |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.duration = 3000 |
|
|
|
config.duration = 3000 |
|
|
|
this.snackBar.open('请前往基本信息标注单位坐标','确定',config); |
|
|
|
this.snackBar.open('请前往基本信息标注单位坐标', '确定', config); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.circleofwater.setRadius(Number(this.waterAreaDefault)) |
|
|
|
this.circleofwater.setRadius(Number(this.waterAreaDefault)) |
|
|
|
this.circleofwater.setCenter(this.unitMarker._position) |
|
|
|
this.circleofwater.setCenter(this.unitMarker._position) |
|
|
|
this.circleofwater.setMap(this.map) |
|
|
|
this.circleofwater.setMap(this.map) |
|
|
|
|
|
|
|
|
|
|
|
let Distance |
|
|
|
let Distance |
|
|
|
let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标
|
|
|
|
let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标
|
|
|
|
|
|
|
|
|
|
|
|
//如果选择当前的视野范围算出查询半径
|
|
|
|
//如果选择当前的视野范围算出查询半径
|
|
|
|
if(this.waterAreaDefault == '0'){ |
|
|
|
if (this.waterAreaDefault == '0') { |
|
|
|
this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2) |
|
|
|
this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2) |
|
|
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.unitData.location.y) |
|
|
|
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.unitData.location.y) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.unitData.location.y)
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.unitData.location.y) |
|
|
|
} |
|
|
|
} |
|
|
|
this.getWaterData(Distance) |
|
|
|
this.getWaterData(Distance) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//获得水源列表
|
|
|
|
//获得水源列表
|
|
|
|
getWaterData(Distance){ |
|
|
|
getWaterData(Distance) { |
|
|
|
if(this.selectedWaterList.length == 0){ |
|
|
|
if (this.selectedWaterList.length == 0) { |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.duration = 3000 |
|
|
|
config.duration = 3000 |
|
|
|
this.snackBar.open('请选择要显示的类型','确定',config); |
|
|
|
this.snackBar.open('请选择要显示的类型', '确定', config); |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
|
|
|
|
|
|
|
|
console.log('选中的内容',this.selectedWaterList) |
|
|
|
// console.log('选中的内容', this.selectedWaterList)
|
|
|
|
function checkAdult(item) { |
|
|
|
function checkAdult(item) { |
|
|
|
return item <= 2; |
|
|
|
return item <= 2; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -140,88 +142,88 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
} |
|
|
|
} |
|
|
|
const water = this.selectedWaterList.filter(checkAdult); |
|
|
|
const water = this.selectedWaterList.filter(checkAdult); |
|
|
|
const power = this.selectedWaterList.filter(checkAdult2); |
|
|
|
const power = this.selectedWaterList.filter(checkAdult2); |
|
|
|
console.log('water',water) |
|
|
|
// console.log('water', water)
|
|
|
|
console.log('power',power) |
|
|
|
// console.log('power', power)
|
|
|
|
let waterparamsdata:any = { |
|
|
|
let waterparamsdata: any = { |
|
|
|
PageSize:99999, |
|
|
|
PageSize: 99999, |
|
|
|
Lon : this.unitData.location.x, |
|
|
|
Lon: this.unitData.location.x, |
|
|
|
Lat : this.unitData.location.y, |
|
|
|
Lat: this.unitData.location.y, |
|
|
|
Distance : Distance, |
|
|
|
Distance: Distance, |
|
|
|
WaterSourceTypes :water |
|
|
|
WaterSourceTypes: water |
|
|
|
} |
|
|
|
} |
|
|
|
let powerparamsdata:any = { |
|
|
|
let powerparamsdata: any = { |
|
|
|
PageSize:99999, |
|
|
|
PageSize: 99999, |
|
|
|
Lon : this.unitData.location.x, |
|
|
|
Lon: this.unitData.location.x, |
|
|
|
Lat : this.unitData.location.y, |
|
|
|
Lat: this.unitData.location.y, |
|
|
|
Distance : Distance, |
|
|
|
Distance: Distance, |
|
|
|
WaterSourceTypes :power |
|
|
|
WaterSourceTypes: power |
|
|
|
} |
|
|
|
} |
|
|
|
if( water.length == 0 ){ |
|
|
|
if (water.length == 0) { |
|
|
|
this.http.get("/api/CustomFireForce",{params:powerparamsdata}).subscribe((data2:any) => { |
|
|
|
this.http.get("/api/CustomFireForce", { params: powerparamsdata }).subscribe((data2: any) => { |
|
|
|
this.createwaterMarker(data2) |
|
|
|
this.createwaterMarker(data2) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}else if( power.length == 0 ){ |
|
|
|
} else if (power.length == 0) { |
|
|
|
this.http.get("/api/WaterSources",{params:waterparamsdata}).subscribe((data:any) => { |
|
|
|
this.http.get("/api/WaterSources", { params: waterparamsdata }).subscribe((data: any) => { |
|
|
|
this.createwaterMarker(data.items) |
|
|
|
this.createwaterMarker(data.items) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.http.get("/api/WaterSources",{params:waterparamsdata}).subscribe((data:any) => { |
|
|
|
this.http.get("/api/WaterSources", { params: waterparamsdata }).subscribe((data: any) => { |
|
|
|
this.http.get("/api/CustomFireForce",{params:powerparamsdata}).subscribe((data2:any) => { |
|
|
|
this.http.get("/api/CustomFireForce", { params: powerparamsdata }).subscribe((data2: any) => { |
|
|
|
let allData = [...data.items,...data2] |
|
|
|
let allData = [...data.items, ...data2] |
|
|
|
this.createwaterMarker(allData) |
|
|
|
this.createwaterMarker(allData) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//循环渲染出所有水源markers
|
|
|
|
//循环渲染出所有水源markers
|
|
|
|
waterCluster:any //水源聚合实例
|
|
|
|
waterCluster: any //水源聚合实例
|
|
|
|
createwaterMarker(list){ |
|
|
|
createwaterMarker(list) { |
|
|
|
let waterMarkerArrcluster = [] |
|
|
|
let waterMarkerArrcluster = [] |
|
|
|
this.waterCluster ? this.waterCluster.setData([]) : null |
|
|
|
this.waterCluster ? this.waterCluster.setData([]) : null |
|
|
|
list.forEach((item) => { |
|
|
|
list.forEach((item) => { |
|
|
|
let image |
|
|
|
let image |
|
|
|
if(item.waterSourceType == 0 || item.waterSourceType == 1 || item.waterSourceType == 2){ |
|
|
|
if (item.waterSourceType == 0 || item.waterSourceType == 1 || item.waterSourceType == 2) { |
|
|
|
if(item.waterSourceType == 0){//消火栓
|
|
|
|
if (item.waterSourceType == 0) {//消火栓
|
|
|
|
image = '/assets/waterMarkers/szxhs.png' |
|
|
|
image = '/assets/waterMarkers/szxhs.png' |
|
|
|
}else if(item.waterSourceType == 1){//消防水池
|
|
|
|
} else if (item.waterSourceType == 1) {//消防水池
|
|
|
|
image = '/assets/waterMarkers/fxcsc.png' |
|
|
|
image = '/assets/waterMarkers/fxcsc.png' |
|
|
|
}else if(item.waterSourceType == 2){//天然水源
|
|
|
|
} else if (item.waterSourceType == 2) {//天然水源
|
|
|
|
image = '/assets/waterMarkers/trsy.png' |
|
|
|
image = '/assets/waterMarkers/trsy.png' |
|
|
|
} |
|
|
|
} |
|
|
|
// 用于点集合的数组
|
|
|
|
// 用于点集合的数组
|
|
|
|
item.location ? waterMarkerArrcluster.push({ |
|
|
|
item.location ? waterMarkerArrcluster.push({ |
|
|
|
lnglat : [item.location.x,item.location.y], |
|
|
|
lnglat: [item.location.x, item.location.y], |
|
|
|
image : image, |
|
|
|
image: image, |
|
|
|
data : item |
|
|
|
data: item |
|
|
|
}) : null |
|
|
|
}) : null |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
if(item.forceType == 2){ |
|
|
|
if (item.forceType == 2) { |
|
|
|
image = '/assets/fireForcesMarkers/qita.png' |
|
|
|
image = '/assets/fireForcesMarkers/qita.png' |
|
|
|
}else if(item.level == 0){ |
|
|
|
} else if (item.level == 0) { |
|
|
|
image = '/assets/fireForcesMarkers/zongdui.png' |
|
|
|
image = '/assets/fireForcesMarkers/zongdui.png' |
|
|
|
}else if(item.level == 1){ |
|
|
|
} else if (item.level == 1) { |
|
|
|
image = '/assets/fireForcesMarkers/zhidui.png' |
|
|
|
image = '/assets/fireForcesMarkers/zhidui.png' |
|
|
|
}else if(item.level == 2){ |
|
|
|
} else if (item.level == 2) { |
|
|
|
image = '/assets/fireForcesMarkers/dadui.png' |
|
|
|
image = '/assets/fireForcesMarkers/dadui.png' |
|
|
|
}else if(item.level == 3){ |
|
|
|
} else if (item.level == 3) { |
|
|
|
image = '/assets/fireForcesMarkers/zhongdui.png' |
|
|
|
image = '/assets/fireForcesMarkers/zhongdui.png' |
|
|
|
} |
|
|
|
} |
|
|
|
// 用于点集合的数组
|
|
|
|
// 用于点集合的数组
|
|
|
|
item.fireForceDetailInfo.location ?
|
|
|
|
item.fireForceDetailInfo.location ? |
|
|
|
waterMarkerArrcluster.push({ |
|
|
|
waterMarkerArrcluster.push({ |
|
|
|
lnglat : [item.fireForceDetailInfo.location.x,item.fireForceDetailInfo.location.y], |
|
|
|
lnglat: [item.fireForceDetailInfo.location.x, item.fireForceDetailInfo.location.y], |
|
|
|
image : image, |
|
|
|
image: image, |
|
|
|
data : item |
|
|
|
data: item |
|
|
|
}) : null |
|
|
|
}) : null |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
this.map.plugin(["AMap.MarkerClusterer"],() => { |
|
|
|
this.map.plugin(["AMap.MarkerClusterer"], () => { |
|
|
|
var gridSize = 60 |
|
|
|
var gridSize = 60 |
|
|
|
var count = waterMarkerArrcluster.length; |
|
|
|
var count = waterMarkerArrcluster.length; |
|
|
|
var _renderClusterMarker = function (context) { |
|
|
|
var _renderClusterMarker = function (context) { |
|
|
|
@ -237,7 +239,7 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
div.style.width = div.style.height = size + 'px'; |
|
|
|
div.style.width = div.style.height = size + 'px'; |
|
|
|
div.style.border = 'solid 1px ' + borderColor; |
|
|
|
div.style.border = 'solid 1px ' + borderColor; |
|
|
|
div.style.borderRadius = size / 2 + 'px'; |
|
|
|
div.style.borderRadius = size / 2 + 'px'; |
|
|
|
div.style.boxShadow = '0 0 5px ' + shadowColor; |
|
|
|
// div.style.boxShadow = '0 0 5px ' + shadowColor;
|
|
|
|
div.innerHTML = context.count; |
|
|
|
div.innerHTML = context.count; |
|
|
|
div.style.lineHeight = size + 'px'; |
|
|
|
div.style.lineHeight = size + 'px'; |
|
|
|
div.style.color = fontColor; |
|
|
|
div.style.color = fontColor; |
|
|
|
@ -246,7 +248,7 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
|
|
context.marker.setContent(div) |
|
|
|
context.marker.setContent(div) |
|
|
|
}; |
|
|
|
}; |
|
|
|
var _renderMarker = (context)=> { |
|
|
|
var _renderMarker = (context) => { |
|
|
|
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; |
|
|
|
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; |
|
|
|
var offset = new AMap.Pixel(-12.5, -12.5); |
|
|
|
var offset = new AMap.Pixel(-12.5, -12.5); |
|
|
|
context.marker.setContent(content) |
|
|
|
context.marker.setContent(content) |
|
|
|
@ -257,17 +259,17 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
|
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
|
|
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
|
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
|
}); |
|
|
|
}); |
|
|
|
this.waterCluster.on('click',(e)=>{ |
|
|
|
this.waterCluster.on('click', (e) => { |
|
|
|
if(e.clusterData.length == 1){ |
|
|
|
if (e.clusterData.length == 1) { |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//取消显示水源
|
|
|
|
//取消显示水源
|
|
|
|
resetWater(){ |
|
|
|
resetWater() { |
|
|
|
this.watertForm.reset() |
|
|
|
this.watertForm.reset() |
|
|
|
this.watertForm.controls.areaWater.setValue('0') |
|
|
|
this.watertForm.controls.areaWater.setValue('0') |
|
|
|
this.map.remove(this.circleofwater) |
|
|
|
this.map.remove(this.circleofwater) |
|
|
|
@ -275,7 +277,7 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//计算两地距离
|
|
|
|
//计算两地距离
|
|
|
|
Calculationofdistance(bounds){ |
|
|
|
Calculationofdistance(bounds) { |
|
|
|
let p1 = [bounds.northEast.lng, bounds.northEast.lat]; |
|
|
|
let p1 = [bounds.northEast.lng, bounds.northEast.lat]; |
|
|
|
let p2 = [bounds.northEast.lng, bounds.southWest.lat]; |
|
|
|
let p2 = [bounds.northEast.lng, bounds.southWest.lat]; |
|
|
|
// 返回 p1 到 p2 间的地面距离，单位：米
|
|
|
|
// 返回 p1 到 p2 间的地面距离，单位：米
|
|
|
|
@ -292,35 +294,67 @@ export class WaterRoadComponent implements OnInit { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
//地图初始化
|
|
|
|
//地图初始化
|
|
|
|
unitMarker:any//单位标点
|
|
|
|
unitMarker: any//单位标点
|
|
|
|
newPositionMarkerContent:any =
|
|
|
|
newPositionMarkerContent: any = |
|
|
|
'<div class="custom-content-marker">' + |
|
|
|
'<div class="custom-content-marker">' + |
|
|
|
' <img style="width:20px;height:26px" src="/assets/images/dingwei.png">' + |
|
|
|
' <img style="width:20px;height:26px" src="/assets/images/dingwei.png">' + |
|
|
|
'</div>' |
|
|
|
'</div>' |
|
|
|
creatMap(){ |
|
|
|
creatMap() { |
|
|
|
this.map = new AMap.Map('center',{ |
|
|
|
this.map = new AMap.Map('center', { |
|
|
|
zoom: 13, //初始地图级别
|
|
|
|
zoom: 13, //初始地图级别
|
|
|
|
|
|
|
|
WebGLParams: { |
|
|
|
|
|
|
|
preserveDrawingBuffer: true |
|
|
|
|
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
if(this.unitData.location && this.unitData.location.x){ |
|
|
|
if (this.unitData.location && this.unitData.location.x) { |
|
|
|
this.map.setCenter([this.unitData.location.x,this.unitData.location.y]); |
|
|
|
this.map.setCenter([this.unitData.location.x, this.unitData.location.y]); |
|
|
|
this.unitMarker = new AMap.Marker({ |
|
|
|
this.unitMarker = new AMap.Marker({ |
|
|
|
position: [this.unitData.location.x,this.unitData.location.y], |
|
|
|
position: [this.unitData.location.x, this.unitData.location.y], |
|
|
|
content: this.newPositionMarkerContent, |
|
|
|
content: this.newPositionMarkerContent, |
|
|
|
offset: new AMap.Pixel(-10, -13) |
|
|
|
offset: new AMap.Pixel(-10, -13) |
|
|
|
}) |
|
|
|
}) |
|
|
|
// 将 markers 添加到地图
|
|
|
|
// 将 markers 添加到地图
|
|
|
|
this.map.add(this.unitMarker); |
|
|
|
this.map.add(this.unitMarker); |
|
|
|
this.waterSubmit(1) |
|
|
|
this.waterSubmit(1) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
this.map.setCity('上海市'); |
|
|
|
this.map.setCity('上海市'); |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.verticalPosition = 'top'; |
|
|
|
config.duration = 3000 |
|
|
|
config.duration = 3000 |
|
|
|
this.snackBar.open('请先前往基本信息标注单位位置','确定',config); |
|
|
|
this.snackBar.open('请先前往基本信息标注单位位置', '确定', config); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
canvasImg |
|
|
|
|
|
|
|
takeScreenshotGis() { |
|
|
|
|
|
|
|
// console.log(666666, this.selectingSitePlan)
|
|
|
|
|
|
|
|
// 使用html2canvas插件，将数据源中的数据转换成画布。
|
|
|
|
|
|
|
|
html2canvas(document.querySelector("#center"), { |
|
|
|
|
|
|
|
useCORS: true, // 【重要】开启跨域配置,
|
|
|
|
|
|
|
|
allowTaint: true,//允许跨域图片
|
|
|
|
|
|
|
|
taintTest: false,//是否在渲染前测试图片
|
|
|
|
|
|
|
|
onrendered: function (canvas) { |
|
|
|
|
|
|
|
var dataUrl = canvas.toDataURL("image/png"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}).then(canvas => { |
|
|
|
|
|
|
|
// 修改生成的宽度
|
|
|
|
|
|
|
|
this.canvasImg = canvas.toDataURL("image/png"); |
|
|
|
|
|
|
|
// console.log(this.canvasImg)
|
|
|
|
|
|
|
|
}).then(() => { |
|
|
|
|
|
|
|
this.downloadFile('水源图', this.canvasImg); |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
downloadFile(filename, content) { |
|
|
|
|
|
|
|
var base64Img = content; |
|
|
|
|
|
|
|
var oA = document.createElement('a'); |
|
|
|
|
|
|
|
oA.href = base64Img; |
|
|
|
|
|
|
|
oA.download = filename; |
|
|
|
|
|
|
|
var event = document.createEvent('MouseEvents'); |
|
|
|
|
|
|
|
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); |
|
|
|
|
|
|
|
oA.dispatchEvent(event); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
chenjingyu
4 years ago
