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

[完善] 周边水源完善

dev
陈鹏飞 4 years ago
parent
4f37b272ce
commit
9d8e729a24
4 changed files with 252 additions and 88 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/app/key-unit/key-unit.module.ts
  2. 41
      src/app/key-unit/water-road/water-road.component.html
  3. 59
      src/app/key-unit/water-road/water-road.component.scss
  4. 237
      src/app/key-unit/water-road/water-road.component.ts

3
src/app/key-unit/key-unit.module.ts
Unescape View File

@ -137,7 +137,8 @@ import { upname } from './key-unit-management/key-unit-management.component'
FormsModule,
CountdownModule,
FileUploadModule,
UiModule
UiModule,
ReactiveFormsModule,
]
})
export class KeyUnitModule { }

41
src/app/key-unit/water-road/water-road.component.html
Unescape View File

@ -1,4 +1,45 @@
<div class="content">
<div class="center" id="center"></div>
<!-- 右上角 -->
<div class="rightTopBox">
<div class="contantbox">
<div class="waterBox">
<form [formGroup]="watertForm" class="inputList" (submit)='waterSubmit(watertForm.value)'>
<div style="display: flex;justify-content: space-between;align-items: center;">
<mat-checkbox color="primary" formControlName="allSelectedWater" (change)="selectedAllWater($event)">全选</mat-checkbox>
</div>
<div class="inputItem">
<mat-checkbox *ngFor="let water of waters.controls;let i = index" color="primary" [formControl]="water">{{waterList[i].name}}</mat-checkbox>
</div>
<div class="btnbox">
<div>
<span>显示范围 : </span>
<mat-form-field>
<select matNativeControl formControlName="areaWater" [(ngModel)]="waterAreaDefault">
<option value="0">当前视野范围</option>
<option value="200">200米</option>
<option value="500">500米</option>
<option value="1000">1000米</option>
<option value="1500">1500米</option>
<option value="2000">2000米</option>
<option value="2500">2500米</option>
<option value="3000">3000米</option>
<option value="4000">4000米</option>
<option value="5000">5000米</option>
</select>
</mat-form-field>
</div>
<button class="submit" id="submit">确定</button>
<button class="cancel" type="button" (click)="resetWater()">取消显示</button>
</div>
</form>
</div>
</div>
</div>
<!-- 右上角 -->
</div>

59
src/app/key-unit/water-road/water-road.component.scss
Unescape View File

@ -78,4 +78,61 @@
background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%);
}
}
}
}
//右上角div
.rightTopBox{
width: 480px;
position: absolute;
left: 30px;
top: 15px;
.contantbox{
width: 100%;
background: #fff;
margin-top: 3px;
border-radius: 6px;
.keyUnitBox,.waterBox,.coverageBox{
box-sizing: border-box;
padding:8px 15px;
font-size: 14px;
color: #333333;
}
.inputList{
.inputItem{
margin-top: 8px;
display: flex;
flex-wrap: wrap;
mat-checkbox{
margin-right: 15px;
}
}
.btnbox{
display: flex;
align-items: center;
justify-content: space-between;
button{
cursor: pointer;
}
.submit{
width: 68px;
height: 30px;
text-align: center;
border: 0;
background: #0080FF;
opacity: 1;
border-radius: 4px;
color: #fff;
}
.cancel{
width: 96px;
height: 30px;
background: #EEF1F5;
opacity: 1;
border-radius: 4px;
border: 0;
color: #333333;
}
}
}
}
}

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

