Browse Source

高德封装替换基本完成

上海一张图
陈鹏飞 4 years ago
parent
commit
53e1fc6014
  1. 34
      src/app/data-collection/fire-force/fire-force.component.ts
  2. 37
      src/app/data-collection/linkage-forces/linkage-forces.component.ts
  3. 37
      src/app/data-collection/water-collection/water-collection.component.ts
  4. 10
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  5. 14
      src/app/key-unit/basicinfo-look/basicinfo.component.ts
  6. 64
      src/app/key-unit/basicinfo/basicinfo.component.ts
  7. 24
      src/app/key-unit/router-gis/router-gis.component.ts
  8. 9
      src/app/key-unit/six-familiarity/six-familiarity.component.ts
  9. 18
      src/app/key-unit/water-road/water-road.component.ts
  10. 12
      src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts
  11. 12
      src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts
  12. 12
      src/app/plan-audit/water-audit/water-audit.component.ts
  13. 21
      src/modules/map/declare/gaode-map.ts
  14. 18
      src/modules/map/declare/keda-map.ts
  15. 15
      src/modules/map/declare/map.d.ts

34
src/app/data-collection/fire-force/fire-force.component.ts

@ -7,7 +7,7 @@ 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 { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { MapFactory } from '@src/modules/map/declare/factory'; import { MapFactory } from '@src/modules/map/declare/factory';
import { IPlaceSearch } from '@src/modules/map/declare/map'; import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map';
import { Console } from 'console'; 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'
@ -324,10 +324,10 @@ export class FireForceComponent implements OnInit {
if(data.location && data.location.x){//如果已经标注单位坐标 if(data.location && data.location.x){//如果已经标注单位坐标
this.positionLngLat = data.location this.positionLngLat = data.location
this.map.setCenter([data.location.x,data.location.y]); this.map.setCenter([data.location.x,data.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [data.location.x,data.location.y], position: [data.location.x,data.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -800,7 +800,7 @@ export class FireForceComponent implements OnInit {
this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
this.isGisTopBox = false this.isGisTopBox = false
} }
map:any map:IMap
placeSearch: IPlaceSearch//构造地点查询类 placeSearch: IPlaceSearch//构造地点查询类
isMapLabel:boolean = false //是否已经标记坐标 isMapLabel:boolean = false //是否已经标记坐标
newPositionMarkerContent:any = newPositionMarkerContent:any =
@ -813,9 +813,9 @@ export class FireForceComponent implements OnInit {
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' + ' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
'</div>' '</div>'
//创建地图 //创建地图
newPositionMarker:any//坐标实例 newPositionMarker:IMarker//坐标实例
createMap(){ createMap(){
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:12 zoom:12
}) })
this.map.setCity('上海市'); this.map.setCity('上海市');
@ -823,7 +823,7 @@ export class FireForceComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ 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)=>{
@ -852,11 +852,11 @@ export class FireForceComponent implements OnInit {
}else{ }else{
center = this.map.getCenter(); //获取当前地图中心位置 center = this.map.getCenter(); //获取当前地图中心位置
} }
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
draggable: true, draggable: true,
position: center, position: center,
content: this.newPositionMarkerContentBtn, content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -868,10 +868,10 @@ export class FireForceComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -885,10 +885,10 @@ export class FireForceComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -898,10 +898,10 @@ export class FireForceComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -915,10 +915,10 @@ export class FireForceComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

37
src/app/data-collection/linkage-forces/linkage-forces.component.ts

@ -11,6 +11,7 @@ import { TreeService } from 'src/app/http-interceptors/tree.service';
import Viewer from 'viewerjs' import Viewer from 'viewerjs'
import Swiper from 'swiper'; 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';
declare var CryptoJS declare var CryptoJS
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -258,10 +259,10 @@ export class LinkageForcesComponent implements OnInit {
} }
if(item.location && item.location.x){//如果已经标注单位坐标 if(item.location && item.location.x){//如果已经标注单位坐标
this.map.setCenter([item.location.x,item.location.y]); this.map.setCenter([item.location.x,item.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [item.location.x,item.location.y], position: [item.location.x,item.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -519,7 +520,7 @@ export class LinkageForcesComponent implements OnInit {
this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
this.isGisTopBox = false this.isGisTopBox = false
} }
map:any map:IMap
placeSearch:any//构造地点查询类 placeSearch:any//构造地点查询类
isMapLabel:boolean = false //是否已经标记坐标 isMapLabel:boolean = false //是否已经标记坐标
newPositionMarkerContent:any = newPositionMarkerContent:any =
@ -532,9 +533,9 @@ export class LinkageForcesComponent implements OnInit {
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' + ' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
'</div>' '</div>'
//创建地图 //创建地图
newPositionMarker:any//坐标实例 newPositionMarker:IMarker//坐标实例
createMap(){ createMap(){
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:12 zoom:12
}) })
this.map.setCity('上海市'); this.map.setCity('上海市');
@ -542,9 +543,9 @@ export class LinkageForcesComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
let auto = new AMap.AutoComplete(autoOptions); let auto = MapFactory.AutocompleteInstance(autoOptions);
this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 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}
@ -571,11 +572,11 @@ export class LinkageForcesComponent implements OnInit {
}else{ }else{
center = this.map.getCenter(); //获取当前地图中心位置 center = this.map.getCenter(); //获取当前地图中心位置
} }
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
draggable: true, draggable: true,
position: center, position: center,
content: this.newPositionMarkerContentBtn, content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -587,10 +588,10 @@ export class LinkageForcesComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -604,10 +605,10 @@ export class LinkageForcesComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -618,10 +619,10 @@ export class LinkageForcesComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -635,10 +636,10 @@ export class LinkageForcesComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

37
src/app/data-collection/water-collection/water-collection.component.ts

@ -5,6 +5,7 @@ import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
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';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -232,10 +233,10 @@ export class WaterCollectionComponent implements OnInit {
if(item.location.x){//如果已经标注单位坐标 if(item.location.x){//如果已经标注单位坐标
// console.log(item) // console.log(item)
this.map.setCenter([item.location.x,item.location.y]); this.map.setCenter([item.location.x,item.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [item.location.x,item.location.y], position: [item.location.x,item.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -524,7 +525,7 @@ export class WaterCollectionComponent implements OnInit {
this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null this.newPositionMarker ? this.map.remove(this.newPositionMarker) : null
this.isGisTopBox = false this.isGisTopBox = false
} }
map:any map:IMap
placeSearch:any//构造地点查询类 placeSearch:any//构造地点查询类
isMapLabel:boolean = false //是否已经标记坐标 isMapLabel:boolean = false //是否已经标记坐标
newPositionMarkerContent:any = newPositionMarkerContent:any =
@ -537,9 +538,9 @@ export class WaterCollectionComponent implements OnInit {
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' + ' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
'</div>' '</div>'
//创建地图 //创建地图
newPositionMarker:any//坐标实例 newPositionMarker:IMarker//坐标实例
createMap(){ createMap(){
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:12 zoom:12
}) })
this.map.setCity('上海市'); this.map.setCity('上海市');
@ -547,9 +548,9 @@ export class WaterCollectionComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{ this.map.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], ()=>{
let auto = new AMap.AutoComplete(autoOptions); let auto = MapFactory.AutocompleteInstance(autoOptions);
this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 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}
@ -579,11 +580,11 @@ export class WaterCollectionComponent implements OnInit {
// console.log(3) // console.log(3)
center = this.map.getCenter(); //获取当前地图中心位置 center = this.map.getCenter(); //获取当前地图中心位置
} }
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
draggable: true, draggable: true,
position: center, position: center,
content: this.newPositionMarkerContentBtn, content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]} this.positionLngLat = {x: center.lng || center[0], y: center.lat || center[1]}
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -595,10 +596,10 @@ export class WaterCollectionComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -612,10 +613,10 @@ export class WaterCollectionComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -626,10 +627,10 @@ export class WaterCollectionComponent implements OnInit {
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{ this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'touchstart',(event)=>{
this.isGisTopBox = false this.isGisTopBox = false
this.map.remove(this.newPositionMarker) this.map.remove(this.newPositionMarker)
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.positionLngLat.x,this.positionLngLat.y], position: [this.positionLngLat.x,this.positionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat)) this.atLastPositionLngLat = JSON.parse(JSON.stringify(this.positionLngLat))
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -643,10 +644,10 @@ export class WaterCollectionComponent implements OnInit {
this.positionLngLat = {} this.positionLngLat = {}
this.atLastPositionLngLat = {} this.atLastPositionLngLat = {}
}else{ }else{
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y], position: [this.atLastPositionLngLat.x,this.atLastPositionLngLat.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18) offset: MapFactory.PixelInstance(-15, -18)
}); });
this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点 this.map.setCenter([this.atLastPositionLngLat.x,this.atLastPositionLngLat.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

10
src/app/gis-management/gis-labeling/gis-labeling.component.ts

@ -3,7 +3,7 @@ import { Component, OnInit, Renderer2, ElementRef, Inject, NgZone, ViewChild } f
import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { IDriving, IMap, IMouseTool } from '@src/modules/map/declare/map'; import { ICircle, IDriving, IMap, IMouseTool } from '@src/modules/map/declare/map';
declare var AMap: any; declare var AMap: any;
declare var QRCode: any; declare var QRCode: any;
@ -213,7 +213,7 @@ export class GisLabelingComponent implements OnInit {
}) })
} }
//地图范围圆圈---重点单位 //地图范围圆圈---重点单位
circle = MapFactory.CircleInstance({ circle:ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -225,7 +225,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---水源 //地图范围圆圈---水源
circleofwater = MapFactory.CircleInstance({ circleofwater:ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -237,7 +237,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---消防力量 //地图范围圆圈---消防力量
circleoffireForce = MapFactory.CircleInstance({ circleoffireForce:ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -249,7 +249,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50, zIndex: 50,
}) })
//地图范围圆圈---联动力量 //地图范围圆圈---联动力量
circleoflinkageForces = MapFactory.CircleInstance({ circleoflinkageForces:ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,

14
src/app/key-unit/basicinfo-look/basicinfo.component.ts

@ -19,6 +19,8 @@ import Swiper from 'swiper';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { StatisticsOfFireFightingFacilities } from '../basicinfo/basicinfo.component'; import { StatisticsOfFireFightingFacilities } from '../basicinfo/basicinfo.component';
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { IMap, IMarker } from '@src/modules/map/declare/map';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -131,11 +133,11 @@ export class BasicinfoLookComponent implements OnInit {
isMapLabel: boolean isMapLabel: boolean
//地图标注位置 //地图标注位置
markerPosition: any = { x: 0, y: 0 }//单位坐标 markerPosition: any = { x: 0, y: 0 }//单位坐标
map: any //地图实例 map: IMap //地图实例
isGisTopBox: boolean = false//点击位置按钮 isGisTopBox: boolean = false//点击位置按钮
isGisTopBoxTwo: boolean = false//点击位置按钮 isGisTopBoxTwo: boolean = false//点击位置按钮
oldPositionMarker: any //旧位置marker实例 oldPositionMarker: IMarker //旧位置marker实例
newPositionMarker: any //新位置marker实例 newPositionMarker: IMarker //新位置marker实例
newPositionMarkerContent: any = newPositionMarkerContent: any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
@ -145,7 +147,7 @@ export class BasicinfoLookComponent implements OnInit {
//初始化地图 //初始化地图
labelGis() { labelGis() {
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom: 12 zoom: 12
}) })
this.map.on('complete', () => { this.map.on('complete', () => {
@ -156,10 +158,10 @@ export class BasicinfoLookComponent implements OnInit {
if (this.isMapLabel) {//如果已经标注单位坐标 if (this.isMapLabel) {//如果已经标注单位坐标
// console.log('已标注单位位置') // console.log('已标注单位位置')
this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]); this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]);
this.oldPositionMarker = new AMap.Marker({ this.oldPositionMarker = MapFactory.MarkerInstance({
position: [this.unitinfo.location.x, this.unitinfo.location.y], position: [this.unitinfo.location.x, this.unitinfo.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.oldPositionMarker); this.map.add(this.oldPositionMarker);

64
src/app/key-unit/basicinfo/basicinfo.component.ts

@ -22,6 +22,8 @@ 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; declare var AMap: any;
import Viewer from 'viewerjs'; import Viewer from 'viewerjs';
import { IMap, IMarker, IPlaceSearch } from '@src/modules/map/declare/map';
import { MapFactory } from '@src/modules/map/declare/factory';
@Component({ @Component({
selector: 'app-basicinfo', selector: 'app-basicinfo',
templateUrl: './basicinfo.component.html', templateUrl: './basicinfo.component.html',
@ -129,11 +131,11 @@ export class BasicinfoComponent implements OnInit {
isMapLabel: boolean isMapLabel: boolean
//地图标注位置 //地图标注位置
markerPosition: any = { x: 0, y: 0 }//单位坐标 markerPosition: any = { x: 0, y: 0 }//单位坐标
map: any //地图实例 map: IMap //地图实例
isGisTopBox: boolean = false//点击位置按钮 isGisTopBox: boolean = false//点击位置按钮
isGisTopBoxTwo: boolean = false//点击位置按钮 isGisTopBoxTwo: boolean = false//点击位置按钮
oldPositionMarker: any //旧位置marker实例 oldPositionMarker: IMarker //旧位置marker实例
newPositionMarker: any //新位置marker实例 newPositionMarker: IMarker //新位置marker实例
newPositionMarkerContent: any = newPositionMarkerContent: any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
@ -152,7 +154,7 @@ export class BasicinfoComponent implements OnInit {
'</div>' '</div>'
//初始化地图 //初始化地图
searchTitle: any//搜索内容 searchTitle: any//搜索内容
placeSearch: any//地址搜索类 placeSearch: IPlaceSearch//地址搜索类
search() { search() {
this.placeSearch.search(this.searchTitle, (status, result) => { this.placeSearch.search(this.searchTitle, (status, result) => {
// 搜索成功时,result即是对应的匹配数据 // 搜索成功时,result即是对应的匹配数据
@ -169,7 +171,7 @@ export class BasicinfoComponent implements OnInit {
} }
//初始化地图 //初始化地图
labelGis() { labelGis() {
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom: 12 zoom: 12
}) })
this.map.on('complete', () => { this.map.on('complete', () => {
@ -179,12 +181,10 @@ export class BasicinfoComponent implements OnInit {
var autoOptions = { var autoOptions = {
input: "tipinput" input: "tipinput"
}; };
AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => { this.map.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], () => {
var auto = new AMap.AutoComplete(autoOptions); var auto = MapFactory.AutocompleteInstance(autoOptions);
this.placeSearch = new AMap.PlaceSearch(); //构造地点查询类 this.placeSearch = MapFactory.PlaceSearchInstance(); //构造地点查询类
auto.on("select", (e) => { auto.on("select", (e) => {
// console.log(e)
// console.log( this.newPositionMarker)
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]); //设置地图中心点
@ -195,10 +195,10 @@ export class BasicinfoComponent implements OnInit {
if (this.isMapLabel) {//如果已经标注单位坐标 if (this.isMapLabel) {//如果已经标注单位坐标
// console.log('已标注单位位置') // console.log('已标注单位位置')
this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]); this.map.setCenter([this.unitinfo.location.x, this.unitinfo.location.y]);
this.oldPositionMarker = new AMap.Marker({ this.oldPositionMarker = MapFactory.MarkerInstance({
position: [this.unitinfo.location.x, this.unitinfo.location.y], position: [this.unitinfo.location.x, this.unitinfo.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.oldPositionMarker); this.map.add(this.oldPositionMarker);
@ -222,11 +222,11 @@ export class BasicinfoComponent implements OnInit {
this.newPositionMarker.setContent(this.oldPositionMarkerContent) this.newPositionMarker.setContent(this.oldPositionMarkerContent)
} }
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
draggable: true, draggable: true,
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContentBtn, content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -251,10 +251,10 @@ export class BasicinfoComponent implements OnInit {
this.map.clearMap(); this.map.clearMap();
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition2.x, this.markerPosition2.y], position: [this.markerPosition2.x, this.markerPosition2.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.markerPosition = this.markerPosition2 this.markerPosition = this.markerPosition2
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -264,10 +264,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.map.clearMap(); this.map.clearMap();
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -277,10 +277,10 @@ export class BasicinfoComponent implements OnInit {
this.map.clearMap(); this.map.clearMap();
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition2.x, this.markerPosition2.y], position: [this.markerPosition2.x, this.markerPosition2.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.markerPosition = this.markerPosition2 this.markerPosition = this.markerPosition2
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -290,10 +290,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.map.clearMap(); this.map.clearMap();
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -311,11 +311,11 @@ export class BasicinfoComponent implements OnInit {
this.map.setCenter(center); this.map.setCenter(center);
} }
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
draggable: true, draggable: true,
position: center, position: center,
content: this.newPositionMarkerContentBtn, content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -341,10 +341,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.markerPosition = this.markerPosition2 this.markerPosition = this.markerPosition2
this.map.clearMap(); this.map.clearMap();
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
}) })
@ -353,10 +353,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
this.markerPosition = this.markerPosition2 this.markerPosition = this.markerPosition2
this.map.clearMap(); this.map.clearMap();
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
}) })
@ -365,10 +365,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点 if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -379,10 +379,10 @@ export class BasicinfoComponent implements OnInit {
this.isGisTopBox = true this.isGisTopBox = true
this.isGisTopBoxTwo = false this.isGisTopBoxTwo = false
if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点 if (this.markerPosition.x && this.markerPosition.x != 0) {//说明之前标过点
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.markerPosition.x, this.markerPosition.y], position: [this.markerPosition.x, this.markerPosition.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-34, -36) offset: MapFactory.PixelInstance(-34, -36)
}); });
this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点 this.map.setCenter([this.markerPosition.x, this.markerPosition.y]); //设置地图中心点
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

24
src/app/key-unit/router-gis/router-gis.component.ts

@ -2,6 +2,8 @@ import { HttpClient } from '@angular/common/http';
import { Component, EventEmitter, NgZone, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, NgZone, OnInit, Output } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; 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 { IDriving, IMap } from '@src/modules/map/declare/map';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -88,29 +90,29 @@ export class RouterGISComponent implements OnInit {
//地图初始化 //地图初始化
mapInit () { mapInit () {
let that = this let that = this
var layer = new AMap.createDefaultLayer({ var layer = MapFactory.LayerInstance({
zooms:[3,20], //可见级别 zooms:[3,20], //可见级别
visible:true, //是否可见 visible:true, //是否可见
opacity:1, //透明度 opacity:1, //透明度
zIndex:0, //叠加层级 zIndex:0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化, resizeEnable: true //是否监控地图容器尺寸变化,
}) })
that.map = new AMap.Map('map',{ that.map = MapFactory.MapInstance('map',{
layers:[layer], //当只想显示标准图层时layers属性可缺省, layers:[layer], //当只想显示标准图层时layers属性可缺省,
}); });
that.map.setCity('上海市'); that.map.setCity('上海市');
AMap.plugin('AMap.Driving', function() { that.map.plugin('AMap.Driving', function() {
that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null that.startCoordinate && that.endCoordinate? that.queryGISRoute() : null
}) })
} }
map:any; //地图实例 map:IMap; //地图实例
routeStart:any; //起点 routeStart:any; //起点
routeStartList:any = [] //起点 搜索结果 routeStartList:any = [] //起点 搜索结果
routeEnd:any; //终点 routeEnd:any; //终点
routeEndList:any = [] //终点 搜索结果 routeEndList:any = [] //终点 搜索结果
timeout:any; //延时器 timeout:any; //延时器
routeGIS:any; //查询结果 规划路线 routeGIS:IDriving; //查询结果 规划路线
selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵 selectType:boolean = true; //路线选择 推荐方案/躲避用拥堵
routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划 routes:any = { distance: 0, time: 0, steps: [], };//导航查询结果 路线规划
startCoordinate:any//开始坐标 startCoordinate:any//开始坐标
@ -123,11 +125,11 @@ 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
AMap.plugin(['AMap.AutoComplete'], () =>{ 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 = new AMap.Autocomplete(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(()=>{
@ -137,14 +139,14 @@ export class RouterGISComponent implements OnInit {
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 = new AMap.LngLat(element.location.lng, element.location.lat) that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat)
return return
} }
} }
} }
}else{ }else{
that.routeEndList = result.tips that.routeEndList = result.tips
that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat) that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat)
} }
}); });
@ -201,7 +203,7 @@ export class RouterGISComponent implements OnInit {
let that = this let that = this
this.selectType = true this.selectType = true
this.routeGIS? this.routeGIS.clear() : null this.routeGIS? this.routeGIS.clear() : null
this.routeGIS = new AMap.Driving({ this.routeGIS = MapFactory.DrivingInstance({
map: this.map, map: this.map,
}); });
if(!this.startCoordinate){ if(!this.startCoordinate){
@ -239,7 +241,7 @@ export class RouterGISComponent implements OnInit {
if (this.selectType != e) { if (this.selectType != e) {
this.selectType = e this.selectType = e
this.routeGIS? this.routeGIS.clear() : null this.routeGIS? this.routeGIS.clear() : null
this.routeGIS = new AMap.Driving({ this.routeGIS = MapFactory.DrivingInstance({
map: this.map, map: this.map,
policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC policy: e==true? AMap.DrivingPolicy.LEAST_TIME : AMap.DrivingPolicy.REAL_TRAFFIC
}); });

9
src/app/key-unit/six-familiarity/six-familiarity.component.ts

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { MapFactory } from '@src/modules/map/declare/factory';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -47,26 +48,24 @@ export class routerMapComponent implements OnInit {
//地图初始化 //地图初始化
mapInit () { mapInit () {
//创建地图 //创建地图
let map = new AMap.Map('contentMap', { let map = MapFactory.MapInstance('contentMap', {
resizeEnable: true, resizeEnable: true,
cursor: 'default', cursor: 'default',
zooms:[6,18], zooms:[6,18],
}); });
//构造路线导航类 实际路线 //构造路线导航类 实际路线
let driving = new AMap.Driving({ let driving = MapFactory.DrivingInstance({
map: map, map: map,
showTraffic: true, showTraffic: true,
isOutline: true, isOutline: true,
}); });
driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
//构造路线导航类 导航路线 //构造路线导航类 导航路线
let drivingTwo = new AMap.Driving({ let drivingTwo = MapFactory.DrivingInstance({
map: map, map: map,
showTraffic: false, showTraffic: false,
}); });
drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], ); 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:'山东'}], //路线可搜索, 可用坐标
} }

18
src/app/key-unit/water-road/water-road.component.ts

@ -5,6 +5,7 @@ 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 { 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';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -28,7 +29,7 @@ export class WaterRoadComponent implements OnInit {
}) })
} }
map:any //地图 map:IMap //地图
watertForm:FormGroup //gis右上角水源表单 watertForm:FormGroup //gis右上角水源表单
waterList = [ waterList = [
{id:'0',name:'消火栓',selected:true}, {id:'0',name:'消火栓',selected:true},
@ -47,7 +48,7 @@ export class WaterRoadComponent implements OnInit {
waterAreaDefault:any = '5000' //默认水源范围 waterAreaDefault:any = '5000' //默认水源范围
selectedWaterList:any = [] //选择提交的水源 selectedWaterList:any = [] //选择提交的水源
//地图范围圆圈---水源 //地图范围圆圈---水源
circleofwater = new AMap.Circle({ circleofwater:ICircle = MapFactory.CircleInstance({
center: null, center: null,
radius: 0, //半径 radius: 0, //半径
strokeOpacity: 1, strokeOpacity: 1,
@ -110,7 +111,7 @@ export class WaterRoadComponent implements OnInit {
this.circleofwater.setMap(this.map) this.circleofwater.setMap(this.map)
let Distance let Distance
let lnglat = new AMap.LngLat(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标 let lnglat = MapFactory.LngLatInstance(this.unitData.location.x, this.unitData.location.y) // lng, lat 替换成传入的坐标
//如果选择当前的视野范围算出查询半径 //如果选择当前的视野范围算出查询半径
if(this.waterAreaDefault == '0'){ if(this.waterAreaDefault == '0'){
@ -285,8 +286,7 @@ export class WaterRoadComponent implements OnInit {
let p1 = [bounds.northEast.lng, bounds.northEast.lat]; let p1 = [bounds.northEast.lng, bounds.northEast.lat];
let p2 = [bounds.northEast.lng, bounds.southWest.lat]; let p2 = [bounds.northEast.lng, bounds.southWest.lat];
// 返回 p1 到 p2 间的地面距离,单位:米 // 返回 p1 到 p2 间的地面距离,单位:米
let dis = AMap.GeometryUtil.distance(p1, p2); return this.map.distance(p1, p2);
return dis
} }
//构造水源checkbox控制器 //构造水源checkbox控制器
@ -298,21 +298,21 @@ export class WaterRoadComponent implements OnInit {
} }
//地图初始化 //地图初始化
unitMarker:any//单位标点 unitMarker:IMarker//单位标点
newPositionMarkerContent:any = newPositionMarkerContent:any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
' <img style="width:20px;height:26px" src="/assets/images/dingwei.png">' + ' <img style="width:20px;height:26px" src="/assets/images/dingwei.png">' +
'</div>' '</div>'
creatMap(){ creatMap(){
this.map = new AMap.Map('center',{ this.map = MapFactory.MapInstance('center',{
zoom: 13, //初始地图级别 zoom: 13, //初始地图级别
}); });
if(this.unitData.location && this.unitData.location.x){ if(this.unitData.location && this.unitData.location.x){
this.map.setCenter([this.unitData.location.x,this.unitData.location.y]); this.map.setCenter([this.unitData.location.x,this.unitData.location.y]);
this.unitMarker = new AMap.Marker({ this.unitMarker = MapFactory.MarkerInstance({
position: [this.unitData.location.x,this.unitData.location.y], position: [this.unitData.location.x,this.unitData.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-10, -13) offset: MapFactory.PixelInstance(-10, -13)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.unitMarker); this.map.add(this.unitMarker);

12
src/app/plan-audit/fireforce-audit/fireforce-audit.component.ts

@ -2,6 +2,8 @@ import { HttpClient } from '@angular/common/http';
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { MapFactory } from '@src/modules/map/declare/factory';
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
@ -37,16 +39,16 @@ export class FireforceAuditComponent implements OnInit {
this.FireForceDetailInfo.RelevantInfomationData ? this.AttachmentArr = JSON.parse(this.FireForceDetailInfo.RelevantInfomationData) : null this.FireForceDetailInfo.RelevantInfomationData ? this.AttachmentArr = JSON.parse(this.FireForceDetailInfo.RelevantInfomationData) : null
console.log(789,this.ZongcontactData) console.log(789,this.ZongcontactData)
setTimeout(() => { setTimeout(() => {
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:18 zoom:18
}) })
if(this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){ if(this.FireForceDetailInfo.location && this.FireForceDetailInfo.location.x){
this.map.setCenter([this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y]); this.map.setCenter([this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y], position: [this.FireForceDetailInfo.location.x,this.FireForceDetailInfo.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-10, -12) offset: MapFactory.PixelInstance(-10, -12)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);
@ -56,8 +58,8 @@ export class FireforceAuditComponent implements OnInit {
}, 0); }, 0);
} }
map:any map:IMap
newPositionMarker:any newPositionMarker:IMarker
newPositionMarkerContent:any = newPositionMarkerContent:any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' + ' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' +

12
src/app/plan-audit/linkageforces-audit/linkageforces-audit.component.ts

@ -4,6 +4,8 @@ import { ViewDetailsComponent } from '../view-details/view-details.component';
import Viewer from 'viewerjs' import Viewer from 'viewerjs'
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var CryptoJS declare var CryptoJS
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
@ -33,8 +35,8 @@ export class LinkageforcesAuditComponent implements OnInit {
{id:14,name:'住建',imgUrl:'/assets/linkageForces/zhujian.png',isChecked:false} {id:14,name:'住建',imgUrl:'/assets/linkageForces/zhujian.png',isChecked:false}
] ]
AttachmentArr:any//附件 AttachmentArr:any//附件
map:any map:IMap
newPositionMarker:any newPositionMarker:IMarker
newPositionMarkerContent:any = newPositionMarkerContent:any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' + ' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' +
@ -43,16 +45,16 @@ export class LinkageforcesAuditComponent implements OnInit {
this.AttachmentArr = JSON.parse(this.LinkageForceDetailInfo.relevantInfomationData) this.AttachmentArr = JSON.parse(this.LinkageForceDetailInfo.relevantInfomationData)
this.LinkageForceDetailInfo.location ? null : this.LinkageForceDetailInfo.location={x:null,y:null} this.LinkageForceDetailInfo.location ? null : this.LinkageForceDetailInfo.location={x:null,y:null}
setTimeout(() => { setTimeout(() => {
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:18 zoom:18
}) })
if(this.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){ if(this.LinkageForceDetailInfo.location && this.LinkageForceDetailInfo.location.x){
this.map.setCenter([this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y]); this.map.setCenter([this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y], position: [this.LinkageForceDetailInfo.location.x,this.LinkageForceDetailInfo.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-10, -12) offset: MapFactory.PixelInstance(-10, -12)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

12
src/app/plan-audit/water-audit/water-audit.component.ts

@ -1,4 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { MapFactory } from '@src/modules/map/declare/factory';
import { IMap, IMarker } from '@src/modules/map/declare/map';
declare var AMap: any; declare var AMap: any;
@Component({ @Component({
selector: 'app-water-audit', selector: 'app-water-audit',
@ -8,8 +10,8 @@ declare var AMap: any;
export class WaterAuditComponent implements OnInit { export class WaterAuditComponent implements OnInit {
@Input() public waterData: any;//data名字根据引用场景自定义 @Input() public waterData: any;//data名字根据引用场景自定义
constructor() { } constructor() { }
map:any map:IMap
newPositionMarker:any newPositionMarker:IMarker
newPositionMarkerContent:any = newPositionMarkerContent:any =
'<div class="custom-content-marker">' + '<div class="custom-content-marker">' +
' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' + ' <img style="width:20px;height:24px" src="/assets/images/dingwei.png">' +
@ -22,16 +24,16 @@ export class WaterAuditComponent implements OnInit {
this.poolData = this.waterData.detailData this.poolData = this.waterData.detailData
this.naturalWaterData = this.waterData.detailData this.naturalWaterData = this.waterData.detailData
setTimeout(() => { setTimeout(() => {
this.map = new AMap.Map('container', { this.map = MapFactory.MapInstance('container', {
zoom:18 zoom:18
}) })
if(this.waterData.location && this.waterData.location.x){ if(this.waterData.location && this.waterData.location.x){
this.map.setCenter([this.waterData.location.x,this.waterData.location.y]); this.map.setCenter([this.waterData.location.x,this.waterData.location.y]);
this.newPositionMarker = new AMap.Marker({ this.newPositionMarker = MapFactory.MarkerInstance({
position: [this.waterData.location.x,this.waterData.location.y], position: [this.waterData.location.x,this.waterData.location.y],
content: this.newPositionMarkerContent, content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-10, -12) offset: MapFactory.PixelInstance(-10, -12)
}) })
// 将 markers 添加到地图 // 将 markers 添加到地图
this.map.add(this.newPositionMarker); this.map.add(this.newPositionMarker);

21
src/modules/map/declare/gaode-map.ts

@ -12,6 +12,18 @@ export class GaoDeMap extends GaodeBasic implements IMap {
super(); super();
this.self = new AMap.Map(container, options); this.self = new AMap.Map(container, options);
} }
setBounds(zoom?: any, x?: any, y?: any, is?: boolean) {
this.self.setBounds(zoom,x,y,is)
}
setFitView(options: any) {
this.self.setFitView(options)
}
containerToLngLat(e: any) {
this.self.containerToLngLat(e)
}
clearMap() {
this.self.clearMap();
}
distance(a: number[], b: number[]) { distance(a: number[], b: number[]) {
return AMap.GeometryUtil.distance(a, b); return AMap.GeometryUtil.distance(a, b);
} }
@ -67,6 +79,12 @@ export class GaoDeMarker extends GaodeBasic implements IMarker {
this.self = new AMap.Marker(conf); this.self = new AMap.Marker(conf);
this._position = this.self._position; this._position = this.self._position;
} }
setContent(html: string) {
this.self.setContent(html)
}
setPosition(x: number[]) {
this.self.setPosition(x)
}
_position: number[] _position: number[]
setMap() { setMap() {
this.self.setMap(null) this.self.setMap(null)
@ -175,6 +193,9 @@ export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch {
super(); super();
this.self = new AMap.PlaceSearch() this.self = new AMap.PlaceSearch()
} }
search(text: string, callback: Function) {
return this.self.search(text,callback)
}
} }
export class GaodeMouseTool extends GaodeBasic implements IMouseTool { export class GaodeMouseTool extends GaodeBasic implements IMouseTool {

18
src/modules/map/declare/keda-map.ts

@ -8,6 +8,18 @@ export class KeDaMap implements IMap {
opt.configUrl = ""; opt.configUrl = "";
this.self = new KMap(opt); this.self = new KMap(opt);
} }
setBounds(zoom?: any, x?: any, y?: any, is?: boolean) {
throw new Error('Method not implemented.');
}
setFitView(options: any) {
throw new Error('Method not implemented.');
}
containerToLngLat(e: any) {
throw new Error('Method not implemented.');
}
clearMap() {
throw new Error('Method not implemented.');
}
distance(a: number[], b: number[]) { distance(a: number[], b: number[]) {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');
} }
@ -75,6 +87,12 @@ export class KeDaMarker implements IMarker {
}; };
this.self = d; this.self = d;
} }
setContent(html: string) {
throw new Error('Method not implemented.');
}
setPosition(x: number[]) {
throw new Error('Method not implemented.');
}
_position: number[]; _position: number[];
setMap() { setMap() {
throw new Error('Method not implemented.'); throw new Error('Method not implemented.');

15
src/modules/map/declare/map.d.ts vendored

@ -5,9 +5,13 @@ 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[], callback: Function); plugin(eventName: string[]|string, callback: Function);
add(obj: IMarker|any): any; add(obj: IMarker|any): any;
remove(obj: any): any; remove(obj: any): any;
clearMap();
containerToLngLat(e:any);
setFitView(options:any);
setBounds(zoom?:any, x?:any, y?:any, is?:boolean);
setCity(city: string): any; setCity(city: string): any;
getCity(callback: Function): any; getCity(callback: Function): any;
setZoom(zoom: number): any; setZoom(zoom: number): any;
@ -28,6 +32,8 @@ export interface IMarker extends ISelf {
id: string; id: string;
_position:number[]; _position:number[];
on(eventName: string, callback: Function); on(eventName: string, callback: Function);
setPosition(x:number[])
setContent(html:string)
setMap(); setMap();
} }
@ -50,6 +56,7 @@ export class IMarkOptions {
content?: string; content?: string;
offset?: IPixel; offset?: IPixel;
map?: IMap; map?: IMap;
draggable?: boolean
} }
export interface IPixel extends ISelf { export interface IPixel extends ISelf {
@ -86,11 +93,13 @@ export interface ITileLayer extends ISelf {
export interface IDrivingOptions { export interface IDrivingOptions {
map?: IMap; map?: IMap;
policy?: string policy?: string
showTraffic?: boolean
isOutline?: boolean
} }
export interface IDriving extends ISelf { export interface IDriving extends ISelf {
clear(); clear();
search(x:any, y:any, callback:Function); search(x?:any, y?:any, callback?:Function);
} }
export interface IAutocomplete extends ISelf { export interface IAutocomplete extends ISelf {
@ -99,7 +108,7 @@ export interface IAutocomplete extends ISelf {
} }
export interface IPlaceSearch extends ISelf { export interface IPlaceSearch extends ISelf {
search(text:string, callback: Function);
} }
export interface IMouseTool extends ISelf { export interface IMouseTool extends ISelf {

Loading…
Cancel
Save