|
|
|
|
@ -1,7 +1,9 @@
|
|
|
|
|
import { HttpClient } from '@angular/common/http'; |
|
|
|
|
import { Component, ElementRef, Inject, OnInit, Renderer2 } from '@angular/core'; |
|
|
|
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; |
|
|
|
|
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; |
|
|
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
|
|
|
import { ActivatedRoute } from '@angular/router'; |
|
|
|
|
declare var AMap: any; |
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
@ -11,17 +13,28 @@ declare var AMap: any;
|
|
|
|
|
}) |
|
|
|
|
export class WaterRoadComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
constructor(public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder) { } |
|
|
|
|
constructor(private http: HttpClient,public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder,private route:ActivatedRoute) { } |
|
|
|
|
|
|
|
|
|
//获得单位信息
|
|
|
|
|
unitData:any |
|
|
|
|
|
|
|
|
|
async getUnitData(){ |
|
|
|
|
await new Promise((resolve, reject) =>{ |
|
|
|
|
this.http.get(`/api/Companies/${this.route.snapshot.queryParams.id}`).subscribe(data => { |
|
|
|
|
this.unitData = data |
|
|
|
|
resolve(data) |
|
|
|
|
}) |
|
|
|
|
})
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
map:any //地图
|
|
|
|
|
markers:any = [{_position: [121.472644,31.231706]}] //当前单位坐标
|
|
|
|
|
watertForm:FormGroup //gis右上角水源表单
|
|
|
|
|
waterList = [
|
|
|
|
|
{id:'0',name:'消火栓',selected:false}, |
|
|
|
|
{id:'1',name:'消防水池',selected:false}, |
|
|
|
|
{id:'2',name:'天然水源',selected:false}, |
|
|
|
|
{id:'0',name:'消火栓',selected:true}, |
|
|
|
|
{id:'1',name:'消防水池',selected:true}, |
|
|
|
|
{id:'2',name:'天然水源',selected:true}, |
|
|
|
|
] |
|
|
|
|
waterAreaDefault:any = '0' //默认水源范围
|
|
|
|
|
waterAreaDefault:any = '5000' //默认水源范围
|
|
|
|
|
selectedWaterList:any = [] //选择提交的水源
|
|
|
|
|
//地图范围圆圈---水源
|
|
|
|
|
circleofwater = new AMap.Circle({ |
|
|
|
|
@ -32,11 +45,11 @@ export class WaterRoadComponent implements OnInit {
|
|
|
|
|
strokeStyle: 'dashed', |
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#ee2200', |
|
|
|
|
fillColor: '#1791fc', |
|
|
|
|
zIndex: 50, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
async ngOnInit(): Promise<void> { |
|
|
|
|
this.watertForm = this.fb.group({ |
|
|
|
|
waters:this.waterUnits(), |
|
|
|
|
allSelectedWater:new FormControl(), |
|
|
|
|
@ -51,9 +64,10 @@ export class WaterRoadComponent implements OnInit {
|
|
|
|
|
}) |
|
|
|
|
this.waterList.forEach(item => { |
|
|
|
|
if(item.selected){ |
|
|
|
|
this.selectedWaterList.push(item.name) |
|
|
|
|
this.selectedWaterList.push(item.id) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
await this.getUnitData() |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.creatMap() |
|
|
|
|
}, 0); |
|
|
|
|
@ -75,69 +89,127 @@ export class WaterRoadComponent implements OnInit {
|
|
|
|
|
|
|
|
|
|
//水源提交
|
|
|
|
|
waterSubmit(value){ |
|
|
|
|
if(this.markers.length == 0){ |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
if(!this.unitMarker){ |
|
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('请先选择一个单位','确定',config); |
|
|
|
|
this.snackBar.open('请前往基本信息标注单位坐标','确定',config); |
|
|
|
|
}else{ |
|
|
|
|
this.createwaterMarker() |
|
|
|
|
this.circleofwater.setRadius(Number(this.waterAreaDefault)) |
|
|
|
|
this.circleofwater.setCenter(this.markers[0]._position) |
|
|
|
|
this.circleofwater.setCenter(this.unitMarker._position) |
|
|
|
|
this.circleofwater.setMap(this.map) |
|
|
|
|
|
|
|
|
|
let Distance |
|
|
|
|
let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.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.unitData.location.y) |
|
|
|
|
}else{ |
|
|
|
|
Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.unitData.location.y)
|
|
|
|
|
} |
|
|
|
|
this.getWaterData(Distance) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
waterIconList = []; //展示的水源图标
|
|
|
|
|
|
|
|
|
|
//循环渲染出所有水源markers
|
|
|
|
|
createwaterMarker(){ |
|
|
|
|
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点
|
|
|
|
|
this.waterIconList = [] |
|
|
|
|
let waterType = this.selectedWaterList //筛选出展示的 水源类型
|
|
|
|
|
if (waterType.length) { |
|
|
|
|
let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标
|
|
|
|
|
let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标
|
|
|
|
|
let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029] |
|
|
|
|
// 创建一个 Icon
|
|
|
|
|
let startIcon = new AMap.Icon({ |
|
|
|
|
image: '../../../assets/images/fireHydrant.png', |
|
|
|
|
imageSize: new AMap.Size(20, 20), |
|
|
|
|
}); |
|
|
|
|
positonList.forEach((item,index)=>{ |
|
|
|
|
let marker = new AMap.Marker({ |
|
|
|
|
map: this.map, |
|
|
|
|
position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ), |
|
|
|
|
icon: startIcon, |
|
|
|
|
}); |
|
|
|
|
this.waterIconList.push(marker) |
|
|
|
|
}) |
|
|
|
|
positonList.forEach((item,index)=>{ |
|
|
|
|
let marker = new AMap.Marker({ |
|
|
|
|
map: this.map, |
|
|
|
|
position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ), |
|
|
|
|
icon: startIcon, |
|
|
|
|
}); |
|
|
|
|
this.waterIconList.push(marker) |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
//获得水源列表
|
|
|
|
|
getWaterData(Distance){ |
|
|
|
|
if(this.selectedWaterList.length == 0){ |
|
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('请选择水源类型','确定',config); |
|
|
|
|
}else{ |
|
|
|
|
let paramsdata:any = { |
|
|
|
|
PageSize:99999, |
|
|
|
|
Lon : this.unitData.location.x, |
|
|
|
|
Lat : this.unitData.location.y, |
|
|
|
|
Distance : Distance, |
|
|
|
|
WaterSourceTypes :this.selectedWaterList |
|
|
|
|
} |
|
|
|
|
console.log('paramsdata',paramsdata) |
|
|
|
|
this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => { |
|
|
|
|
console.log('所有水源',data) |
|
|
|
|
this.createwaterMarker(data.items) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//循环渲染出所有水源markers
|
|
|
|
|
waterCluster:any //水源聚合实例
|
|
|
|
|
createwaterMarker(list){ |
|
|
|
|
let waterMarkerArrcluster = [] |
|
|
|
|
this.waterCluster ? this.waterCluster.setData([]) : null |
|
|
|
|
list.forEach((item) => { |
|
|
|
|
let image |
|
|
|
|
if(item.waterSourceType == 0){//消火栓
|
|
|
|
|
image = '/assets/waterMarkers/市政消火栓.png' |
|
|
|
|
}else if(item.waterSourceType == 1){//消防水池
|
|
|
|
|
image = '/assets/waterMarkers/方形储水池.png' |
|
|
|
|
}else if(item.waterSourceType == 2){//天然水源
|
|
|
|
|
image = '/assets/waterMarkers/天然水源.png' |
|
|
|
|
} |
|
|
|
|
// 用于点集合的数组
|
|
|
|
|
waterMarkerArrcluster.push({ |
|
|
|
|
lnglat : [item.location.x,item.location.y], |
|
|
|
|
image : image, |
|
|
|
|
data : item |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
this.map.plugin(["AMap.MarkerClusterer"],() => { |
|
|
|
|
var gridSize = 60 |
|
|
|
|
var count = waterMarkerArrcluster.length; |
|
|
|
|
var _renderClusterMarker = function (context) { |
|
|
|
|
var factor = Math.pow(context.count / count, 1 / 18); |
|
|
|
|
var div = document.createElement('div'); |
|
|
|
|
var Hue = 180 - factor * 180; |
|
|
|
|
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; |
|
|
|
|
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
|
|
|
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; |
|
|
|
|
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; |
|
|
|
|
div.style.backgroundColor = bgColor; |
|
|
|
|
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); |
|
|
|
|
div.style.width = div.style.height = size + 'px'; |
|
|
|
|
div.style.border = 'solid 1px ' + borderColor; |
|
|
|
|
div.style.borderRadius = size / 2 + 'px'; |
|
|
|
|
div.style.boxShadow = '0 0 5px ' + shadowColor; |
|
|
|
|
div.innerHTML = context.count; |
|
|
|
|
div.style.lineHeight = size + 'px'; |
|
|
|
|
div.style.color = fontColor; |
|
|
|
|
div.style.fontSize = '14px'; |
|
|
|
|
div.style.textAlign = 'center'; |
|
|
|
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2)); |
|
|
|
|
context.marker.setContent(div) |
|
|
|
|
}; |
|
|
|
|
var _renderMarker = (context)=> { |
|
|
|
|
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; |
|
|
|
|
var offset = new AMap.Pixel(-12.5, -12.5); |
|
|
|
|
context.marker.setContent(content) |
|
|
|
|
context.marker.setOffset(offset) |
|
|
|
|
} |
|
|
|
|
this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { |
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
|
|
}); |
|
|
|
|
this.waterCluster.on('click',(e)=>{ |
|
|
|
|
if(e.clusterData.length == 1){ |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//取消显示水源
|
|
|
|
|
resetWater(){ |
|
|
|
|
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点
|
|
|
|
|
this.waterIconList = [] |
|
|
|
|
this.watertForm.reset() |
|
|
|
|
this.watertForm.controls.areaWater.setValue('0') |
|
|
|
|
this.map.remove(this.circleofwater) |
|
|
|
|
this.waterCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//计算两地距离
|
|
|
|
|
@ -158,56 +230,35 @@ export class WaterRoadComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//地图初始化
|
|
|
|
|
unitMarker:any//单位标点
|
|
|
|
|
newPositionMarkerContent:any =
|
|
|
|
|
'<div class="custom-content-marker">' + |
|
|
|
|
' <img style="width:20px;height:26px" src="/assets/images/定位.png">' + |
|
|
|
|
'</div>' |
|
|
|
|
creatMap(){ |
|
|
|
|
let that = this |
|
|
|
|
var layer = new AMap.createDefaultLayer({ |
|
|
|
|
zooms:[3,20], //可见级别
|
|
|
|
|
visible:true, //是否可见
|
|
|
|
|
opacity:1, //透明度
|
|
|
|
|
zIndex:0, //叠加层级
|
|
|
|
|
resizeEnable: true //是否监控地图容器尺寸变化,
|
|
|
|
|
}) |
|
|
|
|
that.map = new AMap.Map('center',{ |
|
|
|
|
layers:[layer], //当只想显示标准图层时layers属性可缺省,
|
|
|
|
|
this.map = new AMap.Map('center',{ |
|
|
|
|
zoom: 13, //初始地图级别
|
|
|
|
|
}); |
|
|
|
|
that.map.setCity('上海市'); |
|
|
|
|
if(this.unitData.location && this.unitData.location.x){ |
|
|
|
|
this.map.setCenter([this.unitData.location.x,this.unitData.location.y]); |
|
|
|
|
this.unitMarker = new AMap.Marker({ |
|
|
|
|
position: [this.unitData.location.x,this.unitData.location.y], |
|
|
|
|
content: this.newPositionMarkerContent, |
|
|
|
|
offset: new AMap.Pixel(-10, -13) |
|
|
|
|
}) |
|
|
|
|
// 将 markers 添加到地图
|
|
|
|
|
this.map.add(this.unitMarker); |
|
|
|
|
this.waterSubmit(1) |
|
|
|
|
}else{ |
|
|
|
|
this.map.setCity('上海市'); |
|
|
|
|
let config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('请先前往基本信息标注单位位置','确定',config); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//编辑水源道路情况
|
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-editBuilding', |
|
|
|
|
templateUrl: './edittext.html', |
|
|
|
|
styleUrls: ['./water-road.component.scss'] |
|
|
|
|
}) |
|
|
|
|
export class EditText { |
|
|
|
|
|
|
|
|
|
constructor(public snackBar: MatSnackBar,public dialog: MatDialog,public dialogRef: MatDialogRef<EditText>,@Inject(MAT_DIALOG_DATA) public data) { } |
|
|
|
|
textcontant:any = localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""//输入内容
|
|
|
|
|
iseditsix = true |
|
|
|
|
ngOnInit(): void { |
|
|
|
|
if(sessionStorage.getItem("six") == "look"){ |
|
|
|
|
this.iseditsix = false |
|
|
|
|
}else if(sessionStorage.getItem("six") == "edit"){ |
|
|
|
|
this.iseditsix = true |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//确定
|
|
|
|
|
ok(){ |
|
|
|
|
localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant) |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('保存成功','确定',config); |
|
|
|
|
this.dialogRef.close(); |
|
|
|
|
} |
|
|
|
|
//取消
|
|
|
|
|
cancel(){ |
|
|
|
|
this.dialogRef.close(); |
|
|
|
|
} |
|
|
|
|
} |
chenjingyu
4 years ago