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
Unified 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 { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs' import Viewer from 'viewerjs'
declare var CryptoJS declare var CryptoJS
declare var AMap: any;
@Component({ @Component({
selector: 'app-fire-force', selector: 'app-fire-force',
@ -93,108 +92,108 @@ export class FireForceComponent implements OnInit {
data : item data : item
}) : null }) : null
}) })
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = markerArrcluster.length;
let render = MapFactory.RenderClusterMarkerInstance(); var gridSize = 60
render.contentRender = (contextCount) => { var count = markerArrcluster.length;
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) => { let render = MapFactory.RenderClusterMarkerInstance();
return `<img class='clusterImgCollection' src="${src}" alt="">`; render.contentRender = (contextCount) => {
}; var factor = Math.pow(contextCount / count, 1 / 18);
render.pixelNonRender = () => { var div = document.createElement('div');
return MapFactory.PixelInstance(-15, -15); var Hue = 180 - factor * 180;
} var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
gridSize: gridSize, // 设置网格像素大小 var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
render: render //自定义聚合点样式, 自定义非聚合点样式 var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
}); div.style.backgroundColor = bgColor;
this.cluster.on('click',(e)=>{ var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
if(e.clusterData.length == 1){ div.style.width = div.style.height = size + 'px';
let node = e.clusterData[0].data div.style.border = 'solid 1px ' + borderColor;
// console.log(node) div.style.borderRadius = size / 2 + 'px';
this.clearData() div.style.boxShadow = '0 0 5px ' + shadowColor;
this.selectedFireForce = node.fireForceDetailInfo div.innerHTML = contextCount;
this.selectedFireForceId = node.fireForceDetailId div.style.lineHeight = size + 'px';
if(node.forceType != 0){//如果是其他消防力量 div.style.color = fontColor;
this.selectedFireForceLevel = 4 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{ }else{
this.selectedFireForceLevel = node.level type = 1
} }
this.FireForceDetailInfo.stationName = node.fireForceDetailInfo.name this.isMasklayer = true
this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => {
if(node.fireForceDetailId){ this.isMasklayer = false
let type this.FireForceDetailInfo = data
if(node.forceType == 0){ if(data.location && data.location.x){//如果已经标注单位坐标
type = 0 this.positionLngLat = data.location
}else{
type = 1
} }
this.isMasklayer = true //相关资料
this.http.get(`/api/FireForceDetail/${type}/${node.id}`).subscribe((data:any) => { data.relevantInfomationData ? this.AttachmentArr = JSON.parse(data.relevantInfomationData) : null
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
if(node.forceType == 0 && node.level == 0){ if(node.forceType == 0 && node.level == 0){
this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData
this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData this.ZongcontactData = JSON.parse(data.contactData) || this.ZongcontactData
} }
if(node.forceType == 0 && node.level == 1){ if(node.forceType == 0 && node.level == 1){
this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData this.ZongpersonCountData = JSON.parse(data.personCountData) || this.ZongpersonCountData
this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData this.ZhicontactData = JSON.parse(data.contactData) || this.ZhicontactData
} }
if(node.forceType == 0 && (node.level == 2 || node.level == 3)){ if(node.forceType == 0 && (node.level == 2 || node.level == 3)){
this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData this.DaZhongpersonCountData = JSON.parse(data.personCountData) || this.DaZhongpersonCountData
this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData this.DaZhongcontactData = JSON.parse(data.contactData) || this.DaZhongcontactData
} }
if(node.forceType != 0){ if(node.forceType != 0){
this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData this.otherpersonCountData = JSON.parse(data.personCountData) || this.otherpersonCountData
this.othercontactData = JSON.parse(data.contactData) || 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
} }
}) })
} }
}) //寻找管辖单位
}); this.allFireForceList.forEach(item => {
if(item.id == node.parentId){
this.superior.name = item.name
this.superior.code = item.code
}
})
}
})
} }
ngOnInit(): void { ngOnInit(): void {
this.getAllFireForce() this.getAllFireForce()
@ -823,16 +822,14 @@ export class FireForceComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ let auto = MapFactory.AutocompleteInstance(autoOptions);
let auto = MapFactory.AutocompleteInstance(autoOptions); this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类
this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 auto.on("select", (e)=>{
auto.on("select", (e)=>{ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) this.positionLngLat = {x: e.poi.location.lng, y: 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]); //设置地图中心点
this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 });//注册监听，当选中某条记录时会触发
});//注册监听，当选中某条记录时会触发
});
} }
//点击位置 //点击位置
isGisTopBox:boolean = false // 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 { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map'; import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var CryptoJS declare var CryptoJS
declare var AMap: any;
@Component({ @Component({
selector: 'app-linkage-forces', selector: 'app-linkage-forces',
templateUrl: './linkage-forces.component.html', 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, { var gridSize = 60
gridSize: gridSize, // 设置网格像素大小 var count = markerArrcluster.length;
render: render //自定义聚合点样式, 自定义非聚合点样式
}); let render = MapFactory.RenderClusterMarkerInstance();
this.cluster.on('click',(e)=>{ render.contentRender = (contextCount) => {
if(e.clusterData.length == 1){ var factor = Math.pow(contextCount / count, 1 / 18);
let item = e.clusterData[0].data var div = document.createElement('div');
this.clearData() var Hue = 180 - factor * 180;
this.LinkageForceDetailInfo = item var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
item.location?this.positionLngLat = item.location:null var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
this.AttachmentArr = JSON.parse(item.relevantInfomationData) 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 { ngOnInit(): void {
@ -543,16 +543,14 @@ export class LinkageForcesComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ let auto = MapFactory.AutocompleteInstance(autoOptions);
let auto = MapFactory.AutocompleteInstance(autoOptions); this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类
this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 auto.on("select", (e)=>{
auto.on("select", (e)=>{ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) this.positionLngLat = {x: e.poi.location.lng, y: 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]); //设置地图中心点
this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 });//注册监听，当选中某条记录时会触发
});//注册监听，当选中某条记录时会触发
});
} }
//点击位置 //点击位置
isGisTopBox:boolean = false // 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 { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map'; import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var AMap: any;
@Component({ @Component({
selector: 'app-water-collection', 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(); var gridSize = 60
render.contentRender = (contextCount) => { var count = markerArrcluster.length;
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) => { let render = MapFactory.RenderClusterMarkerInstance();
return `<img class='clusterImgCollection' src="${src}" alt="">`; render.contentRender = (contextCount) => {
}; var factor = Math.pow(contextCount / count, 1 / 18);
render.pixelNonRender = () => { var div = document.createElement('div');
return MapFactory.PixelInstance(-15, -15); var Hue = 180 - factor * 180;
} var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
this.cluster = MapFactory.MarkerClusterInstance(this.map, markerArrcluster, { var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
gridSize: gridSize, // 设置网格像素大小 var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
render: render //自定义聚合点样式, 自定义非聚合点样式 var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
}); div.style.backgroundColor = bgColor;
this.cluster.on('click',(e)=>{ var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
if(e.clusterData.length == 1){ div.style.width = div.style.height = size + 'px';
let item = e.clusterData[0].data div.style.border = 'solid 1px ' + borderColor;
// console.log(item) div.style.borderRadius = size / 2 + 'px';
this.selectedLiIndex = null div.style.boxShadow = '0 0 5px ' + shadowColor;
this.clearData() div.innerHTML = contextCount;
this.selectedWaterTypeIndex = item.waterSourceType//点击的水源类型 div.style.lineHeight = size + 'px';
this.waterData = item div.style.color = fontColor;
item.waterSourceType == 0 && item.detailData ? this.fireCockData = JSON.parse(item.detailData) : null div.style.fontSize = '14px';
item.waterSourceType == 1 && item.detailData ? this.poolData = JSON.parse(item.detailData) : null div.style.textAlign = 'center';
item.waterSourceType == 2 && item.detailData ? this.naturalWaterData = JSON.parse(item.detailData) : null return div;
this.positionLngLat = item.location };
} 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 { ngOnInit(): void {
// console.log(88888,navigator.userAgent) // console.log(88888,navigator.userAgent)
@ -548,16 +547,14 @@ export class WaterCollectionComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ let auto = MapFactory.AutocompleteInstance(autoOptions);
let auto = MapFactory.AutocompleteInstance(autoOptions); this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类
this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 auto.on("select", (e)=>{
auto.on("select", (e)=>{ this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat])
this.newPositionMarker.setPosition([e.poi.location.lng,e.poi.location.lat]) this.positionLngLat = {x: e.poi.location.lng, y: 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]); //设置地图中心点
this.map.setCenter([e.poi.location.lng,e.poi.location.lat]); //设置地图中心点 });//注册监听，当选中某条记录时会触发
});//注册监听，当选中某条记录时会触发
});
} }
//点击位置 //点击位置
isGisTopBox:boolean = false // 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 data: item
}) })
}) })
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = unitMarkerArrcluster.length; var count = unitMarkerArrcluster.length;
let render = MapFactory.RenderClusterMarkerInstance(); let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => { render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18); var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div'); var div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px'; div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
return div; return div;
}; };
render.pixelRender = (contextCount) => { render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2); return MapFactory.PixelInstance(-size / 2, -size / 2);
}; };
render.contentNonRender = (src) => { render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`; return `<img class='clusterImgCollection' src="${src}" alt="">`;
}; };
render.pixelNonRender = () => { render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-15, -15);
} }
this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, { this.unitCluster = MapFactory.MarkerClusterInstance(this.map, unitMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
render: render //自定义聚合点样式, 自定义非聚合点样式 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) })//分享点击事件
}
})
}); });
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 data: item
}) : null }) : null
}) })
this.map.plugin(["AMap.MarkerClusterer"], () => {
var gridSize = 60 var gridSize = 60
var count = fireForceMarkerArrcluster.length; var count = fireForceMarkerArrcluster.length;
let render = MapFactory.RenderClusterMarkerInstance(); let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => { render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18); var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div'); var div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px'; div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
return div; return div;
}; };
render.pixelRender = (contextCount) => { render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2); return MapFactory.PixelInstance(-size / 2, -size / 2);
}; };
render.contentNonRender = (src) => { render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`; return `<img class='clusterImgCollection' src="${src}" alt="">`;
}; };
render.pixelNonRender = () => { render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-15, -15);
} }
this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, { this.fireForceCluster = MapFactory.MarkerClusterInstance(this.map, fireForceMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
});
}); });
} }
//取消消防力量 //取消消防力量
resetFireForce() { 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, { var gridSize = 60
gridSize: gridSize, // 设置网格像素大小 var count = linkageForcesMarkerArrcluster.length;
render: render //自定义聚合点样式, 自定义非聚合点样式
}); 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() { resetLinkageForces() {
@ -835,89 +835,88 @@ export class GisLabelingComponent implements OnInit {
data: item 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 gridSize = 60
// var factor = Math.pow(context.count / count, 1 / 18); var count = waterMarkerArrcluster.length;
// var div = document.createElement('div');
// var Hue = 180 - factor * 180; let render = MapFactory.RenderClusterMarkerInstance();
// var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; render.contentRender = (contextCount) => {
// var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var factor = Math.pow(contextCount / count, 1 / 18);
// var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var div = document.createElement('div');
// var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var Hue = 180 - factor * 180;
// div.style.backgroundColor = bgColor; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
// var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20); var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
// div.style.width = div.style.height = size + 'px'; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
// div.style.border = 'solid 1px ' + borderColor; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
// div.style.borderRadius = size / 2 + 'px'; div.style.backgroundColor = bgColor;
// div.style.boxShadow = '0 0 5px ' + shadowColor; var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
// div.innerHTML = context.count; div.style.width = div.style.height = size + 'px';
// div.style.lineHeight = size + 'px'; div.style.border = 'solid 1px ' + borderColor;
// div.style.color = fontColor; div.style.borderRadius = size / 2 + 'px';
// div.style.fontSize = '14px'; div.style.boxShadow = '0 0 5px ' + shadowColor;
// div.style.textAlign = 'center'; div.innerHTML = contextCount;
// context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2)); div.style.lineHeight = size + 'px';
// context.marker.setContent(div) div.style.color = fontColor;
// }; div.style.fontSize = '14px';
// var _renderMarker = (context) => { div.style.textAlign = 'center';
// var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`; return div;
// var offset = MapFactory.PixelInstance(-15, -15); };
// context.marker.setContent(content) render.pixelRender = (contextCount) => {
// context.marker.setOffset(offset) var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
// } return MapFactory.PixelInstance(-size / 2, -size / 2);
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { };
gridSize: gridSize, // 设置网格像素大小
render: render //自定义聚合点样式, 自定义非聚合点样式 render.contentNonRender = (src) => {
}); return `<img class='clusterImgCollection' src="${src}" alt="">`;
};
// this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, { render.pixelNonRender = () => {
// gridSize: gridSize, // 设置网格像素大小 return MapFactory.PixelInstance(-15, -15);
// renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式 }
// renderMarker: _renderMarker, // 自定义非聚合点样式
// });
this.waterCluster.on('click', (e) => {
if (e.clusterData.length == 1) {
} // 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() { resetWater() {
@ -1053,9 +1052,7 @@ export class GisLabelingComponent implements OnInit {
}) })
that.map = MapFactory.MapInstance('map', { layers: [layer] }); that.map = MapFactory.MapInstance('map', { layers: [layer] });
that.map.setCity('上海市'); 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() { 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(() => { this.timeout = window.setTimeout(() => {
that.map.getCity(function (info) { //获取当前 city that.map.getCity(function (info) { //获取当前 city
that.map.plugin(['AMap.AutoComplete'], () => { var autoOptions = { city: info.city }
var autoOptions = { city: info.city } let keywords
let keywords e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd var autoComplete = MapFactory.AutocompleteInstance(autoOptions);
var autoComplete = MapFactory.AutocompleteInstance(autoOptions); autoComplete.search(keywords, function (status, result) {
autoComplete.search(keywords, function (status, result) { if (result && result.tips && result.tips.length) { //搜索到数据时
if (result && result.tips && result.tips.length) { //搜索到数据时 that._ngZone.run(() => {
that._ngZone.run(() => { if (e == 0) {//起点
if (e == 0) {//起点 that.routeStartList = result.tips
that.routeStartList = result.tips if (result.tips.length != 0) {
if (result.tips.length != 0) { for (let index = 0; index < result.tips.length; index++) {
for (let index = 0; index < result.tips.length; index++) { const element = result.tips[index];
const element = result.tips[index]; if (element.location) {
if (element.location) { that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat)
that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) return
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 }); //获取当前 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 { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import format from 'date-fns/format';
import { TreeService } from '../../http-interceptors/tree.service' import { TreeService } from '../../http-interceptors/tree.service'
import { FileUploader, FileItem } from 'ng2-file-upload' import { FileUploader, FileItem } from 'ng2-file-upload'
import { DomSanitizer } from '@angular/platform-browser' 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 * as _ from 'lodash';
import Swiper from 'swiper'; import Swiper from 'swiper';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
@ -21,7 +15,6 @@ import { StatisticsOfFireFightingFacilities } from '../basicinfo/basicinfo.compo
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { IMap, IMarker } from '@src/modules/map/declare/map'; import { IMap, IMarker } from '@src/modules/map/declare/map';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any;
@Component({ @Component({
selector: 'app-basicinfo-look', 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 { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms'; import { AbstractControl, FormControl, NG_VALIDATORS, Validator } from '@angular/forms';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import format from 'date-fns/format';
import { TreeService } from '../../http-interceptors/tree.service' import { TreeService } from '../../http-interceptors/tree.service'
import { FileUploader, FileItem } from 'ng2-file-upload' import { FileUploader, FileItem } from 'ng2-file-upload'
import { AddHouseInfo } from './addhouseinfo.component' import { AddHouseInfo } from './addhouseinfo.component'
import { DomSanitizer } from '@angular/platform-browser' 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 * as _ from 'lodash';
import Swiper from 'swiper'; import Swiper from 'swiper';
import { LookMaster } from './lookmaster.component' import { LookMaster } from './lookmaster.component'
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service'; import { TabbarAndScoreService } from 'src/app/http-interceptors/tabbar-and-score.service';
declare var AMap: any;
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map'; import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
@Component({ @Component({
selector: 'app-basicinfo', selector: 'app-basicinfo',
templateUrl: './basicinfo.component.html', templateUrl: './basicinfo.component.html',
@ -181,16 +175,13 @@ export class BasicinfoComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
this.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => { var auto = MapFactory.AutocompleteInstance(autoOptions);
var auto = MapFactory.AutocompleteInstance(autoOptions); this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类
this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类 auto.on("select", (e) => {
auto.on("select", (e) => { this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat])
this.newPositionMarker.setPosition([e.poi.location.lng, e.poi.location.lat]) this.markerPosition2 = { x: e.poi.location.lng, y: 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]); //设置地图中心点
this.map.setCenter([e.poi.location.lng, e.poi.location.lat]); //设置地图中心点 });//注册监听，当选中某条记录时会触发
});//注册监听，当选中某条记录时会触发
});
if (this.isMapLabel) {//如果已经标注单位坐标 if (this.isMapLabel) {//如果已经标注单位坐标
// console.log('已标注单位位置') // 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属性可缺省, layers:[layer], //当只想显示标准图层时layers属性可缺省,
}); });
that.map.setCity('上海市'); 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; //地图实例 map:IMap; //地图实例
@ -125,34 +123,32 @@ export class RouterGISComponent implements OnInit {
this.timeout = window.setTimeout(()=>{ this.timeout = window.setTimeout(()=>{
that.map.getCity( function(info){ //获取当前 city that.map.getCity( function(info){ //获取当前 city
that.map.plugin(['AMap.AutoComplete'], () =>{ var autoOptions = {city: info.city}
var autoOptions = {city: info.city} let keywords
let keywords e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd var autoComplete = MapFactory.AutocompleteInstance(autoOptions);
var autoComplete = MapFactory.AutocompleteInstance(autoOptions); autoComplete.search(keywords, function(status, result) {
autoComplete.search(keywords, function(status, result) { if (result && result.tips && result.tips.length) { //搜索到数据时
if (result && result.tips && result.tips.length) { //搜索到数据时 that._ngZone.run(()=>{
that._ngZone.run(()=>{ if(e == 0){
if(e == 0){ that.routeStartList = result.tips
that.routeStartList = result.tips if(result.tips.length != 0){
if(result.tips.length != 0){ for (let index = 0; index < result.tips.length; index++) {
for (let index = 0; index < result.tips.length; index++) { const element = result.tips[index];
const element = result.tips[index]; if(element.location){
if(element.location){ that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat)
that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat) return
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
} //if that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat)
}) }
});
} //if
}) })
}); //获取当前 city }); //获取当前 city
},500) },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 { Component, OnInit } from '@angular/core';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any;
@Component({ @Component({
selector: 'app-six-familiarity', 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 { ActivatedRoute } from '@angular/router';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
import { ICircle, IMap, IMarker } from '@src/modules/map/declare/map'; import { ICircle, IMap, IMarker } from '@src/modules/map/declare/map';
declare var AMap: any;
@Component({ @Component({
selector: 'app-water-road', selector: 'app-water-road',
@ -223,54 +222,52 @@ export class WaterRoadComponent implements OnInit {
} }
}) })
this.map.plugin(["AMap.MarkerClusterer"],() => { var gridSize = 60
var gridSize = 60 var count = waterMarkerArrcluster.length;
var count = waterMarkerArrcluster.length;
let render = MapFactory.RenderClusterMarkerInstance(); let render = MapFactory.RenderClusterMarkerInstance();
render.contentRender = (contextCount) => { render.contentRender = (contextCount) => {
var factor = Math.pow(contextCount / count, 1 / 18); var factor = Math.pow(contextCount / count, 1 / 18);
var div = document.createElement('div'); var div = document.createElement('div');
var Hue = 180 - factor * 180; var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)'; var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)'; var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)'; var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)'; var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor; div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px'; div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor; div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px'; div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor; div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = contextCount; div.innerHTML = contextCount;
div.style.lineHeight = size + 'px'; div.style.lineHeight = size + 'px';
div.style.color = fontColor; div.style.color = fontColor;
div.style.fontSize = '14px'; div.style.fontSize = '14px';
div.style.textAlign = 'center'; div.style.textAlign = 'center';
return div; return div;
}; };
render.pixelRender = (contextCount) => { render.pixelRender = (contextCount) => {
var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20); var size = Math.round(30 + Math.pow(contextCount / count, 1 / 5) * 20);
return MapFactory.PixelInstance(-size / 2, -size / 2); return MapFactory.PixelInstance(-size / 2, -size / 2);
}; };
render.contentNonRender = (src) => { render.contentNonRender = (src) => {
return `<img class='clusterImgCollection' src="${src}" alt="">`; return `<img class='clusterImgCollection' src="${src}" alt="">`;
}; };
render.pixelNonRender = () => { render.pixelNonRender = () => {
return MapFactory.PixelInstance(-15, -15); return MapFactory.PixelInstance(-15, -15);
} }
this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, { this.waterCluster = MapFactory.MarkerClusterInstance(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小 gridSize: gridSize, // 设置网格像素大小
render: render //自定义聚合点样式, 自定义非聚合点样式 render: render //自定义聚合点样式, 自定义非聚合点样式
});
this.waterCluster.on('click',(e)=>{
if(e.clusterData.length == 1){
}
})
}); });
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 Viewer from 'viewerjs'
import { ViewDetailsComponent } from '../view-details/view-details.component'; import { ViewDetailsComponent } from '../view-details/view-details.component';
declare var CryptoJS declare var CryptoJS
declare var AMap: any;
@Component({ @Component({
selector: 'app-fireforce-audit', selector: 'app-fireforce-audit',
templateUrl: './fireforce-audit.component.html', 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 { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map'; import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var CryptoJS declare var CryptoJS
declare var AMap: any;
@Component({ @Component({
selector: 'app-linkageforces-audit', selector: 'app-linkageforces-audit',
templateUrl: './linkageforces-audit.component.html', 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 { Component, Input, OnInit } from '@angular/core';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map'; import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var AMap: any;
@Component({ @Component({
selector: 'app-water-audit', selector: 'app-water-audit',
templateUrl: './water-audit.component.html', 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'; import MapTools from './map-tools';
export class MapFactory { 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); let config = MapTools.ExplicitConvert(options);
switch (mapSupplier) { switch (mapSupplier) {
case 1: return new GaoDeMap(container, config); case 1: return new GaoDeMap(container, config,plugins);
case 2: return new KeDaMap(container, config); case 2: return new KeDaMap(container, config);
default: return null; 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 { export class GaoDeMap extends GaodeBasic implements IMap {
constructor(container: string, options: IMapOptions) { /// plugins:同步加载插件
constructor(container: string, options: IMapOptions,plugins?:string[]) {
super(); super();
this.self = new AMap.Map(container, options); 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) { setBounds(zoom?: any, x?: any, y?: any, is?: boolean) {
return this.self.setBounds(zoom, x, y, is) return this.self.setBounds(zoom, x, y, is)
@ -34,8 +43,9 @@ export class GaoDeMap extends GaodeBasic implements IMap {
setZoomAndCenter(zoom: number, pos: number[]) { setZoomAndCenter(zoom: number, pos: number[]) {
return this.self.setZoomAndCenter(zoom, pos) return this.self.setZoomAndCenter(zoom, pos)
} }
plugin(eventName: string[], callback: Function) { plugin(pluginNames: string[], callback: Function) {
return this.self.plugin(eventName, callback) let names = pluginNames.filter(s=>s.indexOf("AMap.")==0);
return this.self.plugin(names, callback)
} }
getBounds() { getBounds() {
return this.self.getBounds() return this.self.getBounds()
@ -264,7 +274,10 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
constructor(map: IMap, list: Object[], options: any) { constructor(map: IMap, list: Object[], options: any) {
super(); super();
let conf = MapTools.ExplicitConvert(options); 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 { on(eventName: string, callback: Function): void {
return this.self.on(eventName, callback); return this.self.on(eventName, callback);
@ -331,7 +344,9 @@ export class GaodeDriving extends GaodeBasic implements IDriving {
constructor(options: IDrivingOptions) { constructor(options: IDrivingOptions) {
super(); super();
options.map = options.map.self options.map = options.map.self
this.self = new AMap.Driving(options) AMap.plugin('AMap.Driving',()=>{
this.self = new AMap.Driving(options)
})
} }
clear() { clear() {
return this.self.clear() return this.self.clear()
@ -344,7 +359,9 @@ export class GaodeDriving extends GaodeBasic implements IDriving {
export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
constructor(city: Object) { constructor(city: Object) {
super(); super();
this.self = new AMap.Autocomplete(city) AMap.plugin('AMap.AutoComplete',()=>{
this.self = new AMap.Autocomplete(city)
})
} }
on(eventName: string, callback: Function) { on(eventName: string, callback: Function) {
return this.self.on(eventName, callback) return this.self.on(eventName, callback)
@ -357,7 +374,9 @@ export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch {
constructor() { constructor() {
super(); super();
this.self = new AMap.PlaceSearch() AMap.plugin('AMap.PlaceSearch',()=>{
this.self = new AMap.PlaceSearch()
})
} }
search(text: string, callback: Function) { search(text: string, callback: Function) {
return this.self.search(text, callback) return this.self.search(text, callback)
@ -367,7 +386,9 @@ export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch {
export class GaodeMouseTool extends GaodeBasic implements IMouseTool { export class GaodeMouseTool extends GaodeBasic implements IMouseTool {
constructor(map: IMap) { constructor(map: IMap) {
super(); super();
this.self = new AMap.MouseTool(map.self); AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],()=>{
this.self = new AMap.MouseTool(map.self);
})
} }
rule(options: any) { rule(options: any) {
let conf = MapTools.ExplicitConvert(options); 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 { export interface IMap extends ISelf {
on(eventName: string, callback: Function); on(eventName: string, callback: Function);
plugin(eventName: string[]|string, callback: Function); //异步加载插件，插件完成的callback
//pluginName:要加载的插件名
plugin(pluginName: string[], callback: Function);
add(obj: IMarker|any): any; add(obj: IMarker|any): any;
remove(obj: any): any; remove(obj: any): any;
clearMap(); clearMap();

Write Preview
Loading…
Cancel
Save