diff --git a/src/app/data-collection/water-collection/water-collection.component.ts b/src/app/data-collection/water-collection/water-collection.component.ts
index c88aa80..153eba2 100644
--- a/src/app/data-collection/water-collection/water-collection.component.ts
+++ b/src/app/data-collection/water-collection/water-collection.component.ts
@@ -33,10 +33,95 @@ export class WaterCollectionComponent implements OnInit {
{id:5,name:'90%-100%'}
]
checkBoxList:any[] = [
- {id:0,name:'消火栓'},
- {id:1,name:'消防水池'},
- {id:2,name:'天然水源'}
+ {id:0,name:'消火栓',isChecked:false},
+ {id:1,name:'消防水池',isChecked:false},
+ {id:2,name:'天然水源',isChecked:false}
]
+ //勾选水源类型checkbox在地图上显示marker
+ checkBoxChange(){
+ let WaterSourceTypesArr = []
+ this.checkBoxList.forEach(item =>{
+ if(item.isChecked){
+ WaterSourceTypesArr.push(item.id)
+ }
+ })
+ let params:any = {
+ PageSize : 999999,
+ WaterSourceTypes:WaterSourceTypesArr
+ }
+ if(WaterSourceTypesArr.length != 0){//如果勾选了checkbox
+ this.http.get('/api/WaterSources',{params:params}).subscribe((data:any) => {
+ this.createMarker(data.items)
+ })
+ }else{
+ this.cluster.setData([])
+ }
+ }
+ //循环渲染出所有水源markers
+ cluster:any //水源聚合实例
+ createMarker(list){
+ let markerArrcluster = []
+ this.cluster ? this.cluster.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'
+ }
+ // 用于点集合的数组
+ markerArrcluster.push({
+ lnglat : [item.location.x,item.location.y],
+ image : image,
+ data : item
+ })
+ })
+ this.map.plugin(["AMap.MarkerClusterer"],() => {
+ var gridSize = 60
+ var count = markerArrcluster.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 = `

`;
+ context.marker.setContent(content)
+ var offset = new AMap.Pixel(-12.5, -12.5);
+ context.marker.setOffset(offset)
+ }
+ this.cluster = new AMap.MarkerCluster(this.map, markerArrcluster, {
+ gridSize: gridSize, // 设置网格像素大小
+ renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
+ renderMarker: _renderMarker, // 自定义非聚合点样式
+ });
+ this.cluster.on('click',(e)=>{
+ if(e.clusterData.length == 1){
+
+ }
+ })
+ });
+
+ }
ngOnInit(): void {
this.getAllWaterData()
setTimeout(() => {
diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts
index d8d3330..5fc2e49 100644
--- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts
+++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts
@@ -440,11 +440,11 @@ export class GisLabelingComponent implements OnInit {
list.forEach((item) => {
let image
if(item.waterSourceType == 0){//消火栓
- image = '/assets/images/市政消火栓.png'
+ image = '/assets/waterMarkers/市政消火栓.png'
}else if(item.waterSourceType == 1){//消防水池
- image = '/assets/images/方形储水池.png'
+ image = '/assets/waterMarkers/方形储水池.png'
}else if(item.waterSourceType == 2){//天然水源
- image = '/assets/images/天然水源.png'
+ image = '/assets/waterMarkers/天然水源.png'
}
// 用于点集合的数组
waterMarkerArrcluster.push({
@@ -479,8 +479,8 @@ export class GisLabelingComponent implements OnInit {
context.marker.setContent(div)
};
var _renderMarker = (context)=> {
- var content = `

`;
- var offset = new AMap.Pixel(-15, -25);
+ var content = `

`;
+ var offset = new AMap.Pixel(-12.5, -12.5);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
diff --git a/src/assets/fireForcesMarkers/中队.png b/src/assets/fireForcesMarkers/中队.png
new file mode 100644
index 0000000..e32707d
Binary files /dev/null and b/src/assets/fireForcesMarkers/中队.png differ
diff --git a/src/assets/fireForcesMarkers/其他.png b/src/assets/fireForcesMarkers/其他.png
new file mode 100644
index 0000000..db5e809
Binary files /dev/null and b/src/assets/fireForcesMarkers/其他.png differ
diff --git a/src/assets/fireForcesMarkers/大队.png b/src/assets/fireForcesMarkers/大队.png
new file mode 100644
index 0000000..f58f18c
Binary files /dev/null and b/src/assets/fireForcesMarkers/大队.png differ
diff --git a/src/assets/fireForcesMarkers/总队.png b/src/assets/fireForcesMarkers/总队.png
new file mode 100644
index 0000000..45f48e3
Binary files /dev/null and b/src/assets/fireForcesMarkers/总队.png differ
diff --git a/src/assets/fireForcesMarkers/支队.png b/src/assets/fireForcesMarkers/支队.png
new file mode 100644
index 0000000..a9174d2
Binary files /dev/null and b/src/assets/fireForcesMarkers/支队.png differ
diff --git a/src/assets/images/市政消火栓(地上).png b/src/assets/images/市政消火栓(地上).png
new file mode 100644
index 0000000..6e46ae1
Binary files /dev/null and b/src/assets/images/市政消火栓(地上).png differ
diff --git a/src/assets/linkageForcesMarkers/交通.png b/src/assets/linkageForcesMarkers/交通.png
new file mode 100644
index 0000000..386b5d3
Binary files /dev/null and b/src/assets/linkageForcesMarkers/交通.png differ
diff --git a/src/assets/linkageForcesMarkers/住建.png b/src/assets/linkageForcesMarkers/住建.png
new file mode 100644
index 0000000..dab8daf
Binary files /dev/null and b/src/assets/linkageForcesMarkers/住建.png differ
diff --git a/src/assets/linkageForcesMarkers/公安.png b/src/assets/linkageForcesMarkers/公安.png
new file mode 100644
index 0000000..a6cec4a
Binary files /dev/null and b/src/assets/linkageForcesMarkers/公安.png differ
diff --git a/src/assets/linkageForcesMarkers/医疗.png b/src/assets/linkageForcesMarkers/医疗.png
new file mode 100644
index 0000000..5f3be9d
Binary files /dev/null and b/src/assets/linkageForcesMarkers/医疗.png differ
diff --git a/src/assets/linkageForcesMarkers/安监.png b/src/assets/linkageForcesMarkers/安监.png
new file mode 100644
index 0000000..46f9fc7
Binary files /dev/null and b/src/assets/linkageForcesMarkers/安监.png differ
diff --git a/src/assets/linkageForcesMarkers/市政.png b/src/assets/linkageForcesMarkers/市政.png
new file mode 100644
index 0000000..0345753
Binary files /dev/null and b/src/assets/linkageForcesMarkers/市政.png differ
diff --git a/src/assets/linkageForcesMarkers/应急管理.png b/src/assets/linkageForcesMarkers/应急管理.png
new file mode 100644
index 0000000..0adac17
Binary files /dev/null and b/src/assets/linkageForcesMarkers/应急管理.png differ
diff --git a/src/assets/linkageForcesMarkers/民政.png b/src/assets/linkageForcesMarkers/民政.png
new file mode 100644
index 0000000..dca1267
Binary files /dev/null and b/src/assets/linkageForcesMarkers/民政.png differ
diff --git a/src/assets/linkageForcesMarkers/气象局.png b/src/assets/linkageForcesMarkers/气象局.png
new file mode 100644
index 0000000..f3b6688
Binary files /dev/null and b/src/assets/linkageForcesMarkers/气象局.png differ
diff --git a/src/assets/linkageForcesMarkers/水利.png b/src/assets/linkageForcesMarkers/水利.png
new file mode 100644
index 0000000..d2fc5c5
Binary files /dev/null and b/src/assets/linkageForcesMarkers/水利.png differ
diff --git a/src/assets/linkageForcesMarkers/海事.png b/src/assets/linkageForcesMarkers/海事.png
new file mode 100644
index 0000000..8d8d050
Binary files /dev/null and b/src/assets/linkageForcesMarkers/海事.png differ
diff --git a/src/assets/linkageForcesMarkers/燃气局.png b/src/assets/linkageForcesMarkers/燃气局.png
new file mode 100644
index 0000000..ffcd19b
Binary files /dev/null and b/src/assets/linkageForcesMarkers/燃气局.png differ
diff --git a/src/assets/linkageForcesMarkers/环保局.png b/src/assets/linkageForcesMarkers/环保局.png
new file mode 100644
index 0000000..d391ce5
Binary files /dev/null and b/src/assets/linkageForcesMarkers/环保局.png differ
diff --git a/src/assets/linkageForcesMarkers/电力局.png b/src/assets/linkageForcesMarkers/电力局.png
new file mode 100644
index 0000000..4ff9f6b
Binary files /dev/null and b/src/assets/linkageForcesMarkers/电力局.png differ
diff --git a/src/assets/linkageForcesMarkers/通信.png b/src/assets/linkageForcesMarkers/通信.png
new file mode 100644
index 0000000..3bd0a03
Binary files /dev/null and b/src/assets/linkageForcesMarkers/通信.png differ
diff --git a/src/assets/waterMarkers/天然水源.png b/src/assets/waterMarkers/天然水源.png
new file mode 100644
index 0000000..8daa2c1
Binary files /dev/null and b/src/assets/waterMarkers/天然水源.png differ
diff --git a/src/assets/waterMarkers/市政消火栓.png b/src/assets/waterMarkers/市政消火栓.png
new file mode 100644
index 0000000..9622895
Binary files /dev/null and b/src/assets/waterMarkers/市政消火栓.png differ
diff --git a/src/assets/waterMarkers/方形储水池.png b/src/assets/waterMarkers/方形储水池.png
new file mode 100644
index 0000000..d7862c1
Binary files /dev/null and b/src/assets/waterMarkers/方形储水池.png differ
diff --git a/src/styles.scss b/src/styles.scss
index a1e9b69..7c77928 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -192,3 +192,8 @@ table td.mat-footer-cell:last-of-type{
width: 30px;
height: 30px;
}
+//水源采集点聚合
+.clusterImgCollection{
+ width:25px;
+ height:25px;
+}
\ No newline at end of file