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},
// {id:'0',name:'单位地上消火栓',selected:false},
// {id:'0',name:'单位地下消火栓',selected:false},
// {id:'0',name:'市政地上消火栓',selected:false},
// {id:'0',name:'消防水池',selected:false},
// {id:'0',name:'方形储水池',selected:false},
// {id:'0',name:'蓄水池',selected:false},
// {id:'0',name:'原型水塔',selected:false},
// {id:'0',name:'水库',selected:false},
// {id:'0',name:'消防水箱',selected:false},
// {id:'0',name:'码头',selected:false},
// {id:'0',name:'海洋',selected:false},
// {id:'0',name:'河流',selected:false},
// {id:'0',name:'湖泊',selected:false},
// {id:'0',name:'沟渠',selected:false}
]
keyUnitForm : FormGroup//gis右上角重点单位表单
watertForm : FormGroup//gis右上角水源表单
selectedUnitList:any = []//选择提交的单位
selectedWaterList:any = []//选择提交的水源
unitAreaDefault:any = '0'//默认单位范围
waterAreaDefault:any = '0'//默认水源范围
//获得单位循环出来的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){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请先选择一个单位','确定',config);
}else if(!this.mapPattern){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请切换2D模式使用此功能','确定',config);
}else{
// console.log('提交',this.selectedUnit)
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)
}
let paramsdata:any = {
Lon : this.selectedUnit.location.x,
Lat : this.selectedUnit.location.y,
Distance : Distance,
BuildingTypeIdList : this.selectedUnitList.length != 0 ? this.selectedUnitList : ['123']
}
// console.log(666,paramsdata)
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
unitMarkerList:any = []
unitlabelsLayer:any
createUnitMarker(list){
this.unitlabelsLayer ? this.map.remove(this.unitlabelsLayer) : null
this.unitMarkerList ? this.map.remove(this.unitMarkerList) : null
let markerArr = []
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'
}
var icon = {
// 图标类型，现阶段只支持 image 类型
type: 'image',
// 图片 url
image: image,
// 图片尺寸
size: [32, 32],
// 图片相对 position 的锚点，默认为 bottom-center
anchor: 'center',
};
var text = {
// 要展示的文字内容
content: item.name,
// 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
direction: 'bottom',
// 在 direction 基础上的偏移量
offset: [-3, -3],
// 文字样式
style: {
// 字体大小
fontSize: 12,
// 字体颜色
fillColor: '#22886f',
// 描边颜色
strokeColor: '#fff',
// 描边宽度
strokeWidth: 2,
}
};
var labelMarker = new AMap.LabelMarker({
name: item.name, // 此属性非绘制文字内容，仅最为标识使用
position: [item.location.x,item.location.y],
zIndex: 16,
// 将第一步创建的 icon 对象传给 icon 属性
icon: icon,
// 将第二步创建的 text 对象传给 text 属性
text: text,
});
labelMarker.on('click', (e)=>{
// console.log(item)
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('#threeeScene'),'click',(event)=>{ this.threeeScene(item) })//三维场景点击事件
});
markerArr.push(labelMarker)
})
this.unitlabelsLayer = new AMap.LabelsLayer({
zooms: [3, 20],
zIndex: 1000,
// 该层内标注是否避让
collision: false,
// 设置 allowCollision：true，可以让标注避让用户的标注
// allowCollision: true,
});
this.unitlabelsLayer.add(markerArr);
this.map.add(this.unitlabelsLayer);//增加图层
this.unitMarkerList = markerArr
this.map.add(this.unitMarkerList);//将markers添加到图层上
}
//取消单位markers
clearUnitMarker(){
this.map.remove(this.unitlabelsLayer)
this.map.remove(this.unitMarkerList);
}
//水源提交
waterSubmit(value){
if(this.markers.length == 0){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请先选择一个单位','确定',config);
}else if(!this.mapPattern){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请切换2D模式使用此功能','确定',config);
}else{
this.createwaterMarker()
this.circleofwater.setRadius(Number(this.waterAreaDefault))
this.circleofwater.setCenter(this.markers[0]._position)
this.circleofwater.setMap(this.map)
if(this.waterAreaDefault == '0'){
this.circleofwater.setRadius(this.Calculationofdistance(this.map.getBounds())/2)
}
}
}
waterIconList = []; //展示的水源图标
//循环渲染出所有水源markers
createwaterMarker(){
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点
this.waterIconList = []
let waterType = this.selectedWaterList //筛选出展示的 水源类型
if (waterType.length) {
let x = JSON.parse( JSON.stringify(this.markers[0]._position[0]) ) //中心标注的 坐标
let y = JSON.parse( JSON.stringify(this.markers[0]._position[1]) ) //中心标注的 坐标
let positonList = [0.015, -0.035, 0.045, 0.061, -0.013, 0.029]
// 创建一个 Icon
let startIcon = new AMap.Icon({
image: '../../../assets/images/fireHydrant.png',
imageSize: new AMap.Size(32, 32),
});
positonList.forEach((item,index)=>{
let marker = new AMap.Marker({
map: this.map,
position: index%2==0? JSON.parse( JSON.stringify([x+item,y-item]) ) : JSON.parse( JSON.stringify([x-item,y+item]) ),
icon: startIcon,
});
this.waterIconList.push(marker)
})
positonList.forEach((item,index)=>{
let marker = new AMap.Marker({
map: this.map,
position: index%2==0? JSON.parse( JSON.stringify([x+item,y+item]) ) : JSON.parse( JSON.stringify([x-item,y-item]) ),
icon: startIcon,
});
this.waterIconList.push(marker)
})
} else {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请选择水源类型','确定',config);
}
}
//计算两地距离
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')
}
}
//取消显示单位
resetUnit(){
this.keyUnitForm.reset()
this.keyUnitForm.controls.areaUnit.setValue('0')
this.map.remove(this.circle)
this.clearUnitMarker()//取消显示单位markers
// console.log('取消')
}
//取消显示水源
resetWater(){
this.waterIconList.forEach((element,index) => { this.map.remove(element) }); //先删除所有标点
this.waterIconList = []
this.watertForm.reset()
this.watertForm.controls.areaWater.setValue('0')
this.map.remove(this.circleofwater)
// console.log('取消')
}
//右上角点击每一个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);
}
// floorLayer = new AMap.Buildings({
// zooms: [16, 18],
// zIndex: 10,
// heightFactor: 2 //2倍于默认高度，3D下有效
// })
//楼层图层
// floorChange(e){
// e.checked ? this.map.add(this.floorLayer) : this.map.remove(this.floorLayer);
// }
@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){
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属性可缺省,
});
}else{
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.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);
/* that.measureDistance = new AMap.RangingTool(that.map, rulerOptions); //测距离
that.measureArea = new AMap.MouseTool(that.map); //侧面积 */
/* that.measureDistance.on('addnode',function(e){ //监听测距离 标点事件
that.distanceList.push(e.marker)
})
that.measureDistance.on('end',function(e){ //监听测距离 连线事件
that.distanceList.push(e.polyline)
}) */
/* that.mouseTool.on("rightclick",function(e){
if(this.mouseTool.eventsList[1]==undefined){
alert("000")
}
}) */
});
}
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 = ''
}
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('#threeeScene'),'click',(event)=>{ this.threeeScene(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('#threeeScene'),'click',(event)=>{ this.threeeScene(e) })//三维场景点击事件
})
this.map.setZoomAndCenter(13,marker._position); //设置地图中心点
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
that.startCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat)
}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,
});
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
// console.log(this.allPlanComponents)
})
}
//查看预案
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){
// console.log(123,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
}
}
基本信息
导航
三维场景编制