diff --git a/src/app/data-collection/fire-force/fire-force.component.html b/src/app/data-collection/fire-force/fire-force.component.html index 94191c0..90520a6 100644 --- a/src/app/data-collection/fire-force/fire-force.component.html +++ b/src/app/data-collection/fire-force/fire-force.component.html @@ -94,7 +94,7 @@
- {{item.name}} + {{item.name}}
diff --git a/src/app/data-collection/fire-force/fire-force.component.ts b/src/app/data-collection/fire-force/fire-force.component.ts index 5784fa2..9764080 100644 --- a/src/app/data-collection/fire-force/fire-force.component.ts +++ b/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 = ``; + 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(() => { diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.html b/src/app/data-collection/linkage-forces/linkage-forces.component.html index abc51c7..632b6a9 100644 --- a/src/app/data-collection/linkage-forces/linkage-forces.component.html +++ b/src/app/data-collection/linkage-forces/linkage-forces.component.html @@ -62,9 +62,9 @@
- + - + {{item.name}} diff --git a/src/app/data-collection/linkage-forces/linkage-forces.component.ts b/src/app/data-collection/linkage-forces/linkage-forces.component.ts index 919b746..21ef260 100644 --- a/src/app/data-collection/linkage-forces/linkage-forces.component.ts +++ b/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 = ``; + 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 = () => { diff --git a/src/app/data-collection/water-collection/water-collection.component.html b/src/app/data-collection/water-collection/water-collection.component.html index 9fe492c..763a772 100644 --- a/src/app/data-collection/water-collection/water-collection.component.html +++ b/src/app/data-collection/water-collection/water-collection.component.html @@ -58,7 +58,7 @@
- {{item.name}} + {{item.name}}
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