shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

高德地图封装基本完成

上海一张图
陈鹏飞 4 years ago
parent
4d34dfd341
commit
f9630e5b1a
15 changed files with 607 additions and 631 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 203
      src/app/data-collection/fire-force/fire-force.component.ts
  2. 118
      src/app/data-collection/linkage-forces/linkage-forces.component.ts
  3. 125
      src/app/data-collection/water-collection/water-collection.component.ts
  4. 569
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  5. 7
      src/app/key-unit/basicinfo-look/basicinfo.component.ts
  6. 25
      src/app/key-unit/basicinfo/basicinfo.component.ts
  7. 50
      src/app/key-unit/router-gis/router-gis.component.ts
  8. 1
      src/app/key-unit/six-familiarity/six-familiarity.component.ts
  9. 89
      src/app/key-unit/water-road/water-road.component.ts
  10. 2
      src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts
  11. 2
      src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts
  12. 2
      src/app/plan-audit/water-audit/water-audit.component.ts
  13. 4
      src/modules/map/declare/factory.ts
  14. 37
      src/modules/map/declare/gaode-map.ts
  15. 4
      src/modules/map/declare/map.d.ts

203
src/app/data-collection/fire-force/fire-force.component.ts
Unescape View File

@ -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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 //

118
src/app/data-collection/linkage-forces/linkage-forces.component.ts
Unescape View File

@ -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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 //

125
src/app/data-collection/water-collection/water-collection.component.ts
Unescape View File

@ -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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 //

569
src/app/gis-management/gis-labeling/gis-labeling.component.ts
Unescape View File

@ -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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 =
`<div style="font-size: 14px" id="gispopupbox">
<div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div>
<div style="display: flex; margin-top: 10px;margin-left:8px">
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${item.buildingTypes.length ? item.buildingTypes[0].name : "暂无数据"}</label></div>
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${item.organizationName || "暂无数据"}</label></div>
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${item.phone || "暂无数据"}</label></div>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
<div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
</div>
</div>`
// 创建一个自定义内容的 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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 =
`<div style="font-size: 14px" id="gispopupbox">
<div style="color: #0080FF;"><span style="margin-left:8px">${item.name}</span><label style="font-size: 12px; color: #999; margin-left: 10px">${item.address}</label> </div>
<div style="display: flex; margin-top: 10px;margin-left:8px">
<div style="width:240px; overflow: hidden;">单位性质: <label style="margin-left: 10px;font-size: 12px;">${item.buildingTypes.length ? item.buildingTypes[0].name : "暂无数据"}</label></div>
<div style="flex: 1; margin-left: 25px;">消防负责人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">防火级别: <label style="margin-left: 10px;font-size: 12px;">二级</label></div>
<div style="flex: 1; margin-left: 25px;">消防管理人: <label style="margin-left: 10px;font-size: 12px;">${item.contacts || "暂无数据"}</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">防火管辖: <label style="margin-left: 10px;font-size: 12px;">${item.organizationName || "暂无数据"}</label></div>
<div style="flex: 1; margin-left: 25px;">防火监督员: <label style="margin-left: 10px;font-size: 12px;">李四15022215122</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">责任队站: <label style="margin-left: 10px;font-size: 12px;">安博消防救援站</label></div>
<div style="flex: 1; margin-left: 25px;">总建筑面积: <label style="margin-left: 10px;font-size: 12px;">500平方米</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">建筑信息分类: <label style="margin-left: 10px;font-size: 12px;">建筑群</label></div>
<div style="flex: 1; margin-left: 25px;">总占地面积: <label style="margin-left: 10px;font-size: 12px;">600平方米</label></div>
</div>
<div style="display: flex; margin-top: 10px;margin-left:8px"">
<div style="width:240px; overflow: hidden;">值班电话: <label style="margin-left: 10px;font-size: 12px;">${item.phone || "暂无数据"}</label></div>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
<div class="btn" id="baseInformation"><img src="../../../assets/images/basicinfoicon.png" alt="">基本信息</div>
<div class="btn" id="route"><img src="../../../assets/images/navicon.png" alt="">导航</div>
<div class="btn" id="fullViewNavigation"><img src="../../../assets/images/panoramaicon.png" alt="">全景漫游</div>
<div class="btn" id="threeeScene"><img src="../../../assets/images/3dicon.png" alt="">三维场景</div>
<div class="btn" id="seePlan"><img src="../../../assets/images/planicon.png" alt="">查看预案</div>
<div class="btn" id="share"><img src="../../../assets/images/shareicon.png" alt="">分享</div>
</div>
</div>`
// 创建一个自定义内容的 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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
// 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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
// 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

7
src/app/key-unit/basicinfo-look/basicinfo.component.ts
Unescape View File

@ -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',

25
src/app/key-unit/basicinfo/basicinfo.component.ts
Unescape View File

@ -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('已标注单位位置')

50
src/app/key-unit/router-gis/router-gis.component.ts
Unescape View File

@ -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)

1
src/app/key-unit/six-familiarity/six-familiarity.component.ts
Unescape View File

@ -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',

89
src/app/key-unit/water-road/water-road.component.ts
Unescape View File

@ -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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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 `<img class='clusterImgCollection' src="${src}" alt="">`;
};
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){
}
})
}
//取消显示水源

2
src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts
Unescape View File

@ -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',

2
src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts
Unescape View File

@ -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',

2
src/app/plan-audit/water-audit/water-audit.component.ts
Unescape View File

@ -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',

4
src/modules/map/declare/factory.ts
Unescape View File

@ -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;
}

37
src/modules/map/declare/gaode-map.ts
Unescape View File

@ -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);

4
src/modules/map/declare/map.d.ts vendored
Unescape View File

@ -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();

Write Preview
Loading…
Cancel
Save