[新增]新增数据采集页面gis点聚合显示

src/app/data-collection/fire-force/fire-force.component.html

@@ -94,7 +94,7 @@
     </div>
     <div class="mapbox">
         <div class="mapcheckbox">
-            <mat-checkbox color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
+            <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
         </div>
         <div id="map" class="map" style="overflow: hidden;">
             <div id="container"></div>

src/app/data-collection/fire-force/fire-force.component.ts

@@ -38,12 +38,104 @@ export class FireForceComponent implements OnInit {
     {id:5,name:'90%-100%'}
   ]
   checkBoxList:any[] = [
-    {id:0,name:'总队'},
-    {id:1,name:'支队'},
-    {id:2,name:'大队'},
-    {id:3,name:'中队(消防站)'},
-    {id:4,name:'其他消防队伍'}
+    {id:0,name:'总队',isChecked:false},
+    {id:1,name:'支队',isChecked:false},
+    {id:2,name:'大队',isChecked:false},
+    {id:3,name:'中队(消防站)',isChecked:false},
+    {id:4,name:'其他消防队伍',isChecked:false}
   ]
+   //勾选力量类型checkbox在地图上显示marker
+   checkBoxChange(){
+    let Levels = []
+    this.checkBoxList.forEach(item =>{
+      if(item.isChecked){
+        Levels.push(item.id)
+      }
+    })
+    let params:any = {
+      PageSize : 999999,
+      Levels:Levels
+    }
+    console.log('4444',Levels)
+    if(Levels.length != 0){//如果勾选了checkbox
+      this.http.get('/api/CustomFireForce',{params:params}).subscribe((data:any) => {
+        console.log('所有力量',data)
+        this.createMarker(data)
+      })
+    }else{
+      this.cluster.setData([])
+    }
+  }
+  //循环渲染出所有力量markers
+  cluster:any //力量聚合实例
+  createMarker(list){
+    let markerArrcluster = []
+    this.cluster ? this.cluster.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 ? 
+      markerArrcluster.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 = 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 = `<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.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.getAllFireForce()
     setTimeout(() => {

src/app/data-collection/linkage-forces/linkage-forces.component.html

@@ -62,9 +62,9 @@
         <div class="mapcheckbox swiper-container">
 
             <div class="swiper-wrapper">
-                <mat-checkbox class="swiper-slide" color="primary" *ngFor="let item of checkBoxList">
+                <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" class="swiper-slide" color="primary" *ngFor="let item of checkBoxList">
                     <span>
-                        <img [src]="item.imgUrl" alt="">
+                        <img style="width: 16px;height:16px;" [src]="item.imgUrl" alt="">
                         {{item.name}}
                     </span>
                 </mat-checkbox>

src/app/data-collection/linkage-forces/linkage-forces.component.ts

@@ -39,22 +39,133 @@ export class LinkageForcesComponent implements OnInit {
     {id:5,name:'90%-100%'}
   ]
   checkBoxList:any[] = [
-    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png'},
-    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png'},
-    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png'},
-    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png'},
-    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png'},
-    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png'},
-    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png'},
-    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png'},
-    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png'},
-    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png'},
-    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png'},
-    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png'},
-    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png'},
-    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png'},
-    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png'}
+    {id:0,name:'安监',imgUrl:'/assets/linkageForces/安监.png',isChecked:false},
+    {id:1,name:'电力局',imgUrl:'/assets/linkageForces/电力局.png',isChecked:false},
+    {id:2,name:'公安',imgUrl:'/assets/linkageForces/公安.png',isChecked:false},
+    {id:3,name:'海事',imgUrl:'/assets/linkageForces/海事.png',isChecked:false},
+    {id:4,name:'环保局',imgUrl:'/assets/linkageForces/环保局.png',isChecked:false},
+    {id:5,name:'交通',imgUrl:'/assets/linkageForces/交通.png',isChecked:false},
+    {id:6,name:'民政',imgUrl:'/assets/linkageForces/民政.png',isChecked:false},
+    {id:7,name:'气象局',imgUrl:'/assets/linkageForces/气象局.png',isChecked:false},
+    {id:8,name:'燃气局',imgUrl:'/assets/linkageForces/燃气局.png',isChecked:false},
+    {id:9,name:'市政',imgUrl:'/assets/linkageForces/市政.png',isChecked:false},
+    {id:10,name:'水利',imgUrl:'/assets/linkageForces/水利.png',isChecked:false},
+    {id:11,name:'通信',imgUrl:'/assets/linkageForces/通信.png',isChecked:false},
+    {id:12,name:'医疗',imgUrl:'/assets/linkageForces/医疗.png',isChecked:false},
+    {id:13,name:'应急管理',imgUrl:'/assets/linkageForces/应急管理.png',isChecked:false},
+    {id:14,name:'住建',imgUrl:'/assets/linkageForces/住建.png',isChecked:false}
   ]
+  //勾选力量类型checkbox在地图上显示marker
+  checkBoxChange(){
+    let LinkageForceTypes = []
+    this.checkBoxList.forEach(item =>{
+      if(item.isChecked){
+        LinkageForceTypes.push(item.id)
+      }
+    })
+    let params:any = {
+      PageSize : 999999,
+      LinkageForceTypes:LinkageForceTypes
+    }
+    console.log('4444',LinkageForceTypes)
+    if(LinkageForceTypes.length != 0){//如果勾选了checkbox
+      this.http.get('/api/LinkageForces',{params:params}).subscribe((data:any) => {
+        console.log('所有力量',data)
+        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.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'
+      }
+      // 用于点集合的数组
+      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 = `<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.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.getAllFireForce()
     window.onload = () => {

src/app/data-collection/water-collection/water-collection.component.html

@@ -58,7 +58,7 @@
     </div>
     <div class="mapbox">
         <div class="mapcheckbox">
-            <mat-checkbox color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
+            <mat-checkbox (change)="checkBoxChange()" [(ngModel)]="item.isChecked" color="primary" *ngFor="let item of checkBoxList">{{item.name}}</mat-checkbox>
         </div>
         <div id="map" class="map" style="overflow: hidden;">
             <div id="container"></div>

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 = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
+        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(() => {

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 = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
-        var offset = new AMap.Pixel(-15, -25);
+        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)
       }

src/styles.scss

@@ -192,3 +192,8 @@ table td.mat-footer-cell:last-of-type{
 	width: 30px;
 	height: 30px;
 }
+//水源采集点聚合
+.clusterImgCollection{
+	width:25px;
+	height:25px;
+}