import { HttpClient } from '@angular/common/http';
import { Component, OnInit ,Renderer2,ElementRef, Inject, NgZone, ViewChild } from '@angular/core';
import { FormBuilder,FormGroup, FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var AMap: any;
declare var QRCode: any;
@Component({
selector: 'app-gis-labeling',
templateUrl: './gis-labeling.component.html',
styleUrls: ['./gis-labeling.component.scss']
})
export class GisLabelingComponent implements OnInit {
constructor(private elementRef: ElementRef,public renderer2: Renderer2,private http:HttpClient,public snackBar: MatSnackBar,public dialog: MatDialog,public _ngZone:NgZone,private fb: FormBuilder) { }
//右上角div
selectedTitle:number
titleList = [ {name:'重点单位',iconImg:'/assets/images/uniticon.png'},
{name:'水源',iconImg:'/assets/images/watericon.png'},
{name:'测量工具',iconImg:'/assets/images/distanceicon.png'},
{name:'图层选择',iconImg:'/assets/images/coverageicon.png'}
]
keyUnitList:any = []
waterList = [
{id:'0',name:'消火栓',selected:false},
{id:'1',name:'消防水池',selected:false},
{id:'2',name:'天然水源',selected:false},
]
keyUnitForm : FormGroup//gis右上角重点单位表单
watertForm : FormGroup//gis右上角水源表单
selectedUnitList:any = []//选择提交的单位
selectedWaterList:any = []//选择提交的水源
unitAreaDefault:any = '-1'//默认单位范围
waterAreaDefault:any = '-1'//默认水源范围
//获得单位循环出来的checkbox列表（formControl实例）
get units():any{
return this.keyUnitForm.get('units')
}
get waters():any{
return this.watertForm.get('waters')
}
async getAllBuildingType(){
let result = await new Promise((result,reject)=>{
this.http.get('/api/BuildingTypes/Simple').subscribe((data:any) => {
data.forEach(item => {
item.selected = false
})
this.keyUnitList = data
result('获取单位类型')
})
})
}
ngOnInit(): void {
window.setTimeout(()=>{
this.mapInit()
},0)
let buildingType = this.getAllBuildingType()//获取建筑类型
Promise.all([buildingType]).then(()=>{
this.keyUnitForm = this.fb.group({
units:this.buildUnits(),
allSelectedUnit:new FormControl(),
areaUnit:new FormControl()
})
this.watertForm = this.fb.group({
waters:this.waterUnits(),
allSelectedWater:new FormControl(),
areaWater:new FormControl()
})
//将选中的push到数组
this.units.valueChanges.subscribe(values => {
let selects:string[] = []
values.forEach((selected:boolean,i:number) => {
selected === true && selects.push(this.keyUnitList[i].id)
});
this.selectedUnitList = selects
})
this.waters.valueChanges.subscribe(values => {
let selects:string[] = []
values.forEach((selected:boolean,i:number) => {
selected === true && selects.push(this.waterList[i].id)
});
this.selectedWaterList = selects
})
this.unitSelected()
})
}
//构造重点单位checkbox控制器
buildUnits() {
const arr = this.keyUnitList.map(item => {
return this.fb.control(item.selected);
});
return this.fb.array(arr);
}
//构造水源checkbox控制器
waterUnits() {
const arr = this.waterList.map(item => {
return this.fb.control(item.selected);
});
return this.fb.array(arr);
}
//初始化获取勾选项
unitSelected(){
this.keyUnitList.forEach(item => {
if(item.selected){
this.selectedUnitList.push(item.name)
}
})
this.waterList.forEach(item => {
if(item.selected){
this.selectedWaterList.push(item.name)
}
})
}
//地图范围圆圈---重点单位
circle = new AMap.Circle({
center: null,
radius: 0, //半径
strokeOpacity: 1,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
})
//地图范围圆圈---水源
circleofwater = new AMap.Circle({
center: null,
radius: 0, //半径
strokeOpacity: 1,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#ee2200',
zIndex: 50,
})
//重点单位提交
ketUnitSubmit(value){
if(this.markers.length == 0){
let paramsdata:any = {
PageSize:99999,
BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
}
this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
this.createUnitMarker(data.items)
})
}else{
this.circle.setRadius(Number(this.unitAreaDefault))
this.circle.setCenter(this.markers[0]._position)
this.circle.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
if(this.unitAreaDefault == '0'){
this.circle.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y)
}else{
Distance = Math.abs(lnglat.offset(0, this.unitAreaDefault).lat - this.selectedUnit.location.y)
}
if(this.unitAreaDefault == '-1'){//如果勾选全部
let paramsdata:any = {
PageSize:99999,
BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
}
this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
data.items.forEach((i,index) => {
if(i.id == this.selectedUnit.id){
data.items.splice(index,1)
}
})
this.createUnitMarker(data.items)
})
}else{
let paramsdata:any = {
PageSize:99999,
Lon : this.selectedUnit.location.x,
Lat : this.selectedUnit.location.y,
Distance : Distance,
BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
}
this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any) => {
data.items.forEach((i,index) => {
if(i.id == this.selectedUnit.id){
data.items.splice(index,1)
}
})
this.createUnitMarker(data.items)
})
}
}
}
//创建单位markers
unitCluster:any //重点单位点聚合实例
createUnitMarker(list){
let unitMarkerArrcluster = []
this.unitCluster ? this.unitCluster.setData([]) : null
list.forEach((item) => {
let image
if(item.buildingTypes[0].name.indexOf('高层') != -1){
image = '/assets/images/Highbuilding.png'
}else if(item.buildingTypes[0].name.indexOf('化工') != -1){
image = '/assets/images/Chemicalindustry.png'
}else if(item.buildingTypes[0].name.indexOf('餐饮') != -1){
image = '/assets/images/餐饮.png'
}else if(item.buildingTypes[0].name.indexOf('厂房') != -1){
image = '/assets/images/厂房.png'
}else if(item.buildingTypes[0].name.indexOf('储罐') != -1){
image = '/assets/images/储罐类.png'
}else if(item.buildingTypes[0].name.indexOf('地下') != -1){
image = '/assets/images/地下.png'
}else if(item.buildingTypes[0].name.indexOf('古建筑') != -1){
image = '/assets/images/古建筑.png'
}else if(item.buildingTypes[0].name.indexOf('轨道' || '地铁' || '交通') != -1){
image = '/assets/images/轨道交通.png'
}else if(item.buildingTypes[0].name.indexOf('商场' || '超市') != -1){
image = '/assets/images/商场超市.png'
}else if(item.buildingTypes[0].name.indexOf('隧道') != -1){
image = '/assets/images/隧道.png'
}else if(item.buildingTypes[0].name.indexOf('危化品') != -1){
image = '/assets/images/危化品.png'
}else if(item.buildingTypes[0].name.indexOf('学校' || '教育') != -1){
image = '/assets/images/学校.png'
}else if(item.buildingTypes[0].name.indexOf('医院' || '医疗') != -1){
image = '/assets/images/医院.png'
}else if(item.buildingTypes[0].name.indexOf('影' || '剧') != -1){
image = '/assets/images/影剧院.png'
}else if(item.buildingTypes[0].name.indexOf('娱乐') != -1){
image = '/assets/images/娱乐.png'
}else if(item.buildingTypes[0].name.indexOf('展览' || '景点' || '景区') != -1){
image = '/assets/images/展览建筑.png'
}else{
image = '/assets/images/其他.png'
}
// 用于点集合的数组
unitMarkerArrcluster.push({
lnglat : [item.location.x,item.location.y],
image : image,
data : item
})
})
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = unitMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context)=> {
var content = `
`;
var offset = new AMap.Pixel(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
this.unitCluster = new AMap.MarkerCluster(this.map, unitMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
});
this.unitCluster.on('click',(e)=>{
if(e.clusterData.length == 1){
let item = e.clusterData[0].data
let markerContent =
``
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
position: [item.location.x,item.location.y],
offset: new AMap.Pixel(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) })//分享点击事件
}
})
});
}
//取消显示单位
resetUnit(){
this.keyUnitForm.reset()
this.keyUnitForm.controls.areaUnit.setValue('-1')
this.map.remove(this.circle)
this.unitCluster.setData([])
}
//水源提交
waterSubmit(value){
if(this.markers.length == 0){
if(this.selectedWaterList.length != 0){//勾选了水源类型
let paramsdata:any = {
PageSize:99999,
WaterSourceTypes : this.selectedWaterList
}
this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
this.createwaterMarker(data.items)
})
}else{
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请勾选想要显示的水源类型','确定',config);
}
}else{
this.circleofwater.setRadius(Number(this.waterAreaDefault))
this.circleofwater.setCenter(this.markers[0]._position)
this.circleofwater.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
//如果选择当前的视野范围算出查询半径
if(this.waterAreaDefault == '0'){
this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds())/2).lat - this.selectedUnit.location.y)
}else{
Distance = Math.abs(lnglat.offset(0, this.waterAreaDefault).lat - this.selectedUnit.location.y)
}
//如果选择全部
if(this.waterAreaDefault == '-1'){
if(this.selectedWaterList.length != 0){
let paramsdata:any = {
PageSize:99999,
WaterSourceTypes : this.selectedWaterList
}
this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
this.createwaterMarker(data.items)
})
}else{
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请勾选想要显示的水源类型','确定',config);
}
}else{
if(this.selectedWaterList.length != 0){
let paramsdata:any = {
PageSize:99999,
Lon : this.selectedUnit.location.x,
Lat : this.selectedUnit.location.y,
Distance : Distance,
WaterSourceTypes :this.selectedWaterList
}
this.http.get("/api/WaterSources",{params:paramsdata}).subscribe((data:any) => {
this.createwaterMarker(data.items)
})
}else{
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请勾选想要显示的水源类型','确定',config);
}
}
}
}
//取消显示水源
resetWater(){
this.watertForm.reset()
this.watertForm.controls.areaWater.setValue('-1')
this.map.remove(this.circleofwater)
this.waterCluster.setData([])
}
//循环渲染出所有水源markers
waterCluster:any //水源聚合实例
createwaterMarker(list){
let waterMarkerArrcluster = []
this.waterCluster ? this.waterCluster.setData([]) : null
list.forEach((item) => {
let image
if(item.waterSourceType == 0){//消火栓
image = '/assets/waterMarkers/市政消火栓.png'
}else if(item.waterSourceType == 1){//消防水池
image = '/assets/waterMarkers/方形储水池.png'
}else if(item.waterSourceType == 2){//天然水源
image = '/assets/waterMarkers/天然水源.png'
}
// 用于点集合的数组
waterMarkerArrcluster.push({
lnglat : [item.location.x,item.location.y],
image : image,
data : item
})
})
this.map.plugin(["AMap.MarkerClusterer"],() => {
var gridSize = 60
var count = waterMarkerArrcluster.length;
var _renderClusterMarker = function (context) {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
div.style.boxShadow = '0 0 5px ' + shadowColor;
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context)=> {
var content = ``;
var offset = new AMap.Pixel(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
this.waterCluster = new AMap.MarkerCluster(this.map, waterMarkerArrcluster, {
gridSize: gridSize, // 设置网格像素大小
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
renderMarker: _renderMarker, // 自定义非聚合点样式
});
this.waterCluster.on('click',(e)=>{
if(e.clusterData.length == 1){
}
})
});
}
//计算两地距离
Calculationofdistance(bounds){
let p1 = [bounds.northEast.lng, bounds.northEast.lat];
let p2 = [bounds.northEast.lng, bounds.southWest.lat];
// 返回 p1 到 p2 间的地面距离，单位：米
let dis = AMap.GeometryUtil.distance(p1, p2);
return dis
}
//全选重点单位
selectedAllUnit(event){
if(event.checked){
this.units.controls.forEach(item => {item.setValue(true)})
}else{
this.keyUnitForm.reset()
this.keyUnitForm.controls.areaUnit.setValue('0')
}
}
//全选水源
selectedAllWater(event){
if(event.checked){
this.waters.controls.forEach(item => {item.setValue(true)})
}else{
this.watertForm.reset()
this.watertForm.controls.areaWater.setValue('0')
}
}
//右上角点击每一个title
clickTitle(index){
this.selectedTitle = index
}
closertdiv(){
this.selectedTitle = null
}
//卫星图层
satelliteLayer = new AMap.TileLayer.Satellite();
satelliteModel:boolean = false
satelliteChange(e){
e.checked ? this.map.add(this.satelliteLayer) : this.map.remove(this.satelliteLayer);
}
//路网图层
roadNetLayer = new AMap.TileLayer.RoadNet();
loadModel:boolean = false
loadChange(e){
e.checked ? this.map.add(this.roadNetLayer) : this.map.remove(this.roadNetLayer);
}
@ViewChild( 'appLeft',{static: false} ) appLeft:any //子组件
leftDivState:boolean = false; //左侧工作区显示隐藏
showLeftDiv:boolean = false//左侧工作区消失
//左侧工作区显示隐藏
toggleLeft (e) {
this.leftDivState = e
}
//左侧工作区关闭
closeDiv(){
this.leftDivState = false
this.showLeftDiv = false
}
map:any //地图
markers:any = []; //markers标注
//地图2D 3D切换
mapPattern:boolean = true//默认是2D
mapPatternChange(type){
this.unitCluster = null
this.waterCluster = null
if(type == '2D'){
this.mapPattern = true
var layer = new AMap.createDefaultLayer({
zooms:[3,20], //可见级别
visible:true, //是否可见
opacity:1, //透明度
zIndex:0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化,
})
this.map = new AMap.Map('map',{
layers:[layer], //当只想显示标准图层时layers属性可缺省,
});
this.map.setCity('上海市');
}else{
this.unitCluster ? this.unitCluster.setData([]) : null
this.mapPattern = false
this.map = new AMap.Map('map',{
viewMode: '3D',
pitch: 60,
rotation: -35,
features: ['bg', 'road', 'point','building'],
mapStyle: 'amap://styles/light',
});
this.map.setCity('上海市');
}
this.satelliteModel = false
this.loadModel = false
}
//地图初始化
mapInit () {
let that = this
var layer = new AMap.createDefaultLayer({
zooms:[3,20], //可见级别
visible:true, //是否可见
opacity:1, //透明度
zIndex:0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化,
})
that.map = new AMap.Map('map',{
layers:[layer], //当只想显示标准图层时layers属性可缺省,
});
that.map.setCity('上海市');
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],function () {
that.mouseTool=new AMap.MouseTool(that.map);
});
}
searchText:string; //搜索单位名称
allCompany = []; //搜索到 匹配的单位
measureDistance; //测距离
distanceList = []; //测距离 点和线
measureArea; //测面积
mouseTool;//二合一测距和侧面积
checkRadio=false //判断测距和侧面积是否选中
//测距离 开始
startDistance(){
this.measureArea.close(false)
this.measureDistance.turnOn()
}
//侧面积 开始
startArea(){
this.measureDistance.turnOff()
this.measureArea.measureArea({
strokeColor:'#80d8ff',
fillColor:'#80d8ff',
fillOpacity:0.3
//同 Polygon 的 Option 设置
});
}
//清空距离测量
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 = [] //清空数组
}
//清空面积测量
clearArea(){
this.measureArea.close(true)
}
//合并测距和侧面积
measure(type){
switch(type){
case 'rule':{
this.mouseTool.rule({
startMarkerOptions : {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize:new AMap.Size(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/start.png"
})
},
endMarkerOptions : {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize:new AMap.Size(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: new AMap.Pixel(-9, -31)
},
midMarkerOptions : {//可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31),//图标大小
imageSize:new AMap.Size(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: new AMap.Pixel(-9, -31)
},
lineOptions : {//可缺省
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 2
}
//同 RangingTool 的 自定义 设置，缺省为默认样式
});
break;
}
case 'measureArea':{
this.mouseTool.measureArea({
strokeColor:'#80d8ff',
fillColor:'#80d8ff',
fillOpacity:0.3
//同 Polygon 的 Option 设置
});
break;
}
}
}
//合并清空
clearnAll(){
this.mouseTool.close(true)
this.checkRadio=false
}
//搜索
search () {
this.allCompany = []
let paramsdata:any = {Name: this.searchText || ''}
this.http.get("/api/Companies",{params:paramsdata}).subscribe((data:any)=>{
this.allCompany = data.items
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(`搜索目标结果为${data.items.length}个`,'确定',config);
})
}
//清除
clear () {
this.allCompany = []
this.searchText = ''
this.markers ? this.markers.forEach((element,index) => { this.map.remove(element);}) : null
this.infoWindow ? this.map.remove(this.infoWindow) : null
}
selectedUnit:any//当前打开的单位
//选择 单位 地图跳转
//弹窗实例
infoWindow:any
selectCompany (e) {
if (e.location && e.location.x && e.location.y) {
this.selectedUnit = e
this.markers.forEach((element,index) => { this.map.remove(element);}); //先删除所有标点
this.markers = []
let marker = new AMap.Marker({
map: this.map,
position: [e.location.x,e.location.y], // 基点位置,
});
this.markers.push(marker)
let markerContent = ``
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
position: [e.location.x,e.location.y],
offset: new AMap.Pixel(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
marker.on('click', (ev) => { //marker点击事件
this.infoWindow = new AMap.InfoWindow({
position: [e.location.x,e.location.y],
offset: new AMap.Pixel(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#baseInformation'),'click',(event)=>{ this.baseInformation(e) })//基本信息点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#route'),'click',(event)=>{ this.route(e) })//导航点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#fullViewNavigation'),'click',(event)=>{ this.fullViewNavigation(e) })//全景漫游点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#seePlan'),'click',(event)=>{ this.seePlan(e) })//查看预案点击事件
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#share'),'click',(event)=>{ this.share(e) })//分享点击事件
})
this.map.setZoomAndCenter(13,[marker._position[0],marker._position[1]+0.015]); //设置地图中心点
this.allCompany = []
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请完善单位地理位置','确定',config);
}
}
//基本信息
baseInformation (e) {
this.leftDivState = true
this.showLeftDiv = true
this.appLeft.selectBaseInfo(e) //调用子组件方法
}
//导航
route (e) {
this.leftDivState = false
this.showLeftDiv = false
this.isShowRouteGIS = true
this.routeEnd = e.name
this.endCoordinate = new AMap.LngLat(e.location.x, e.location.y)
}
//全景漫游
fullViewNavigation (e) {
console.log(e,'全景漫游')
}
//三维场景
threeeScene (e) {
window.open('http://39.106.78.171:8088/%E6%BC%94%E7%A4%BA%E6%A1%88%E4%BE%8B/--SHGJHYZX/')
}
//查看预案
seePlan (e) {
let data = e
let dialogRef = this.dialog.open(LookPlanDialog,{//调用open方法打开对话框并且携带参数过去
width: '1400px',
height:'800px',
id:'lookPlanDialog',
data
});
dialogRef.afterClosed().subscribe((data)=>{
});
}
//分享
share (e) {
let data = {
url:'https://www.baidu.com/',
buildingType:e.buildingTypes[0].name,
address:e.address
}
let dialogRef = this.dialog.open(ShareUrlDialog,{//调用open方法打开对话框并且携带参数过去
width: '540px',
height:'596px',
id:'shareDialog',
data});
dialogRef.afterClosed().subscribe((data)=>{
});
}
//导航路线
isShowRouteGIS:boolean = false; //导航路线 显隐
routeStart:any; //起点
routeStartList:any = [] //起点 搜索结果
routeEnd:any; //终点
routeEndList:any = [] //终点 搜索结果
timeout:any; //延时器
routeGIS:any; //查询结果 规划路线
selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵
//关闭导航路线
closeRouteGIS () {
this.isShowRouteGIS = false
}
//输入框 输入事件
routeChange (e) {
let that = this
window.clearTimeout(this.timeout)
this.timeout = window.setTimeout(()=>{
that.map.getCity( function(info){ //获取当前 city
AMap.plugin(['AMap.AutoComplete'], () =>{
var autoOptions = {city: info.city}
let keywords
e == 0 ? keywords = that.routeStart : keywords = that.routeEnd
var autoComplete = new AMap.Autocomplete(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 = new AMap.LngLat(element.location.lng, element.location.lat)
return
}
}
}
}else{//终点
that.routeEndList = result.tips
that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat)
}
});
} //if
})
})
}); //获取当前 city
},500)
}
//清空导航输入框
deleteSearchGIS (e) {
if (e==0) {
this.routeStart = null
this.routeStartList = []
this.startCoordinate = null
} else {
this.routeEnd = null
this.routeEndList = []
this.endCoordinate = null
}
}
//清除路线
clearGISRoute () {
this.routeStart = null
this.routeStartList = []
this.routeEnd = null
this.routeEndList = []
this.startCoordinate = null
this.endCoordinate = null
this.routeGIS? this.routeGIS.clear() : null
this.routes = { distance: 0, time: 0, steps: [], }
this.map.setZoomAndCenter(13,[this.selectedUnit.location.x,this.selectedUnit.location.y]); //设置地图中心点
}
//交换起始点
exchangeGISRoute () {
let data = this.routeStart
this.routeStart = this.routeEnd
this.routeEnd = data
this.routeStartList = []
this.routeEndList = []
let data2 = this.startCoordinate
this.startCoordinate = this.endCoordinate
this.endCoordinate = data2
}
routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划
startCoordinate:any//开始坐标
endCoordinate:any//结束坐标
//导航查询
queryGISRoute () {
//构造路线导航类
let that = this
this.selectType = true
this.routeGIS? this.routeGIS.clear() : null
this.routeGIS = new AMap.Driving({
map: this.map,
});
if(!this.startCoordinate){
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('未查询到起点坐标信息，请输入有效地址','确定',config);
return
}else if(!this.startCoordinate){
let config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('未查询到终点坐标信息，请输入有效地址','确定',config);
return
}else{
this.routeGIS.search(this.startCoordinate,this.endCoordinate,
function(status, result) {
if (status === 'complete') {
that.routes = result.routes[0]
} else { alert('获取驾驶规划路线失败') }
}
);
}
}
//切换 导航模式 推荐方案/躲避拥堵
toggleRoute (e) {
let that = this
if (this.selectType != e) {
this.selectType = e
this.routeGIS? this.routeGIS.clear() : null
this.routeGIS = new AMap.Driving({
map: this.map,
policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC
});
// 根据起终点名称规划驾车导航路线
this.routeGIS.search(this.startCoordinate,this.endCoordinate,
function(status, result) {
if (status === 'complete') {
that.routes = result.routes[0]
} else { alert('获取驾驶规划路线失败') }
}
);
}
}
}
//分享
@Component({
selector: 'shareUrl-dialog',
templateUrl: './shareUrl.html',
styleUrls: ['./shareUrl.scss']
})
export class ShareUrlDialog {
constructor(public http: HttpClient,public snackBar: MatSnackBar,
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2) {}
selectetime:any = [{id:0,name:'今日有效'},{id:1,name:'本周有效'},{id:2,name:'本月有效'},{id:3,name:'仅一次有效'}]
selectedTimeIndex = 0
ngOnInit() {
this.makeCode()
}
//生成二维码
qrCode
makeCode () {
this.qrCode = new QRCode(document.getElementById("qrcode"),{
text: this.data.url,
width: 200,
height: 200,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
}
//下载二维码
downloadFile () {
let canvas = this.qrCode._el.querySelector("canvas")
var base64Text = canvas.toDataURL("image/png");
let url = base64Text //createObjectURL创建一个下载Blob的url地址
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
link.setAttribute("download", '二维码');
document.body.appendChild(link);
link.click();
}
//复制链接
copyUrl(){
var copyTest = this.data.url
var inputTest = document.createElement('input')
inputTest.value = copyTest
document.body.appendChild(inputTest)
inputTest.select()
document.execCommand('Copy')
inputTest.className = 'oInput'
inputTest.style.display = 'none'
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('复制链接成功','确定',config);
}
selectedTime(index){
if(this.selectedTimeIndex != index){
this.selectedTimeIndex = index
this.qrCode.clear();
if(index == 0){//如果今日有效
console.log("今日")
}
if(index == 1){//如果本周有效
console.log("本周")
this.qrCode.makeCode("http://www.w3cschool.cc")
}
if(index == 2){//如果本月有效
console.log("本月")
}
if(index == 3){//如果仅一次有效
console.log("一次")
}
}
}
//关闭
closeDiv(){
this.dialogRef.close()
}
}
//查看预案
@Component({
selector: 'lookPlan-dialog',
templateUrl: './lookPlan.html',
styleUrls: ['./lookPlan.scss']
})
export class LookPlanDialog {
constructor(public http: HttpClient,public snackBar: MatSnackBar,
public dialogRef: MatDialogRef,
@Inject(MAT_DIALOG_DATA) public data,private render2: Renderer2,public dialog: MatDialog) {}
ngOnInit() {
// console.log(this.data)
this.getAllPlans()
}
//关闭弹窗
closeDiv(){
this.dialogRef.close()
}
//查看单位详情
lookUnitDetails(){
window.open(`/keyUnit/viewunitinfo?id=${this.data.id}`)
}
//获得所有预案组件
allPlanComponents:any//所有预案组件
getAllPlans(){
let paramsData:any = {
companyId:this.data.id,
pageNumber: 1,
pageSize: "100",
sort: ""
}
this.http.get("/api/PlanComponents",{params:paramsData}).subscribe((data:any)=>{
this.allPlanComponents = data.items
})
}
//查看预案
lookPlan(e){
if(e.planMode == 0){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('本地文件，请下载查看','确定',config);
}
if(e.planMode == 1){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('查看导入word文件','确定',config);
}
if(e.planMode == 2){ //如果是在线编辑
let id = e.id
sessionStorage.setItem("planId",id)
sessionStorage.setItem("companyId",this.data.id)
sessionStorage.setItem("buildingTypeId",this.data.buildingTypes[0].id)
sessionStorage.setItem("editable","0")
sessionStorage.setItem("planName",e.name)
let companyId = sessionStorage.getItem("companyId")
window.open(`/keyUnit/viewunitinfoplan?id=${companyId}`);
}
if(e.planMode == 3){ //如果是跳转网页
sessionStorage.setItem("url",e.url)
window.open(`/planManagement/webLook`)
}
}
//点击下载
readFile(element){
this.uploadFileLonging = element
let data =element
const dialogRef = this.dialog.open(DownloadFile, {
width:"435px",
data
});
dialogRef.afterClosed().subscribe(
data=>{
if(data){
this.downloadFileName = data.fileName
this.download = data
this.downloadFile()
}
}
);
}
//下载↓
selectDownloadFile:any; //选择下载的文件
download:any; //下载文件元数据
downloadFileName:any //下载文件的文件名
downloadisLoading:boolean = false; //进度条loading是否加载
downloadProgress:number = 0; //进度条进度
uploadFileLonging:any
downloadFile(){
this.downloadProgress = 0
let file = this.download
let fileSize = file.fileLength//下载文件的总大小
let shardSize = 10 * 1024 * 1024 //文件大小是否大于10MB
if (file && fileSize<=shardSize) { //<=10MB时直接下载
this.downloadisLoading = true
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{responseType: 'blob'},).subscribe(data=>{
let url = window.URL.createObjectURL(new Blob([data])); //createObjectURL创建一个下载Blob的url地址
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ;
link.setAttribute("download", file.fileName ? file.fileName : this.data.name + "-" +this.uploadFileLonging.name + "." + suffix);
document.body.appendChild(link);
link.click();
this.downloadisLoading = false
})
} else if (file && fileSize > shardSize) { //>10MB时分块下载
this.blockingDownload() //分段下载
this.downloadisLoading = true
}
}
//分段下载并合并
async blockingDownload () {
let file = this.download
let fileSize = file.fileLength //下载文件的总大小
let shardSize = 3 * 1024 * 1024 //3MB一个分片
let allSlice = Math.ceil(fileSize / shardSize) //总文件/3MB===共分多少段
let allFile:any = [] //所有的file分段
for (let i=0;i{
this.http.get(`/api/Objects/PlanPlatform/${file.objectName}`,{headers:{'range':`bytes= ${start}-${end}`},responseType:'blob'}).subscribe(data=>{
result(data) })
})
allFile.push(result)
if (allFile.length === allSlice) { //合并文件输出给浏览器
let url = window.URL.createObjectURL(new Blob(allFile)); //createObjectURL创建一个下载Blob的url地址
let link = document.createElement("a");
link.style.display = "none";
link.href = url;
let suffix = file.objectName.substring(file.objectName.lastIndexOf(".")+1,file.objectName.length) ;
link.setAttribute("download", file.fileName ? file.fileName : this.data.unitname + "-" +this.uploadFileLonging.name + "." + suffix);
document.body.appendChild(link);
link.click();
this.downloadisLoading = false
}
} //for循环
}
//取消分块下载
cancelDowload () {
}
}
//下载文件弹出框
@Component({
selector: 'downloadfile',
templateUrl: './downloadFile.html',
styleUrls: ['./downloadFile.scss']
})
export class DownloadFile {
constructor(private http: HttpClient,public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) public data,public snackBar: MatSnackBar) {}
name:any //如果真实姓名为空时
fileUrls:any //当前预案附件地址数组
fileDatas:any = [] //用于循环的数组
selectedFileIndex : any = 0
selectedFileData : any
ngOnInit(): void {
// console.log(this.data)
this.name = this.data.name
this.fileUrls = this.data.attachmentUrls
this.fileUrls.forEach(item=>{
this.http.get('/api/ObjectMetadata/PlanPlatform/'+item).subscribe((data:any)=>{
data.filePige = (data.fileLength / (1024*1024)).toFixed(2)
this.fileDatas.push(data)
this.selectedFileData = data
})
})
}
//取消
onNoClick(): void {
this.dialogRef.close();
}
//确定
confirm(){
this.dialogRef.close(this.selectedFileData);
}
//点击想要下载的文件
addurl(item,key){
// console.log(item,key)
this.selectedFileIndex = key
this.selectedFileData = item
}
}
基本信息
导航
全景漫游
三维场景
查看预案
分享