@ -1,7 +1,8 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, ElementRef, Inject, OnInit, Renderer2 } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
declare var AMap: any;
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
declare var AMap: any;
@Component({
selector: 'app-water-road',
@ -10,108 +11,172 @@ import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
})
export class WaterRoadComponent implements OnInit {
constructor(public snackBar: MatSnackBar,public dialog: MatDialog) { }
isshow:boolean = true
textcontant:any = localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || ""
clickicon(){
this.isshow = !this.isshow
}
save(){
localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant)
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('保存成功','确定',config);
}
constructor(public renderer2: Renderer2,public snackBar: MatSnackBar,public dialog: MatDialog,private fb: FormBuilder) { }
map:any //地图
markers:any = [{_position: [121.472644,31.231706]}] //当前单位坐标
watertForm:FormGroup //gis右上角水源表单
waterList = [
{id:'0',name:'消火栓',selected:false},
{id:'1',name:'消防水池',selected:false},
{id:'2',name:'天然水源',selected:false},
]
waterAreaDefault:any = '0' //默认水源范围
selectedWaterList:any = [] //选择提交的水源
//地图范围圆圈---水源
circleofwater = new AMap.Circle({
center: null,
radius: 0, //半径
strokeOpacity: 1,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#ee2200',
zIndex: 50,
})
ngOnInit(): void {
this.watertForm = this.fb.group({
waters:this.waterUnits(),
allSelectedWater:new FormControl(),
areaWater:new FormControl()
})
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.waterList.forEach(item => {
if(item.selected){
this.selectedWaterList.push(item.name)
}
})
setTimeout(() => {
this.creatMap()
}, 0);
}
get waters():any{
return this.watertForm.get('waters')
}
creatMap(){
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
// 创建一个 icon
var startIcon = new AMap.Icon({
image: '../../../assets/images/fireHydrant.png',
// // 图标所用图片大小
imageSize: new AMap.Size(20, 20),
// // 图标取图偏移量
// imageOffset: new AMap.Pixel(-9, -3)
});
let arr = [{lng:108.299405,lat: 22.894884},
{lng:108.597409,lat: 22.80883},
{lng:108.689419,lat: 23.061775},
{lng:107.971188,lat: 22.950537},
{lng:107.847592,lat: 23.090833},
{lng:108.176374,lat: 22.790585},
{lng:108.407087,lat: 22.671522},
{lng:108.158521,lat: 22.61322},
{lng:107.925062,lat: 22.565038},
{lng:108.180494,lat: 22.501616},
{lng:107.743222,lat: 22.535121},
{lng:108.373809,lat: 22.764746},
{lng:108.378895,lat: 22.761877},
{lng:108.383337,lat: 22.766467},
{lng:108.37647,lat: 22.763341},
{lng:108.37662,lat: 22.767397},
{lng:108.378916,lat: 22.758513},
{lng:108.379045,lat: 22.765695},
{lng:108.384731,lat: 22.760096},]
let Arr = []
arr.forEach(item=>{
let viaMarker = new AMap.Marker({
position: new AMap.LngLat(item.lng, item.lat),
icon: startIcon,
offset: new AMap.Pixel(-10, -10)
//全选水源
selectedAllWater(event){
if(event.checked){
this.waters.controls.forEach(item => {item.setValue(true)})
}else{
this.watertForm.reset()
this.watertForm.controls.areaWater.setValue('0')
}
}
//水源提交
waterSubmit(value){
if(this.markers.length == 0){
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('请先选择一个单位','确定',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(20, 20),
});
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)
})
Arr.push(viaMarker)
})
var markerIcon = new AMap.Icon({
image:"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
size: new AMap.Size(52, 52), //图标大小
imageSize: new AMap.Size(26,36)
})
let marker1 = new AMap.Marker({
icon: markerIcon,
position: [108.377865, 22.763499],
offset: new AMap.Pixel(-4, -50)
});
this.map = new AMap.Map('center',{
center: [108.377865, 22.763499], //初始地图中心点
zoom: 16
});
marker1.setMap(this.map);
this.map.on('click', (e) => {
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
});
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);
}
}
// this.map.setCity('南宁市')
this.map.add(Arr);//火源标点
//取消显示水源
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)
}
//计算两地距离
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
}
//构造水源checkbox控制器
waterUnits() {
const arr = this.waterList.map(item => {
return this.fb.control(item.selected);
});
return this.fb.array(arr);
}
opendialog(){
let dialogRef = this.dialog.open(EditText);
dialogRef.afterClosed().subscribe(data=>{
if(data){
}
});
//地图初始化
creatMap(){
let that = this
var layer = new AMap.createDefaultLayer({
zooms:[3,20], //可见级别
visible:true, //是否可见
opacity:1, //透明度
zIndex:0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化,
})
that.map = new AMap.Map('center',{
layers:[layer], //当只想显示标准图层时layers属性可缺省,
});
that.map.setCity('上海市');
}
}
}
//编辑水源道路情况
@Component({
selector: 'app-editBuilding',

Write Preview
Loading…
Cancel
Save