From 4f37b272ce04e3296a47982cecbd2b21498a78dd Mon Sep 17 00:00:00 2001 From: cpf <1105965053@qq.com> Date: Tue, 19 Jan 2021 11:36:49 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=20=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E8=B7=AF=E7=BA=BF=E8=A7=84=E5=88=92,=E5=91=A8=E8=BE=B9?= =?UTF-8?q?=E6=B0=B4=E6=BA=90=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gis-labeling/gis-labeling.component.ts | 2 +- .../edit-plan-info.component.html | 16 +- .../edit-unit-info.component.html | 18 +- .../router-gis/router-gis.component.html | 64 ++++++- .../router-gis/router-gis.component.scss | 123 +++++++++--- .../router-gis/router-gis.component.ts | 176 ++++++++++++++---- .../view-unit-details-plan.component.html | 18 +- .../view-unit-details.component.html | 16 +- .../water-road/water-road.component.html | 17 +- .../water-road/water-road.component.ts | 2 +- 10 files changed, 358 insertions(+), 94 deletions(-) diff --git a/src/app/gis-management/gis-labeling/gis-labeling.component.ts b/src/app/gis-management/gis-labeling/gis-labeling.component.ts index faa2a67..819a3ff 100644 --- a/src/app/gis-management/gis-labeling/gis-labeling.component.ts +++ b/src/app/gis-management/gis-labeling/gis-labeling.component.ts @@ -387,7 +387,7 @@ export class GisLabelingComponent implements OnInit { // 创建一个 Icon let startIcon = new AMap.Icon({ image: '../../../assets/images/fireHydrant.png', - imageSize: new AMap.Size(32, 32), + imageSize: new AMap.Size(20, 20), }); positonList.forEach((item,index)=>{ let marker = new AMap.Marker({ diff --git a/src/app/key-unit/edit-plan-info/edit-plan-info.component.html b/src/app/key-unit/edit-plan-info/edit-plan-info.component.html index 53f811f..c46fef7 100644 --- a/src/app/key-unit/edit-plan-info/edit-plan-info.component.html +++ b/src/app/key-unit/edit-plan-info/edit-plan-info.component.html @@ -32,17 +32,27 @@ - + + + + + + + + + + + - + - +
+
+ + +
import_export
+
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+ + +
+
+ + +
+
+ + {{item.road? item.road + '>' : null}} +
+
+

起

+
+
+

←

+

↑

+

→

+

↓

+

↖

+

↙

+

↗

+

↘

+ +
+
+

终

+
+
+ + diff --git a/src/app/key-unit/router-gis/router-gis.component.scss b/src/app/key-unit/router-gis/router-gis.component.scss index 744b8dd..854f398 100644 --- a/src/app/key-unit/router-gis/router-gis.component.scss +++ b/src/app/key-unit/router-gis/router-gis.component.scss @@ -2,34 +2,111 @@ width: 100%; height: 100%; box-sizing: border-box; - padding: 3px; + padding: 1px; overflow: hidden; position: relative; - .center { + .map { width: 100%; height: 100%; } +} + +//文本溢出 +.overflowText { + overflow: hidden; + text-overflow:ellipsis; + white-space: nowrap; +} +.mat-icon, label, button, p, span {cursor:pointer;} +//左侧导航路线 +.routeGIS { + width: 340px; + max-height: 700px; + overflow: hidden; + position: absolute; + border-radius: 10px; + background-color: #0080FF; + left: 30px; + top: 15px; + z-index: 6; + display: flex; + flex-direction: column; + .routeHeader { width: 100%; - height: 740px; - } - .btnbox{ - position: absolute; - left: 50%; - bottom: 7%;; - transform: translateX(-50%); + height: 130px; + min-height: 130px; + position: relative; display: flex; - div{ + align-items: center; + justify-content: center; + .routeLeft { + width: 26px; text-align: center; - width:130px; - height: 48px; - line-height: 48px; - opacity: 1; - border-radius: 30px; - font-size: 16px; - margin: 0 12px; - background: #E9EAF3; - cursor: pointer; + margin: 0 5px; + box-sizing: border-box; + .mat-icon { font-size: 24px; color: #fff; } + } + .routeContent { + flex: 1; + //起点终点 input + .routeEveryRow { + position: relative; + height: 30px; + margin: 3px 0; + label { position: absolute; color: #fff; } + .routeText { + font-size: 14px; + top: 5.5px; + left: 5px; + } + .routeClear { + top: 0px; + right: 18px; + font-size: 20px; + } + input { + width: 80%; + padding-left: 25px; + height: 30px; + border-radius: 5px; + border: none; + outline: none; + color: #fff; + background-color: #0874DE; + } + } } - .btn{ - background: linear-gradient(337deg, #FC7045 0%, #FF4923 100%); - color: #fff; + } + +//导航内容区 +.routeCenter::-webkit-scrollbar { + display: none; /* Chrome Safari */ +} +.routeCenter { + width: 100%; + overflow-y: auto; + scrollbar-width: none; /* Firefox */ + box-sizing: border-box; + background-color: #fff; + border-radius: 0 0 10px 10px; + border: 1px solid rgb(201, 197, 197); + >div { + width: 100%; + height: 30px; + line-height: 30px; + box-sizing: border-box; + margin: 5px 0; + font-size: 12px; + overflow: hidden; + text-overflow:ellipsis; + white-space: nowrap; + } //div + >div:not(:first-child){ padding: 0 10px; box-sizing: border-box; } + .routeTypeExplain label { margin: 0 10px; } + .routeCenterTB { + p { display: inline-block; margin-right: 10px; width: 30px; height: 30px; border-radius: 50%; color: #fff; text-align: center; font-size: 14px; } + .orientation { color: #0080FF; } } } -} \ No newline at end of file +} +.routeGISPublicIcon { position: absolute; color: #fff; font-size: 14px; } //导航 定位部分公共样式 +//选择路线 方案 button +.routeType { margin: 0 10px; outline: none; border: none; background-color: transparent; font-size: 14px; font-weight: 550; color: rgb(122, 116, 116); } +.selectRouteType { color: #0080FF; } \ No newline at end of file diff --git a/src/app/key-unit/router-gis/router-gis.component.ts b/src/app/key-unit/router-gis/router-gis.component.ts index b797115..3c50e52 100644 --- a/src/app/key-unit/router-gis/router-gis.component.ts +++ b/src/app/key-unit/router-gis/router-gis.component.ts @@ -1,4 +1,5 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, NgZone, OnInit, Output } from '@angular/core'; +import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; declare var AMap: any; @Component({ @@ -8,53 +9,158 @@ declare var AMap: any; }) export class RouterGISComponent implements OnInit { @Output() onCustomEvent: EventEmitter = new　EventEmitter();//创建实力 - constructor() { } + constructor(public _ngZone:NgZone,public snackBar: MatSnackBar,) { } ngOnInit(): void { window.setTimeout(()=>{ this.mapInit() },0) } - - ngAfterViewInit(): void { - - } //地图初始化 mapInit () { - console.log("ditu") - //创建地图 - let map = new AMap.Map('center', { - resizeEnable: true, - cursor: 'default', - zooms:[6,18], - }); - //构造路线导航类 实际路线 - let driving = new AMap.Driving({ - map: map, - showTraffic: true, - isOutline: true, - }); - driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); - //构造路线导航类 导航路线 - let drivingTwo = new AMap.Driving({ - map: map, - showTraffic: false, + 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属性可缺省, }); - drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); - //function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数 - //new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标 + that.map.setCity('上海市'); } - //下一步 - next(){ - this.emitEvent() + map:any; //地图实例 + routeStart:any; //起点 + routeStartList:any = [] //起点 搜索结果 + routeEnd:any; //终点 + routeEndList:any = [] //终点 搜索结果 + timeout:any; //延时器 + routeGIS:any; //查询结果 规划路线 + selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵 + + //输入框 输入事件 + 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) } - private emitEvent(){ - this.onCustomEvent.emit('data from child');//通过emit可将需要传递的数据发送给父组件 + + //清空导航输入框 + deleteSearchGIS (e) { + if (e==0) { + this.routeStart = null + this.routeStartList = [] + this.startCoordinate = null + } else { + this.routeEnd = null + this.routeEndList = [] + this.endCoordinate = null + } } - //取消 - back(){ - window.history.back(); + + //清除路线 + 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.setCity('上海市'); //设置地图中心点 } + + //交换起始点 + 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 () { + if (this.startCoordinate && this.endCoordinate) { + //构造路线导航类 + 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('获取驾驶规划路线失败') } + } + ); + } else { + const config = new MatSnackBarConfig(); + config.verticalPosition = 'top'; + config.duration = 3000 + this.snackBar.open('请选择起始点','确定',config); + } + } + + //切换 导航模式 推荐方案/躲避拥堵 + 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('获取驾驶规划路线失败') } + } + ); + } + } + } diff --git a/src/app/key-unit/view-unit-details-plan/view-unit-details-plan.component.html b/src/app/key-unit/view-unit-details-plan/view-unit-details-plan.component.html index c9b0b24..faa85fc 100644 --- a/src/app/key-unit/view-unit-details-plan/view-unit-details-plan.component.html +++ b/src/app/key-unit/view-unit-details-plan/view-unit-details-plan.component.html @@ -24,22 +24,32 @@ - + + + + + + + + + + + - + - + - -
-

create

-

编辑

-
+
\ No newline at end of file diff --git a/src/app/key-unit/water-road/water-road.component.ts b/src/app/key-unit/water-road/water-road.component.ts index 6d17050..0f7a07f 100644 --- a/src/app/key-unit/water-road/water-road.component.ts +++ b/src/app/key-unit/water-road/water-road.component.ts @@ -86,7 +86,7 @@ export class WaterRoadComponent implements OnInit { offset: new AMap.Pixel(-4, -50) }); - this.map = new AMap.Map('map',{ + this.map = new AMap.Map('center',{ center: [108.377865, 22.763499], //初始地图中心点 zoom: 16 });