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 5af82b6..d4ace7c 100644 --- a/src/app/data-collection/fire-force/fire-force.component.ts +++ b/src/app/data-collection/fire-force/fire-force.component.ts @@ -12,7 +12,6 @@ import { Console } from 'console'; import { TreeService } from 'src/app/http-interceptors/tree.service'; import Viewer from 'viewerjs' declare var CryptoJS -declare var AMap: any; @Component({ selector: 'app-fire-force', @@ -93,108 +92,108 @@ export class FireForceComponent implements OnInit { data : item }) : null }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; + var gridSize = 60 + var count = markerArrcluster.length; - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let node = e.clusterData[0].data - // console.log(node) - this.clearData() - this.selectedFireForce = node.fireForceDetailInfo - this.selectedFireForceId = node.fireForceDetailId - if(node.forceType != 0){//如果是其他消防力量 - this.selectedFireForceLevel = 4 + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 + }); + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let node = e.clusterData[0].data + // console.log(node) + this.clearData() + this.selectedFireForce = node.fireForceDetailInfo + this.selectedFireForceId = node.fireForceDetailId + if(node.forceType != 0){//如果是其他消防力量 + this.selectedFireForceLevel = 4 + }else{ + this.selectedFireForceLevel = node.level + } + this.FireForceDetailInfo.stationName = node.fireForceDetailInfo.name + + if(node.fireForceDetailId){ + let type + if(node.forceType == 0){ + type = 0 }else{ - this.selectedFireForceLevel = node.level + type = 1 } - this.FireForceDetailInfo.stationName = node.fireForceDetailInfo.name - - if(node.fireForceDetailId){ - let type - if(node.forceType == 0){ - type = 0 - }else{ - type = 1 + this.isMasklayer = true + this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { + this.isMasklayer = false + this.FireForceDetailInfo = data + if(data.location && data.location.x){//如果已经标注单位坐标 + this.positionLngLat = data.location } - this.isMasklayer = true - this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { - this.isMasklayer = false - this.FireForceDetailInfo = data - if(data.location && data.location.x){//如果已经标注单位坐标 - this.positionLngLat = data.location - } - //相关资料 - data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null + //相关资料 + data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null - if(node.forceType == 0 && node.level == 0){ - this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData - this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData - } - if(node.forceType == 0 && node.level == 1){ - this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData - this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData - } - if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ - this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData - this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData - } - if(node.forceType != 0){ - this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData - this.othercontactData = JSON.parse(data.contactData) || this.otherpersonCountData - } - }) - - } - //寻找管辖单位 - this.allFireForceList.forEach(item => { - if(item.id == node.parentId){ - this.superior.name = item.name - this.superior.code = item.code + if(node.forceType == 0 && node.level == 0){ + this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData + this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData + } + if(node.forceType == 0 && node.level == 1){ + this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData + this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData + } + if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ + this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData + this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData + } + if(node.forceType != 0){ + this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData + this.othercontactData = JSON.parse(data.contactData) || this.otherpersonCountData } }) + } - }) - }); - + //寻找管辖单位 + this.allFireForceList.forEach(item => { + if(item.id == node.parentId){ + this.superior.name = item.name + this.superior.code = item.code + } + }) + } + }) + + } ngOnInit(): void { this.getAllFireForce() @@ -823,16 +822,14 @@ export class FireForceComponent implements OnInit { var autoOptions = { input: "tipinput" }; - this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = MapFactory.AutocompleteInstance(autoOptions); - this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions); + this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // 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 ea85ea4..a241059 100644 --- a/src/app/data-collection/linkage-forces/linkage-forces.component.ts +++ b/src/app/data-collection/linkage-forces/linkage-forces.component.ts @@ -13,7 +13,7 @@ import Swiper from 'swiper'; import { MapFactory } from '@src/modules/map/declare/factory'; import { IMap, IMarker } from '@src/modules/map/declare/map'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-linkage-forces', templateUrl: './linkage-forces.component.html', @@ -126,58 +126,58 @@ export class LinkageForcesComponent implements OnInit { }) } }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; - - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let item = e.clusterData[0].data - this.clearData() - this.LinkageForceDetailInfo = item - item.location?this.positionLngLat = item.location:null - this.AttachmentArr = JSON.parse(item.relevantInfomationData) - } - }) + var gridSize = 60 + var count = markerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let item = e.clusterData[0].data + this.clearData() + this.LinkageForceDetailInfo = item + item.location?this.positionLngLat = item.location:null + this.AttachmentArr = JSON.parse(item.relevantInfomationData) + } + }) + } ngOnInit(): void { @@ -543,16 +543,14 @@ export class LinkageForcesComponent implements OnInit { var autoOptions = { input: "tipinput" }; - this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = MapFactory.AutocompleteInstance(autoOptions); - this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions); + this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // 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 3df931e..fdff149 100644 --- a/src/app/data-collection/water-collection/water-collection.component.ts +++ b/src/app/data-collection/water-collection/water-collection.component.ts @@ -6,7 +6,6 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MapFactory } from '@src/modules/map/declare/factory'; import { IMap, IMarker } from '@src/modules/map/declare/map'; -declare var AMap: any; @Component({ selector: 'app-water-collection', @@ -82,63 +81,63 @@ export class WaterCollectionComponent implements OnInit { }) } }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = markerArrcluster.length; - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; + var gridSize = 60 + var count = markerArrcluster.length; - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.cluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - let item = e.clusterData[0].data - // console.log(item) - this.selectedLiIndex = null - this.clearData() - this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型 - this.waterData = item - item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null - item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null - item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null - this.positionLngLat = item.location - } - }) + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); - + this.cluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + let item = e.clusterData[0].data + // console.log(item) + this.selectedLiIndex = null + this.clearData() + this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型 + this.waterData = item + item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null + item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null + item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null + this.positionLngLat = item.location + } + }) + + } ngOnInit(): void { // console.log(88888,navigator.userAgent) @@ -548,16 +547,14 @@ export class WaterCollectionComponent implements OnInit { var autoOptions = { input: "tipinput" }; - this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ - let auto = MapFactory.AutocompleteInstance(autoOptions); - this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 - auto.on("select", (e)=>{ - this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) - this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} - this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 + let auto = MapFactory.AutocompleteInstance(autoOptions); + this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 + auto.on("select", (e)=>{ + this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) + this.positionLngLat = {x: e.poi.location.lng, y: e.poi.location.lat} + this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 - }); } //点击位置 isGisTopBox:boolean = false // 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 ca8600a..5b4bb45 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -365,101 +365,101 @@ export class GisLabelingComponent implements OnInit { data: item }) }) - this.map.plugin(["AMap.MarkerClusterer"], () => { - var gridSize = 60 - var count = unitMarkerArrcluster.length; - - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; - - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.unitCluster.on('click', (e) => { - if (e.clusterData.length == 1) { - let item = e.clusterData[0].data - let markerContent = - `
-
${item.name}
-
-
单位性质:
-
消防负责人:
-
-
-
防火级别:
-
消防管理人:
-
-
-
防火管辖:
-
防火监督员:
-
-
-
责任队站:
-
总建筑面积:
-
-
-
建筑信息分类:
-
总占地面积:
-
-
-
值班电话:
-
-
-
基本信息
-
导航
-
全景漫游
-
三维场景
-
查看预案
-
分享
-
-
` - // 创建一个自定义内容的 infowindow 实例 - this.infoWindow = MapFactory.InfoWindowInstance({ - position: [item.location.x, item.location.y], - offset: MapFactory.PixelInstance(0, -30), - content: markerContent, - }); - this.infoWindow.open(this.map); - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件 - this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件 - } - }) + + var gridSize = 60 + var count = unitMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + this.unitCluster.on('click', (e) => { + if (e.clusterData.length == 1) { + let item = e.clusterData[0].data + let markerContent = + `
+
${item.name}
+
+
单位性质:
+
消防负责人:
+
+
+
防火级别:
+
消防管理人:
+
+
+
防火管辖:
+
防火监督员:
+
+
+
责任队站:
+
总建筑面积:
+
+
+
建筑信息分类:
+
总占地面积:
+
+
+
值班电话:
+
+
+
基本信息
+
导航
+
全景漫游
+
三维场景
+
查看预案
+
分享
+
+
` + // 创建一个自定义内容的 infowindow 实例 + this.infoWindow = MapFactory.InfoWindowInstance({ + position: [item.location.x, item.location.y], + offset: MapFactory.PixelInstance(0, -30), + content: markerContent, + }); + this.infoWindow.open(this.map); + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'), 'click', (event) => { this.baseInformation(item) })//基本信息点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'), 'click', (event) => { this.route(item) })//导航点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'), 'click', (event) => { this.fullViewNavigation(item) })//全景漫游点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'), 'click', (event) => { this.threeeScene(item) })//三维场景点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'), 'click', (event) => { this.seePlan(item) })//查看预案点击事件 + this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'), 'click', (event) => { this.share(item) })//分享点击事件 + } + }) + } //取消显示单位 @@ -541,48 +541,48 @@ export class GisLabelingComponent implements OnInit { data: item }) : null }) - this.map.plugin(["AMap.MarkerClusterer"], () => { - var gridSize = 60 - var count = fireForceMarkerArrcluster.length; - - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; - - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); + + var gridSize = 60 + var count = fireForceMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + } //取消消防力量 resetFireForce() { @@ -689,49 +689,49 @@ export class GisLabelingComponent implements OnInit { } // 用于点集合的数组 }) - this.map.plugin(["AMap.MarkerClusterer"], () => { - var gridSize = 60 - var count = linkageForcesMarkerArrcluster.length; - - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; - - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); + var gridSize = 60 + var count = linkageForcesMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + + this.linkageForcesCluster = MapFactory.MarkerClusterInstance(this.map, linkageForcesMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + } //取消联动力量 resetLinkageForces() { @@ -835,89 +835,88 @@ export class GisLabelingComponent implements OnInit { data: item }) }) - this.map.plugin(["AMap.MarkerClusterer"], () => { - var gridSize = 60 - var count = waterMarkerArrcluster.length; - - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; - - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - // 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(MapFactory.PixelInstance(-size / 2, -size / 2)); - // context.marker.setContent(div) - // }; - // var _renderMarker = (context) => { - // var content = ``; - // var offset = MapFactory.PixelInstance(-15, -15); - // context.marker.setContent(content) - // context.marker.setOffset(offset) - // } - this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - - // this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { - // gridSize: gridSize, // 设置网格像素大小 - // renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 - // renderMarker: _renderMarker, // 自定义非聚合点样式 - // }); - this.waterCluster.on('click', (e) => { - if (e.clusterData.length == 1) { + var gridSize = 60 + var count = waterMarkerArrcluster.length; + + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; + + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } - } - }) + // 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(MapFactory.PixelInstance(-size / 2, -size / 2)); + // context.marker.setContent(div) + // }; + // var _renderMarker = (context) => { + // var content = ``; + // var offset = MapFactory.PixelInstance(-15, -15); + // context.marker.setContent(content) + // context.marker.setOffset(offset) + // } + this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); + // 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() { @@ -1053,9 +1052,7 @@ export class GisLabelingComponent implements OnInit { }) that.map = MapFactory.MapInstance('map', { layers: [layer] }); that.map.setCity('上海市'); - that.map.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () { - that.mouseTool = MapFactory.MouseToolInstance(that.map); - }); + that.mouseTool = MapFactory.MouseToolInstance(that.map); } @@ -1087,17 +1084,7 @@ export class GisLabelingComponent implements OnInit { //清空距离测量 clearDistance() { - this.distanceList.forEach(item => { - if (item.className == 'AMap.Marker') { - let parent = item.dom.parentNode - let children = item.dom.nextElementSibling - parent && children ? parent.removeChild(item.dom.nextElementSibling) : null - this.map.remove(item) - } else { - this.map.remove(item) - } - }) - this.distanceList = [] //清空数组 + } //清空面积测量 @@ -1348,33 +1335,31 @@ export class GisLabelingComponent implements OnInit { this.timeout = window.setTimeout(() => { that.map.getCity(function (info) { //获取当前 city - that.map.plugin(['AMap.AutoComplete'], () => { - var autoOptions = { city: info.city } - let keywords - e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = MapFactory.AutocompleteInstance(autoOptions); - autoComplete.search(keywords, function (status, result) { - if (result && result.tips && result.tips.length) { //搜索到数据时 - that._ngZone.run(() => { - if (e == 0) {//起点 - that.routeStartList = result.tips - if (result.tips.length != 0) { - for (let index = 0; index < result.tips.length; index++) { - const element = result.tips[index]; - if (element.location) { - that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) - return - } + var autoOptions = { city: info.city } + let keywords + e == 0 ? keywords = that.routeStart : keywords = that.routeEnd + var autoComplete = MapFactory.AutocompleteInstance(autoOptions); + autoComplete.search(keywords, function (status, result) { + if (result && result.tips && result.tips.length) { //搜索到数据时 + that._ngZone.run(() => { + if (e == 0) {//起点 + that.routeStartList = result.tips + if (result.tips.length != 0) { + for (let index = 0; index < result.tips.length; index++) { + const element = result.tips[index]; + if (element.location) { + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) + return } } - } else {//终点 - that.routeEndList = result.tips - that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) } - }); + } else {//终点 + that.routeEndList = result.tips + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) + } + }); - } //if - }) + } //if }) }); //获取当前 city diff --git a/src/app/key-unit/basicinfo-look/basicinfo.component.ts b/src/app/key-unit/basicinfo-look/basicinfo.component.ts index d3be91e..21543c8 100644 --- a/src/app/key-unit/basicinfo-look/basicinfo.component.ts +++ b/src/app/key-unit/basicinfo-look/basicinfo.component.ts @@ -5,15 +5,9 @@ import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import format from 'date-fns/format'; import { TreeService } from '../../http-interceptors/tree.service' import { FileUploader, FileItem } from 'ng2-file-upload' import { DomSanitizer } from '@angular/platform-browser' -import { Injectable } from "@angular/core" -import { filter } from 'rxjs/operators'; -import { async } from '@angular/core/testing'; -import { MatTableDataSource } from '@angular/material/table'; -import { isNgTemplate } from '@angular/compiler'; import * as _ from 'lodash'; import Swiper from 'swiper'; import { ActivatedRoute } from '@angular/router'; @@ -21,7 +15,6 @@ import { StatisticsOfFireFightingFacilities } from '../basicinfo/basicinfo.compo import Viewer from 'viewerjs'; import { IMap, IMarker } from '@src/modules/map/declare/map'; import { MapFactory } from '@src/modules/map/declare/factory'; -declare var AMap: any; @Component({ selector: 'app-basicinfo-look', diff --git a/src/app/key-unit/basicinfo/basicinfo.component.ts b/src/app/key-unit/basicinfo/basicinfo.component.ts index 2a46af4..ba177a4 100644 --- a/src/app/key-unit/basicinfo/basicinfo.component.ts +++ b/src/app/key-unit/basicinfo/basicinfo.component.ts @@ -5,25 +5,19 @@ import { HttpClient, HttpHeaders, HttpEventType } from '@angular/common/http'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; -import format from 'date-fns/format'; import { TreeService } from '../../http-interceptors/tree.service' import { FileUploader, FileItem } from 'ng2-file-upload' import { AddHouseInfo } from './addhouseinfo.component' import { DomSanitizer } from '@angular/platform-browser' -import { Injectable } from "@angular/core" -import { filter } from 'rxjs/operators'; -import { async } from '@angular/core/testing'; -import { MatTableDataSource } from '@angular/material/table'; -import { isNgTemplate } from '@angular/compiler'; import * as _ from 'lodash'; import Swiper from 'swiper'; import { LookMaster } from './lookmaster.component' import { ActivatedRoute } from '@angular/router'; import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service'; -declare var AMap: any; import Viewer from 'viewerjs'; import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map'; import { MapFactory } from '@src/modules/map/declare/factory'; + @Component({ selector: 'app-basicinfo', templateUrl: './basicinfo.component.html', @@ -181,16 +175,13 @@ export class BasicinfoComponent implements OnInit { var autoOptions = { input: "tipinput" }; - this.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => { - var auto = MapFactory.AutocompleteInstance(autoOptions); - this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 - auto.on("select", (e) => { - this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) - this.markerPosition2 = { x: e.poi.location.lng, y: e.poi.location.lat } - this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 - });//注册监听,当选中某条记录时会触发 - - }); + var auto = MapFactory.AutocompleteInstance(autoOptions); + this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 + auto.on("select", (e) => { + this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) + this.markerPosition2 = { x: e.poi.location.lng, y: e.poi.location.lat } + this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 + });//注册监听,当选中某条记录时会触发 if (this.isMapLabel) {//如果已经标注单位坐标 // console.log('已标注单位位置') diff --git a/src/app/key-unit/router-gis/router-gis.component.ts b/src/app/key-unit/router-gis/router-gis.component.ts index 482eb50..eff2346 100644 --- a/src/app/key-unit/router-gis/router-gis.component.ts +++ b/src/app/key-unit/router-gis/router-gis.component.ts @@ -101,9 +101,7 @@ export class RouterGISComponent implements OnInit { layers:[layer], //当只想显示标准图层时layers属性可缺省, }); that.map.setCity('上海市'); - that.map.plugin('AMap.Driving', function() { - that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null - }) + that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null } map:IMap; //地图实例 @@ -125,34 +123,32 @@ export class RouterGISComponent implements OnInit { this.timeout = window.setTimeout(()=>{ that.map.getCity( function(info){ //获取当前 city - that.map.plugin(['AMap.AutoComplete'], () =>{ - var autoOptions = {city: info.city} - let keywords - e == 0 ? keywords = that.routeStart : keywords = that.routeEnd - var autoComplete = MapFactory.AutocompleteInstance(autoOptions); - autoComplete.search(keywords, function(status, result) { - if (result && result.tips && result.tips.length) { //搜索到数据时 - that._ngZone.run(()=>{ - if(e == 0){ - that.routeStartList = result.tips - if(result.tips.length != 0){ - for (let index = 0; index < result.tips.length; index++) { - const element = result.tips[index]; - if(element.location){ - that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) - return - } + var autoOptions = {city: info.city} + let keywords + e == 0 ? keywords = that.routeStart : keywords = that.routeEnd + var autoComplete = MapFactory.AutocompleteInstance(autoOptions); + autoComplete.search(keywords, function(status, result) { + if (result && result.tips && result.tips.length) { //搜索到数据时 + that._ngZone.run(()=>{ + if(e == 0){ + that.routeStartList = result.tips + if(result.tips.length != 0){ + for (let index = 0; index < result.tips.length; index++) { + const element = result.tips[index]; + if(element.location){ + that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) + return } } - }else{ - that.routeEndList = result.tips - that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) } - }); - - } //if - }) + }else{ + that.routeEndList = result.tips + that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat) + } + }); + } //if }) + }); //获取当前 city },500) diff --git a/src/app/key-unit/six-familiarity/six-familiarity.component.ts b/src/app/key-unit/six-familiarity/six-familiarity.component.ts index 349615a..d9377cd 100644 --- a/src/app/key-unit/six-familiarity/six-familiarity.component.ts +++ b/src/app/key-unit/six-familiarity/six-familiarity.component.ts @@ -1,6 +1,5 @@ import { Component, OnInit } from '@angular/core'; import { MapFactory } from '@src/modules/map/declare/factory'; -declare var AMap: any; @Component({ selector: 'app-six-familiarity', diff --git a/src/app/key-unit/water-road/water-road.component.ts b/src/app/key-unit/water-road/water-road.component.ts index 8ed7ef3..2118980 100644 --- a/src/app/key-unit/water-road/water-road.component.ts +++ b/src/app/key-unit/water-road/water-road.component.ts @@ -6,7 +6,6 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { ActivatedRoute } from '@angular/router'; import { MapFactory } from '@src/modules/map/declare/factory'; import { ICircle, IMap, IMarker } from '@src/modules/map/declare/map'; -declare var AMap: any; @Component({ selector: 'app-water-road', @@ -223,54 +222,52 @@ export class WaterRoadComponent implements OnInit { } }) - this.map.plugin(["AMap.MarkerClusterer"],() => { - var gridSize = 60 - var count = waterMarkerArrcluster.length; + var gridSize = 60 + var count = waterMarkerArrcluster.length; - let render = MapFactory.RenderClusterMarkerInstance(); - render.contentRender = (contextCount) => { - var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; - div.style.lineHeight = size + 'px'; - div.style.color = fontColor; - div.style.fontSize = '14px'; - div.style.textAlign = 'center'; - return div; - }; - render.pixelRender = (contextCount) => { - var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); - return MapFactory.PixelInstance(-size / 2, -size / 2); - }; + let render = MapFactory.RenderClusterMarkerInstance(); + render.contentRender = (contextCount) => { + var factor = Math.pow(contextCount / 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(contextCount / 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 = contextCount; + div.style.lineHeight = size + 'px'; + div.style.color = fontColor; + div.style.fontSize = '14px'; + div.style.textAlign = 'center'; + return div; + }; + render.pixelRender = (contextCount) => { + var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); + return MapFactory.PixelInstance(-size / 2, -size / 2); + }; - render.contentNonRender = (src) => { - return ``; - }; - render.pixelNonRender = () => { - return MapFactory.PixelInstance(-15, -15); - } - this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { - gridSize: gridSize, // 设置网格像素大小 - render: render //自定义聚合点样式, 自定义非聚合点样式 - }); - this.waterCluster.on('click',(e)=>{ - if(e.clusterData.length == 1){ - - } - }) + render.contentNonRender = (src) => { + return ``; + }; + render.pixelNonRender = () => { + return MapFactory.PixelInstance(-15, -15); + } + this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { + gridSize: gridSize, // 设置网格像素大小 + render: render //自定义聚合点样式, 自定义非聚合点样式 }); - + this.waterCluster.on('click',(e)=>{ + if(e.clusterData.length == 1){ + + } + }) + } //取消显示水源 diff --git a/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts b/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts index e423d7d..eada82c 100644 --- a/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts +++ b/src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts @@ -7,7 +7,7 @@ import { IMap, IMarker } from '@src/modules/map/declare/map'; import Viewer from 'viewerjs' import { ViewDetailsComponent } from '../view-details/view-details.component'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-fireforce-audit', templateUrl: './fireforce-audit.component.html', diff --git a/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts b/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts index 96372d1..91543b2 100644 --- a/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts +++ b/src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts @@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog'; import { MapFactory } from '@src/modules/map/declare/factory'; import { IMap, IMarker } from '@src/modules/map/declare/map'; declare var CryptoJS -declare var AMap: any; + @Component({ selector: 'app-linkageforces-audit', templateUrl: './linkageforces-audit.component.html', diff --git a/src/app/plan-audit/water-audit/water-audit.component.ts b/src/app/plan-audit/water-audit/water-audit.component.ts index d1d97b1..a62fdf0 100644 --- a/src/app/plan-audit/water-audit/water-audit.component.ts +++ b/src/app/plan-audit/water-audit/water-audit.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { MapFactory } from '@src/modules/map/declare/factory'; import { IMap, IMarker } from '@src/modules/map/declare/map'; -declare var AMap: any; + @Component({ selector: 'app-water-audit', templateUrl: './water-audit.component.html', diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts index 5e76edf..282d9e9 100644 --- a/src/modules/map/declare/factory.ts +++ b/src/modules/map/declare/factory.ts @@ -6,10 +6,10 @@ import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map'; import MapTools from './map-tools'; export class MapFactory { - public static MapInstance(container: string, options: IMapOptions | any): IMap { + public static MapInstance(container: string, options: IMapOptions | any,plugins?:string[]): IMap { let config = MapTools.ExplicitConvert(options); switch (mapSupplier) { - case 1: return new GaoDeMap(container, config); + case 1: return new GaoDeMap(container, config,plugins); case 2: return new KeDaMap(container, config); default: return null; } diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index ba3aab4..4ea9e7f 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -9,9 +9,18 @@ class GaodeBasic implements ISelf { } export class GaoDeMap extends GaodeBasic implements IMap { - constructor(container: string, options: IMapOptions) { + /// plugins:同步加载插件 + constructor(container: string, options: IMapOptions,plugins?:string[]) { super(); this.self = new AMap.Map(container, options); + if(!!plugins && plugins.length){ + for(var i in plugins){ + let name = plugins[i]; + if(name.indexOf('AMap.')==-1)continue; + let pObj = eval(`new ${plugins[i]}()`); + this.self.plugin(pObj); + } + } } setBounds(zoom?: any, x?: any, y?: any, is?: boolean) { return this.self.setBounds(zoom, x, y, is) @@ -34,8 +43,9 @@ export class GaoDeMap extends GaodeBasic implements IMap { setZoomAndCenter(zoom: number, pos: number[]) { return this.self.setZoomAndCenter(zoom, pos) } - plugin(eventName: string[], callback: Function) { - return this.self.plugin(eventName, callback) + plugin(pluginNames: string[], callback: Function) { + let names = pluginNames.filter(s=>s.indexOf("AMap.")==0); + return this.self.plugin(names, callback) } getBounds() { return this.self.getBounds() @@ -264,7 +274,10 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { constructor(map: IMap, list: Object[], options: any) { super(); let conf = MapTools.ExplicitConvert(options); - this.self = new AMap.MarkerCluster(map.self, list, conf) + + AMap.plugin('AMap.MarkerClusterer',()=>{ + this.self = new AMap.MarkerCluster(map.self, list, conf) + }); } on(eventName: string, callback: Function): void { return this.self.on(eventName, callback); @@ -331,7 +344,9 @@ export class GaodeDriving extends GaodeBasic implements IDriving { constructor(options: IDrivingOptions) { super(); options.map = options.map.self - this.self = new AMap.Driving(options) + AMap.plugin('AMap.Driving',()=>{ + this.self = new AMap.Driving(options) + }) } clear() { return this.self.clear() @@ -344,7 +359,9 @@ export class GaodeDriving extends GaodeBasic implements IDriving { export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { constructor(city: Object) { super(); - this.self = new AMap.Autocomplete(city) + AMap.plugin('AMap.AutoComplete',()=>{ + this.self = new AMap.Autocomplete(city) + }) } on(eventName: string, callback: Function) { return this.self.on(eventName, callback) @@ -357,7 +374,9 @@ export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { constructor() { super(); - this.self = new AMap.PlaceSearch() + AMap.plugin('AMap.PlaceSearch',()=>{ + this.self = new AMap.PlaceSearch() + }) } search(text: string, callback: Function) { return this.self.search(text, callback) @@ -367,7 +386,9 @@ export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { export class GaodeMouseTool extends GaodeBasic implements IMouseTool { constructor(map: IMap) { super(); - this.self = new AMap.MouseTool(map.self); + AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],()=>{ + this.self = new AMap.MouseTool(map.self); + }) } rule(options: any) { let conf = MapTools.ExplicitConvert(options); diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 9541ffd..7e33256 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -5,7 +5,9 @@ export interface ISelf { export interface IMap extends ISelf { on(eventName: string, callback: Function); - plugin(eventName: string[]|string, callback: Function); + //异步加载插件,插件完成的callback + //pluginName:要加载的插件名 + plugin(pluginName: string[], callback: Function); add(obj: IMarker|any): any; remove(obj: any): any; clearMap();