|
|
|
|
@ -19,6 +19,8 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
selectedTitle:number
|
|
|
|
|
titleList = [ {name:'重点单位',iconImg:'/assets/images/uniticon.png'}, |
|
|
|
|
{name:'水源',iconImg:'/assets/images/watericon.png'}, |
|
|
|
|
{name:'消防力量',iconImg:'/assets/images/消防力量.png'}, |
|
|
|
|
{name:'联动力量',iconImg:'/assets/images/联动力量.png'}, |
|
|
|
|
{name:'测量工具',iconImg:'/assets/images/distanceicon.png'}, |
|
|
|
|
{name:'图层选择',iconImg:'/assets/images/coverageicon.png'} |
|
|
|
|
] |
|
|
|
|
@ -28,13 +30,46 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
{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') |
|
|
|
|
@ -42,6 +77,13 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
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) => { |
|
|
|
|
@ -69,6 +111,17 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
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[] = [] |
|
|
|
|
@ -84,6 +137,21 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
}); |
|
|
|
|
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() |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
@ -102,6 +170,21 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
}); |
|
|
|
|
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 => { |
|
|
|
|
@ -114,6 +197,16 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
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 = new AMap.Circle({ |
|
|
|
|
@ -139,6 +232,32 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
fillColor: '#ee2200', |
|
|
|
|
zIndex: 50, |
|
|
|
|
}) |
|
|
|
|
//地图范围圆圈---消防力量
|
|
|
|
|
circleoffireForce = new AMap.Circle({ |
|
|
|
|
center: null, |
|
|
|
|
radius: 0, //半径
|
|
|
|
|
strokeOpacity: 1,
|
|
|
|
|
fillOpacity: 0.4, |
|
|
|
|
strokeStyle: 'dashed', |
|
|
|
|
strokeDasharray: [10, 10],
|
|
|
|
|
// 线样式还支持 'dashed'
|
|
|
|
|
fillColor: '#e830cc', |
|
|
|
|
zIndex: 50, |
|
|
|
|
}) |
|
|
|
|
//地图范围圆圈---联动力量
|
|
|
|
|
circleoflinkageForces = new AMap.Circle({ |
|
|
|
|
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){ |
|
|
|
|
@ -341,6 +460,271 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
this.map.remove(this.circle) |
|
|
|
|
this.unitCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//消防力量提交
|
|
|
|
|
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 = new AMap.LngLat(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/其他.png' |
|
|
|
|
}else if(item.level == 0){ |
|
|
|
|
image = '/assets/fireForcesMarkers/总队.png' |
|
|
|
|
}else if(item.level == 1){ |
|
|
|
|
image = '/assets/fireForcesMarkers/支队.png' |
|
|
|
|
}else if(item.level == 2){ |
|
|
|
|
image = '/assets/fireForcesMarkers/大队.png' |
|
|
|
|
}else if(item.level == 3){ |
|
|
|
|
image = '/assets/fireForcesMarkers/中队.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; |
|
|
|
|
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='clusterImg' src="${context.data[0].image}" alt="">`; |
|
|
|
|
var offset = new AMap.Pixel(-15, -15); |
|
|
|
|
context.marker.setContent(content) |
|
|
|
|
context.marker.setOffset(offset) |
|
|
|
|
} |
|
|
|
|
this.fireForceCluster = new AMap.MarkerCluster(this.map, fireForceMarkerArrcluster, { |
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
//取消消防力量
|
|
|
|
|
resetFireForce(){ |
|
|
|
|
this.fireForceForm.reset() |
|
|
|
|
this.fireForceForm.controls.areaFireForce.setValue('-1') |
|
|
|
|
this.map.remove(this.circleoffireForce) |
|
|
|
|
this.fireForceCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//联动力量提交
|
|
|
|
|
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 = new AMap.LngLat(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/安监.png' |
|
|
|
|
}else if(item.linkageForceType == 1){//消防水池
|
|
|
|
|
image = '/assets/linkageForcesMarkers/电力局.png' |
|
|
|
|
}else if(item.linkageForceType == 2){//天然联动力量
|
|
|
|
|
image = '/assets/linkageForcesMarkers/公安.png' |
|
|
|
|
}else if(item.linkageForceType == 3){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/海事.png' |
|
|
|
|
}else if(item.linkageForceType == 4){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/环保局.png' |
|
|
|
|
}else if(item.linkageForceType == 5){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/交通.png' |
|
|
|
|
}else if(item.linkageForceType == 6){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/民政.png' |
|
|
|
|
}else if(item.linkageForceType == 7){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/气象局.png' |
|
|
|
|
}else if(item.linkageForceType == 8){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/燃气局.png' |
|
|
|
|
}else if(item.linkageForceType == 9){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/市政.png' |
|
|
|
|
}else if(item.linkageForceType == 10){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/水利.png' |
|
|
|
|
}else if(item.linkageForceType == 11){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/通信.png' |
|
|
|
|
}else if(item.linkageForceType == 12){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/医疗.png' |
|
|
|
|
}else if(item.linkageForceType == 13){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/应急管理.png' |
|
|
|
|
}else if(item.linkageForceType == 14){//天然水源
|
|
|
|
|
image = '/assets/linkageForcesMarkers/住建.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; |
|
|
|
|
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='clusterImg' src="${context.data[0].image}" alt="">`; |
|
|
|
|
var offset = new AMap.Pixel(-15, -15); |
|
|
|
|
context.marker.setContent(content) |
|
|
|
|
context.marker.setOffset(offset) |
|
|
|
|
} |
|
|
|
|
this.linkageForcesCluster = new AMap.MarkerCluster(this.map, linkageForcesMarkerArrcluster, { |
|
|
|
|
gridSize: gridSize, // 设置网格像素大小
|
|
|
|
|
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
|
|
|
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
//取消联动力量
|
|
|
|
|
resetLinkageForces(){ |
|
|
|
|
this.linkageForcesForm.reset() |
|
|
|
|
this.linkageForcesForm.controls.areaLinkageForces.setValue('-1') |
|
|
|
|
this.map.remove(this.circleoflinkageForces) |
|
|
|
|
this.linkageForcesCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//水源提交
|
|
|
|
|
waterSubmit(value){ |
|
|
|
|
if(this.markers.length == 0){ |
|
|
|
|
@ -409,13 +793,6 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//取消显示水源
|
|
|
|
|
resetWater(){ |
|
|
|
|
this.watertForm.reset() |
|
|
|
|
this.watertForm.controls.areaWater.setValue('-1') |
|
|
|
|
this.map.remove(this.circleofwater) |
|
|
|
|
this.waterCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
//循环渲染出所有水源markers
|
|
|
|
|
waterCluster:any //水源聚合实例
|
|
|
|
|
@ -482,6 +859,14 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
//取消显示水源
|
|
|
|
|
resetWater(){ |
|
|
|
|
this.watertForm.reset() |
|
|
|
|
this.watertForm.controls.areaWater.setValue('-1') |
|
|
|
|
this.map.remove(this.circleofwater) |
|
|
|
|
this.waterCluster.setData([]) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//计算两地距离
|
|
|
|
|
Calculationofdistance(bounds){ |
|
|
|
|
@ -501,7 +886,6 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
this.keyUnitForm.controls.areaUnit.setValue('0') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//全选水源
|
|
|
|
|
selectedAllWater(event){ |
|
|
|
|
if(event.checked){ |
|
|
|
|
@ -511,7 +895,24 @@ export class GisLabelingComponent implements OnInit {
|
|
|
|
|
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') |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
chenjingyu
4 years ago
