42 changed files with 7494 additions and 5356 deletions
File diff suppressed because it is too large
Load Diff
@ -1,148 +1,150 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { ApplicationRef, Component, ComponentFactoryResolver, Injector, OnInit } from '@angular/core'; |
||||||
import { HttpClient } from '@angular/common/http' |
import { HttpClient } from '@angular/common/http' |
||||||
import { Data } from '../../interface' |
import { Data } from '../../interface' |
||||||
import { Router,ActivatedRoute } from '@angular/router' |
import { Router, ActivatedRoute } from '@angular/router' |
||||||
import {CacheTokenService} from '../../http-interceptors/cache-token.service'//引入服务
|
import { CacheTokenService } from '../../http-interceptors/cache-token.service'//引入服务
|
||||||
import { MatSnackBar,MatSnackBarConfig } from '@angular/material/snack-bar'; |
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
||||||
import { MatDialog,MatDialogRef } from '@angular/material/dialog'; |
import { MatDialog, MatDialogRef } from '@angular/material/dialog'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-login', |
selector: 'app-login', |
||||||
templateUrl: './login.component.html', |
templateUrl: './login.component.html', |
||||||
styleUrls: ['./login.component.scss'], |
styleUrls: ['./login.component.scss'], |
||||||
}) |
}) |
||||||
export class LoginComponent implements OnInit { |
export class LoginComponent implements OnInit { |
||||||
|
|
||||||
constructor(private http:HttpClient,private router:Router,private route:ActivatedRoute,public token:CacheTokenService,public snackBar: MatSnackBar, public dialog: MatDialog) { } |
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, public snackBar: MatSnackBar, public dialog: MatDialog) { |
||||||
|
|
||||||
ngOnInit() { |
} |
||||||
this.automaticLogin() |
|
||||||
} |
ngOnInit() { |
||||||
|
this.automaticLogin() |
||||||
errmsg :string = '' |
} |
||||||
|
|
||||||
onSubmit(e){ |
errmsg: string = '' |
||||||
this.http.post('/api/Account/SignIn',{ |
|
||||||
name: e.name, |
onSubmit(e) { |
||||||
password: e.password}).subscribe( (data: Data) => {
|
this.http.post('/api/Account/SignIn', { |
||||||
sessionStorage.setItem("level",data.level); |
name: e.name, |
||||||
sessionStorage.setItem("token",data.token); |
password: e.password |
||||||
sessionStorage.setItem("refreshToken",data.refreshToken); |
}).subscribe((data: Data) => { |
||||||
sessionStorage.setItem("isDefaultPassword",data.isDefaultPassword);//是否需要修改默认密码
|
sessionStorage.setItem("level", data.level); |
||||||
this.http.get('/api/Account/NavMenus').subscribe((data:any)=>{ |
sessionStorage.setItem("token", data.token); |
||||||
let isHave = data.find(item=>{ return item.url == "/statisticanalysis/home"}) |
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||||
let isHaveGis = data.find(item=>{ return item.url == "/gis"}) |
sessionStorage.setItem("isDefaultPassword", data.isDefaultPassword);//是否需要修改默认密码
|
||||||
if (isHave) { |
this.http.get('/api/Account/NavMenus').subscribe((data: any) => { |
||||||
this.router.navigate([`/statisticanalysis/home`]) |
let isHave = data.find(item => { return item.url == "/statisticanalysis/home" }) |
||||||
this.dialogChangePassword() |
let isHaveGis = data.find(item => { return item.url == "/gis" }) |
||||||
return
|
if (isHave) { |
||||||
} else if(isHaveGis){ |
this.router.navigate([`/statisticanalysis/home`]) |
||||||
this.router.navigate([`/gis`]) |
this.dialogChangePassword() |
||||||
this.dialogChangePassword() |
return |
||||||
return
|
} else if (isHaveGis) { |
||||||
} else if(data.length != 0){ |
this.router.navigate([`/gis`]) |
||||||
this.router.navigate([`/keyUnit`]) |
this.dialogChangePassword() |
||||||
this.dialogChangePassword() |
return |
||||||
return
|
} else if (data.length != 0) { |
||||||
data.forEach(item => { |
this.router.navigate([`/keyUnit`]) |
||||||
if(item.url){ |
this.dialogChangePassword() |
||||||
|
return |
||||||
}
|
data.forEach(item => { |
||||||
}); |
if (item.url) { |
||||||
}else{ |
|
||||||
this.snackBar.open('该用户角色未分配任何菜单', '确定', { |
} |
||||||
duration: 3000 |
}); |
||||||
|
} else { |
||||||
|
this.snackBar.open('该用户角色未分配任何菜单', '确定', { |
||||||
|
duration: 3000 |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}) |
||||||
|
if (e.notlogin) { //7天免登录时
|
||||||
|
localStorage.setItem("isnologin", "true") |
||||||
|
localStorage.setItem("token", data.token) |
||||||
|
localStorage.setItem("refreshToken", data.refreshToken) |
||||||
|
} |
||||||
|
//调用服务中的function刷新token
|
||||||
|
this.token.startUp() |
||||||
|
}, |
||||||
|
(err) => { this.errmsg = err } |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
dialogChangePassword() { |
||||||
|
if (sessionStorage.getItem('isDefaultPassword') == 'true') { |
||||||
|
let dialogRef = this.dialog.open(ChangepasswordComponent2, |
||||||
|
{ width: '348px' }); |
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe((data) => { |
||||||
|
sessionStorage.setItem('isDefaultPassword', 'false') |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
} |
||||||
}) |
//7天免登录自动登录
|
||||||
if(e.notlogin){ //7天免登录时
|
automaticLogin() { |
||||||
localStorage.setItem("isnologin","true") |
let isNoLogin = localStorage.getItem("isnologin") |
||||||
localStorage.setItem("token",data.token) |
if (isNoLogin) { //7天免登录时
|
||||||
localStorage.setItem("refreshToken",data.refreshToken) } |
let token = localStorage.getItem("token"); |
||||||
//调用服务中的function刷新token
|
let refreshToken = localStorage.getItem("refreshToken"); |
||||||
this.token.startUp() |
this.http.post('/api/Account/RefreshToken', { |
||||||
}, |
token: token, |
||||||
(err) => {this.errmsg = err} |
refreshToken: refreshToken |
||||||
) |
}).subscribe((data: any) => { |
||||||
} |
sessionStorage.setItem("level", data.level); |
||||||
|
sessionStorage.setItem("token", data.token); |
||||||
|
sessionStorage.setItem("refreshToken", data.refreshToken); |
||||||
dialogChangePassword(){ |
this.token.startUp() |
||||||
if(sessionStorage.getItem('isDefaultPassword') == 'true'){ |
this.router.navigate(['/keyUnit']) |
||||||
let dialogRef = this.dialog.open(ChangepasswordComponent2,
|
this.snackBar.open('已自动登录', '确定', { duration: 3000 }); |
||||||
{width:'348px'}); |
}) |
||||||
|
} //if
|
||||||
dialogRef.afterClosed().subscribe((data)=>{ |
|
||||||
sessionStorage.setItem('isDefaultPassword','false') |
} |
||||||
});
|
|
||||||
|
//打开弹窗
|
||||||
|
open() { |
||||||
|
this.snackBar.open('请联系管理员', '确定', { |
||||||
|
duration: 3000 |
||||||
|
}); |
||||||
} |
} |
||||||
} |
|
||||||
//7天免登录自动登录
|
|
||||||
automaticLogin () { |
|
||||||
let isNoLogin = localStorage.getItem("isnologin") |
|
||||||
if (isNoLogin) { //7天免登录时
|
|
||||||
let token = localStorage.getItem("token"); |
|
||||||
let refreshToken = localStorage.getItem("refreshToken"); |
|
||||||
this.http.post('/api/Account/RefreshToken', { |
|
||||||
token: token, |
|
||||||
refreshToken: refreshToken}).subscribe((data:any)=>{ |
|
||||||
sessionStorage.setItem("level",data.level); |
|
||||||
sessionStorage.setItem("token",data.token); |
|
||||||
sessionStorage.setItem("refreshToken",data.refreshToken); |
|
||||||
this.token.startUp() |
|
||||||
this.router.navigate(['/keyUnit']) |
|
||||||
this.snackBar.open('已自动登录', '确定', {duration: 3000}); |
|
||||||
}) |
|
||||||
} //if
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//打开弹窗
|
|
||||||
open () { |
|
||||||
this.snackBar.open('请联系管理员', '确定', { |
|
||||||
duration: 3000 |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-changepassword', |
selector: 'app-changepassword', |
||||||
templateUrl: './changePassword.html', |
templateUrl: './changePassword.html', |
||||||
styleUrls: ['./changepassword.scss'] |
styleUrls: ['./changepassword.scss'] |
||||||
}) |
}) |
||||||
|
|
||||||
export class ChangepasswordComponent2 implements OnInit { |
export class ChangepasswordComponent2 implements OnInit { |
||||||
|
|
||||||
constructor(private http:HttpClient,public snackBar: MatSnackBar, |
constructor(private http: HttpClient, public snackBar: MatSnackBar, |
||||||
public dialogRef: MatDialogRef<ChangepasswordComponent2>) { } |
public dialogRef: MatDialogRef<ChangepasswordComponent2>) { } |
||||||
|
|
||||||
ngOnInit() { |
ngOnInit() { |
||||||
} |
} |
||||||
errmsg :string = '' |
errmsg: string = '' |
||||||
|
|
||||||
onSubmit(e){ |
onSubmit(e) { |
||||||
this.http.put( |
this.http.put( |
||||||
'/api/Account/Password',
|
'/api/Account/Password', |
||||||
{ |
{ |
||||||
newPassword: e.newPassword, |
newPassword: e.newPassword, |
||||||
password: 'SHya119!@' |
password: 'SHya119!@' |
||||||
} |
} |
||||||
).subscribe(data=> { |
).subscribe(data => { |
||||||
this.dialogRef.close(data); |
this.dialogRef.close(data); |
||||||
const config = new MatSnackBarConfig(); |
const config = new MatSnackBarConfig(); |
||||||
config.verticalPosition = 'top'; |
config.verticalPosition = 'top'; |
||||||
config.duration = 3000 |
config.duration = 3000 |
||||||
this.snackBar.open('密码修改成功','确定',config); |
this.snackBar.open('密码修改成功', '确定', config); |
||||||
},(err) => |
}, (err) => { this.errmsg = err } |
||||||
{this.errmsg = err} |
) |
||||||
) |
} |
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,30 @@ |
|||||||
|
import { ApplicationRef, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injectable, Injector } from '@angular/core'; |
||||||
|
|
||||||
|
@Injectable({ |
||||||
|
providedIn: 'root' |
||||||
|
}) |
||||||
|
export class SearchService { |
||||||
|
constructor(private componentFactoryResolver: ComponentFactoryResolver, private applicationRef: ApplicationRef, private injector: Injector,) { } |
||||||
|
|
||||||
|
//angular 动态添加组件
|
||||||
|
appendComponentToBody<T>(component: any): ComponentRef<T> { |
||||||
|
//create a component reference
|
||||||
|
const componentRef = this.componentFactoryResolver.resolveComponentFactory(component).create(this.injector); |
||||||
|
// attach component to the appRef so that so that it will be dirty checked.
|
||||||
|
this.applicationRef.attachView(componentRef.hostView); |
||||||
|
|
||||||
|
// get DOM element from component
|
||||||
|
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement; |
||||||
|
|
||||||
|
document.body.appendChild(domElem); |
||||||
|
|
||||||
|
return componentRef as ComponentRef<T>; |
||||||
|
} |
||||||
|
|
||||||
|
//删除组件
|
||||||
|
removeComponentFromBody(componentRef: ComponentRef<any>) { |
||||||
|
this.applicationRef.detachView(componentRef.hostView); |
||||||
|
componentRef.destroy(); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,13 @@ |
|||||||
|
{ |
||||||
|
"DIST_URL": "./kmap-service-main-kd.js", |
||||||
|
"TOKEN": "E203F172F1A54CD5B3CEDD107B8F4E43", |
||||||
|
"CT_SERVER_URL": "https://10.14.183.81", |
||||||
|
|
||||||
|
"USERMNG_SERVER": "", |
||||||
|
"SEARCH_SERVER": "", |
||||||
|
"WS_SERVER": "", |
||||||
|
"ROUTING_SERVER": "", |
||||||
|
"STORAGE_SERVER": "", |
||||||
|
"COORDINATETYPE": "", |
||||||
|
"INDOOR_MAP_MAX_ZOOM": 24 |
||||||
|
} |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,3 @@ |
|||||||
|
<div class="content" [ngStyle]="{'left': leftCss,'top': topCss,'min-width': minWidthCss}" *ngIf="searchList.length"> |
||||||
|
<div *ngFor="let item of searchList" (click)="select(item)" class="item">{{item.name}}</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
.content{ |
||||||
|
position: absolute; |
||||||
|
z-index: 1024; |
||||||
|
background-color: #fefefe; |
||||||
|
border: 1px solid #d1d1d1; |
||||||
|
bottom: auto; |
||||||
|
} |
||||||
|
.item { |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 12px; |
||||||
|
cursor: pointer; |
||||||
|
padding: 4px; |
||||||
|
} |
||||||
|
.item:hover { |
||||||
|
background-color: #7fb9f7; |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
import { Component, OnInit, Inject } from '@angular/core'; |
||||||
|
import { AutocompleteSelect, HtmlRender } from '../../map'; |
||||||
|
|
||||||
|
type ClickHandler = (data: AutocompleteSelect) => void; |
||||||
|
@Component({ |
||||||
|
selector: 'SearchDownList', |
||||||
|
templateUrl: './SearchDownList.html', |
||||||
|
styleUrls: ['./SearchDownList.scss'] |
||||||
|
}) |
||||||
|
export class SearchDownList implements OnInit { |
||||||
|
constructor() {} |
||||||
|
|
||||||
|
public $input; //input
|
||||||
|
public searchList: AutocompleteSelect[] = []; //list
|
||||||
|
public leftCss: string = '0px'; |
||||||
|
public topCss: string = '0px'; |
||||||
|
public minWidthCss: string = '0px'; |
||||||
|
private clickHandler: ClickHandler; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
window.onresize = () => { |
||||||
|
if (this.$input) { |
||||||
|
let Dom = this.$input.getBoundingClientRect() |
||||||
|
this.leftCss = `${Dom.left + 3}px` |
||||||
|
this.topCss = `${Dom.top + Dom.height + 3}px` |
||||||
|
this.minWidthCss = `${Dom.width}px` |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
setClickHander(handler: ClickHandler) { |
||||||
|
this.clickHandler = handler; |
||||||
|
} |
||||||
|
|
||||||
|
clearClickHander() { |
||||||
|
this.clearClickHander = null; |
||||||
|
} |
||||||
|
|
||||||
|
init(inputElement: HtmlRender): void { |
||||||
|
this.$input = inputElement |
||||||
|
let Dom = this.$input.getBoundingClientRect() |
||||||
|
this.leftCss = `${Dom.left + 3}px` |
||||||
|
this.topCss = `${Dom.top + Dom.height + 3}px` |
||||||
|
this.minWidthCss = `${Dom.width}px` |
||||||
|
} |
||||||
|
|
||||||
|
// 触发 select
|
||||||
|
select(e) { |
||||||
|
this.clearClickHander && this.clickHandler(e); |
||||||
|
this.searchList = []; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
const mapSupplier: number = 1; // 1:高德, 2:科达
|
||||||
|
|
||||||
|
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker, IInfoWindow, IMouseTool, IIcon, ISize, IIconOptions, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map' |
||||||
|
import { GaodeCircle, GaodeIcon, GaodeInfoWindow, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaodeMouseTool, GaoDePixel, GaoDeRenderClusterMarker, GaodeTileLayer, GaodeSize, GaodeDriving, GaodeAutocomplete, GaodePlaceSearch } from './gaode-map' |
||||||
|
import { KedaAutocomplete, KedaCircle, KedaDriving, KedaInfoWindow, KedaLayer, KeDaLngLat, KeDaMap, KeDaMarker, KedaMarkerCluster, KedaMouseTool, KeDaPixel, KedaPlaceSearch, KedaRenderClusterMarkerr, KedaTileLayer } from './keda-map'; |
||||||
|
import MapTools from './map-tools'; |
||||||
|
|
||||||
|
export class MapFactory { |
||||||
|
public static MapInstance(container: string, options: IMapOptions | any,plugins?:string[]): IMap { |
||||||
|
let config = MapTools.ExplicitConvert(options); |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDeMap(container, config,plugins); |
||||||
|
case 2: return new KeDaMap(container, config); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static PixelInstance(x: number, y: number): IPixel { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDePixel(x, y); |
||||||
|
case 2: return new KeDaPixel(x, y); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
public static MarkerInstance(options: IMarkOptions): IMarker { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDeMarker(options); |
||||||
|
case 2: return new KeDaMarker(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static MarkerClusterInstance(map: IMap, list: Object[], renderObj: { gridSize: number, render: IRenderClusterMarker }): IMarkerCluster { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDeMarkerCluster(map, list, renderObj); |
||||||
|
case 2: return new KedaMarkerCluster(map, list, renderObj); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static LngLatInstance(x: number, y: number): ILngLat { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDeLngLat(x, y); |
||||||
|
case 2: return new KeDaLngLat(x, y); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static IconInstance(options: IIconOptions): IIcon { //科达map 暂不需要
|
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeIcon(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static SizeInstance(x: number, y: number): ISize { //科达map 暂不需要
|
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeSize(x, y); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static TileLayerInstance(): ITileLayer { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeTileLayer(); |
||||||
|
case 2: return new KedaTileLayer(); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static LayerInstance(options: any): ILayer { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeLayer(options); |
||||||
|
case 2: return new KedaLayer(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static DrivingInstance(options: IDrivingOptions): IDriving { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeDriving(options); |
||||||
|
case 2: return new KedaDriving(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static AutocompleteInstance(options: any,component: any): IAutocomplete { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeAutocomplete(options,component); |
||||||
|
case 2: return new KedaAutocomplete(options,component); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static PlaceSearchInstance(component: any): IPlaceSearch { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodePlaceSearch(component); |
||||||
|
case 2: return new KedaPlaceSearch(component); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static MouseToolInstance(map: IMap): IMouseTool { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeMouseTool(map); |
||||||
|
case 2: return new KedaMouseTool(map); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static InfoWindowInstance(options: any): IInfoWindow { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeInfoWindow(options); |
||||||
|
case 2: return new KedaInfoWindow(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static CircleInstance(options: any): ICircle { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaodeCircle(options); |
||||||
|
case 2: return new KedaCircle(options); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
public static RenderClusterMarkerInstance(): IRenderClusterMarker { |
||||||
|
switch (mapSupplier) { |
||||||
|
case 1: return new GaoDeRenderClusterMarker(); |
||||||
|
case 2: return new KedaRenderClusterMarkerr(); |
||||||
|
default: return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,488 @@ |
|||||||
|
import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch, AutocompleteSearchCallback, AutocompleteSelectCallback, PlaceSearchCallback, AutocompleteSearch, DrivingSearchCallback } from './map' |
||||||
|
import MapTools from './map-tools'; |
||||||
|
declare var AMap: any; |
||||||
|
declare var AMapUI: any; |
||||||
|
|
||||||
|
class GaodeBasic implements ISelf { |
||||||
|
self: any; |
||||||
|
discriminator: string = "ISelf"; |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDeMap extends GaodeBasic implements IMap { |
||||||
|
/// plugins:同步加载插件
|
||||||
|
constructor(container: string, options: IMapOptions, plugins?: string[]) { |
||||||
|
super(); |
||||||
|
this.self = new AMap.Map(container, options); |
||||||
|
if (!!plugins && plugins.length) { |
||||||
|
for (var i in plugins) { |
||||||
|
let name = plugins[i]; |
||||||
|
if (name.indexOf('AMap.') == -1) continue; |
||||||
|
let pObj = eval(`new ${plugins[i]}()`); |
||||||
|
this.self.plugin(pObj); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
containerToLngLat(e: any) { |
||||||
|
return this.self.containerToLngLat(e) |
||||||
|
} |
||||||
|
clearMap() { |
||||||
|
return this.self.clearMap(); |
||||||
|
} |
||||||
|
distance(a: number[], b: number[]) { |
||||||
|
return AMap.GeometryUtil.distance(a, b); |
||||||
|
} |
||||||
|
getCity(callback: Function) { |
||||||
|
return this.self.getCity(callback) |
||||||
|
} |
||||||
|
setZoomAndCenter(zoom: number, pos: number[]) { |
||||||
|
return this.self.setZoomAndCenter(zoom, pos) |
||||||
|
} |
||||||
|
plugin(pluginNames: string[], callback: Function) { |
||||||
|
let names = pluginNames.filter(s => s.indexOf("AMap.") == 0); |
||||||
|
return this.self.plugin(names, callback) |
||||||
|
} |
||||||
|
getBounds() { |
||||||
|
return this.self.getBounds() |
||||||
|
} |
||||||
|
add(obj: IMarker | any) { |
||||||
|
return this.self.add(obj.self) |
||||||
|
} |
||||||
|
remove(obj: any) { |
||||||
|
return this.self.remove(obj.self) |
||||||
|
} |
||||||
|
setCity(city: string) { |
||||||
|
return this.self.setCity(city) |
||||||
|
} |
||||||
|
setZoom(zoom) { |
||||||
|
return this.self.setZoom(zoom) |
||||||
|
} |
||||||
|
setCenter(pos: any) { |
||||||
|
return this.self.setCenter(pos) |
||||||
|
} |
||||||
|
getCenter(): ILngLat { |
||||||
|
let d = this.self.getCenter(); |
||||||
|
return new GaoDeLngLat(0, 0, d); |
||||||
|
} |
||||||
|
getZoom() { |
||||||
|
return this.self.getZoom(); |
||||||
|
} |
||||||
|
on(eventName: string, callback: Function): void { |
||||||
|
return this.self.on(eventName, callback); |
||||||
|
} |
||||||
|
setAdministrativeAreaStyle(component: any, getData?: Function, setData?: Function) {//自定义 行政区划 样式
|
||||||
|
let that = this |
||||||
|
let level = sessionStorage.getItem("level") |
||||||
|
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => { |
||||||
|
|
||||||
|
let colors = [ |
||||||
|
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", |
||||||
|
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", |
||||||
|
"#651067", "#329262", "#5574a6", "#3b3eac" |
||||||
|
]; |
||||||
|
|
||||||
|
//创建一个实例
|
||||||
|
let districtExplorer = new DistrictExplorer({ |
||||||
|
map: that.self, |
||||||
|
eventSupport: true, //打开事件支持
|
||||||
|
}); |
||||||
|
|
||||||
|
let adcode = 310000 //上海行政编码
|
||||||
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => { |
||||||
|
|
||||||
|
//更新地图视野
|
||||||
|
that.self.setBounds(areaNode.getBounds(), null, null, true); |
||||||
|
|
||||||
|
//设置定位节点，支持鼠标位置识别
|
||||||
|
//注意节点的顺序，前面的高优先级
|
||||||
|
districtExplorer.setAreaNodesForLocating(areaNode); |
||||||
|
|
||||||
|
//清除已有的绘制内容
|
||||||
|
districtExplorer.clearFeaturePolygons(); |
||||||
|
|
||||||
|
//绘制子区域
|
||||||
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => { |
||||||
|
let fillColor = colors[i % colors.length]; |
||||||
|
let strokeColor = colors[colors.length - 1 - i % colors.length]; |
||||||
|
return { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: strokeColor, //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: fillColor, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//绘制父区域
|
||||||
|
districtExplorer.renderParentFeature(areaNode, { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: 'black', //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: null, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}); |
||||||
|
|
||||||
|
// 更新地图视野以适合区划面
|
||||||
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons()); |
||||||
|
}); |
||||||
|
|
||||||
|
if (level == "0" || level == "1" || level == "2") { |
||||||
|
//区域内点击
|
||||||
|
districtExplorer.on('featureClick', (e, feature) => { |
||||||
|
getData && getData.call(component, feature); |
||||||
|
|
||||||
|
let props = feature.properties; |
||||||
|
adcode = props.adcode |
||||||
|
let fillColor2 |
||||||
|
if (props.level == 'city') { |
||||||
|
fillColor2 = null |
||||||
|
} else { |
||||||
|
fillColor2 = '#d0daee' |
||||||
|
} |
||||||
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => { |
||||||
|
|
||||||
|
//设置定位节点，支持鼠标位置识别
|
||||||
|
//注意节点的顺序，前面的高优先级
|
||||||
|
districtExplorer.setAreaNodesForLocating(areaNode); |
||||||
|
|
||||||
|
//清除已有的绘制内容
|
||||||
|
districtExplorer.clearFeaturePolygons(); |
||||||
|
|
||||||
|
//绘制子区域
|
||||||
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => { |
||||||
|
let fillColor = colors[i % colors.length]; |
||||||
|
let strokeColor = colors[colors.length - 1 - i % colors.length]; |
||||||
|
return { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: strokeColor, //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: fillColor, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//绘制父区域
|
||||||
|
districtExplorer.renderParentFeature(areaNode, { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: 'black', //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: fillColor2, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}); |
||||||
|
|
||||||
|
// 更新地图视野以适合区划面
|
||||||
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons()); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
districtExplorer.on('outsideClick', (e) => { |
||||||
|
setData && setData.call(component); |
||||||
|
let adcode = 310000 |
||||||
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => { |
||||||
|
|
||||||
|
//设置定位节点，支持鼠标位置识别
|
||||||
|
//注意节点的顺序，前面的高优先级
|
||||||
|
districtExplorer.setAreaNodesForLocating(areaNode); |
||||||
|
|
||||||
|
//清除已有的绘制内容
|
||||||
|
districtExplorer.clearFeaturePolygons(); |
||||||
|
|
||||||
|
//绘制子区域
|
||||||
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => { |
||||||
|
let fillColor = colors[i % colors.length]; |
||||||
|
let strokeColor = colors[colors.length - 1 - i % colors.length]; |
||||||
|
return { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: strokeColor, //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: fillColor, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//绘制父区域
|
||||||
|
districtExplorer.renderParentFeature(areaNode, { |
||||||
|
cursor: 'default', |
||||||
|
bubble: true, |
||||||
|
strokeColor: 'black', //线颜色
|
||||||
|
strokeOpacity: 1, //线透明度
|
||||||
|
strokeWeight: 1, //线宽
|
||||||
|
fillColor: null, //填充色
|
||||||
|
fillOpacity: 0.5, //填充透明度
|
||||||
|
}); |
||||||
|
|
||||||
|
// 更新地图视野以适合区划面
|
||||||
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons()); |
||||||
|
}); |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
}); //end
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDePixel extends GaodeBasic implements IPixel { |
||||||
|
constructor(x: number, y: number) { |
||||||
|
super(); |
||||||
|
this.x = x; |
||||||
|
this.y = y; |
||||||
|
this.self = new AMap.Pixel(x, y); |
||||||
|
} |
||||||
|
getArray(): number[] { |
||||||
|
return [this.x, this.y]; |
||||||
|
} |
||||||
|
|
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDeMarker extends GaodeBasic implements IMarker { |
||||||
|
constructor(options: IMarkOptions) { |
||||||
|
super(); |
||||||
|
let conf = MapTools.ExplicitConvert(options); |
||||||
|
this.self = new AMap.Marker(conf); |
||||||
|
this._position = this.self._position; |
||||||
|
} |
||||||
|
getLngLatByMarkerEvent(map: IMap, e: any): ILngLat { |
||||||
|
return map.containerToLngLat(e.pixel); |
||||||
|
} |
||||||
|
setContent(html: string) { |
||||||
|
return this.self.setContent(html) |
||||||
|
} |
||||||
|
setPosition(x: ILngLat | number[]) { |
||||||
|
x = (x as ILngLat).getArray == undefined ? x : (x as ILngLat).getArray(); |
||||||
|
return this.self.setPosition(x) |
||||||
|
} |
||||||
|
_position: number[] |
||||||
|
setMap() { |
||||||
|
return this.self.setMap(null) |
||||||
|
} |
||||||
|
get id(): string { |
||||||
|
return this.self.id; |
||||||
|
} |
||||||
|
set id(str: string) { |
||||||
|
this.self.id = str; |
||||||
|
} |
||||||
|
on(eventName: string, callback: Function): void { |
||||||
|
return this.self.on(eventName, callback); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { |
||||||
|
constructor(map: IMap, list: Object[], options: any) { |
||||||
|
super(); |
||||||
|
let conf = MapTools.ExplicitConvert(options); |
||||||
|
AMap.plugin('AMap.MarkerClusterer', () => { |
||||||
|
this.self = new AMap.MarkerCluster(map.self, list, conf) |
||||||
|
}); |
||||||
|
} |
||||||
|
on(eventName: string, callback: Function): void { |
||||||
|
this.self.on(eventName, callback); |
||||||
|
} |
||||||
|
setData(list: any[]) { |
||||||
|
this.self.setData(list) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDeLngLat extends GaodeBasic implements ILngLat { |
||||||
|
constructor(x: number, y: number, me?: any) { |
||||||
|
super(); |
||||||
|
if (me == undefined) |
||||||
|
this.self = new AMap.LngLat(x, y); |
||||||
|
else |
||||||
|
this.self = me; |
||||||
|
} |
||||||
|
|
||||||
|
typeName = "LngLat"; |
||||||
|
get KL(): number { |
||||||
|
return this.lng; |
||||||
|
} |
||||||
|
get kT(): number { |
||||||
|
return this.lat; |
||||||
|
} |
||||||
|
getArray(): number[] { |
||||||
|
return [this.lng, this.lat]; |
||||||
|
} |
||||||
|
get lng(): number { |
||||||
|
return this.self.lng; |
||||||
|
} |
||||||
|
get lat(): number { |
||||||
|
return this.self.lat; |
||||||
|
} |
||||||
|
offset(x: number, y: number): ILngLat { |
||||||
|
return this.self.offset(x, y) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeLayer extends GaodeBasic implements ILayer { |
||||||
|
constructor(options: any) { |
||||||
|
super(); |
||||||
|
this.self = new AMap.createDefaultLayer(options); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeIcon extends GaodeBasic implements IIcon { |
||||||
|
constructor(options: IIconOptions) { |
||||||
|
super(); |
||||||
|
options.size = options.size.self |
||||||
|
options.imageSize = options.imageSize.self |
||||||
|
this.self = new AMap.Icon(options); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeSize extends GaodeBasic implements ISize { |
||||||
|
constructor(x: number, y: number) { |
||||||
|
super(); |
||||||
|
this.self = new AMap.Size(x, y); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeTileLayer extends GaodeBasic implements ITileLayer { |
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
} |
||||||
|
Satellite() { |
||||||
|
this.self = new AMap.TileLayer.Satellite() |
||||||
|
return this |
||||||
|
} |
||||||
|
RoadNet() { |
||||||
|
this.self = new AMap.TileLayer.RoadNet() |
||||||
|
return this |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeDriving extends GaodeBasic implements IDriving { |
||||||
|
constructor(options: IDrivingOptions) { |
||||||
|
super(); |
||||||
|
options.map = options.map.self |
||||||
|
AMap.plugin('AMap.Driving', () => { |
||||||
|
this.self = new AMap.Driving(options) |
||||||
|
}) |
||||||
|
} |
||||||
|
search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) { |
||||||
|
return this.self.search(posStart.getArray(), posEnd.getArray(), (status, result)=>{ |
||||||
|
callback.call(component,status,result) |
||||||
|
}) |
||||||
|
} |
||||||
|
clear() { |
||||||
|
return this.self.clear() |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { |
||||||
|
private component: any |
||||||
|
constructor(options: any, component: any) { |
||||||
|
super(); |
||||||
|
this.component = component |
||||||
|
AMap.plugin('AMap.AutoComplete', () => { |
||||||
|
this.self = new AMap.Autocomplete(options) |
||||||
|
}) |
||||||
|
} |
||||||
|
on(eventName: string, callback: AutocompleteSelectCallback) { |
||||||
|
this.self.on(eventName, (event) => { |
||||||
|
callback.call(this.component, event) |
||||||
|
}) |
||||||
|
} |
||||||
|
search(address: string, callback: AutocompleteSearchCallback) { |
||||||
|
this.self.search(address, (status, result) => { |
||||||
|
callback.call(this.component, status, result) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { |
||||||
|
private component: any |
||||||
|
constructor(component: any) { |
||||||
|
super(); |
||||||
|
this.component = component |
||||||
|
AMap.plugin('AMap.PlaceSearch', () => { |
||||||
|
this.self = new AMap.PlaceSearch() |
||||||
|
}) |
||||||
|
} |
||||||
|
search(text: string, callback: PlaceSearchCallback) { |
||||||
|
return this.self.search(text, (status, result) => { |
||||||
|
callback.call(this.component, status, result) |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeMouseTool extends GaodeBasic implements IMouseTool { |
||||||
|
constructor(map: IMap) { |
||||||
|
super(); |
||||||
|
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], () => { |
||||||
|
this.self = new AMap.MouseTool(map.self); |
||||||
|
}) |
||||||
|
} |
||||||
|
rule(options: any) { |
||||||
|
let conf = MapTools.ExplicitConvert(options); |
||||||
|
return this.self.rule(conf) |
||||||
|
} |
||||||
|
measureArea(options: any) { |
||||||
|
return this.self.measureArea(options) |
||||||
|
} |
||||||
|
close(isTrue: boolean) { |
||||||
|
return this.self.close(isTrue) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeInfoWindow extends GaodeBasic implements IInfoWindow { |
||||||
|
constructor(options: any) { |
||||||
|
super(); |
||||||
|
options.offset = options.offset.self |
||||||
|
this.self = new AMap.InfoWindow(options); |
||||||
|
} |
||||||
|
open(map: IMap) { |
||||||
|
return this.self.open(map.self) |
||||||
|
} |
||||||
|
listen(html: any, event: string, callback: Function) { |
||||||
|
return this.self.listen(html, event, callback) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaodeCircle extends GaodeBasic implements ICircle { |
||||||
|
constructor(options: Object) { |
||||||
|
super(); |
||||||
|
this.self = new AMap.Circle(options); |
||||||
|
} |
||||||
|
setMap(map: IMap) { |
||||||
|
return this.self.setMap(map.self) |
||||||
|
} |
||||||
|
setCenter(pos: number[]) { |
||||||
|
return this.self.setCenter(pos) |
||||||
|
} |
||||||
|
setRadius(num: number) { |
||||||
|
return this.self.setRadius(num) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf { |
||||||
|
discriminator: string = "ISelfCombine"; |
||||||
|
getFirstImages(context: any): string { |
||||||
|
return context.data[0].image; |
||||||
|
} |
||||||
|
contentRender: HtmlRender; |
||||||
|
contentNonRender: HtmlRender; |
||||||
|
pixelRender: PixelRender; |
||||||
|
pixelNonRender: PixelRender; |
||||||
|
get self(): any { |
||||||
|
return { |
||||||
|
renderClusterMarker: (context) => { |
||||||
|
context.marker.setContent(this.contentRender(context.count)); |
||||||
|
context.marker.setOffset(this.pixelRender(context.count).self); |
||||||
|
}, |
||||||
|
renderMarker: (context) => { |
||||||
|
context.marker.setContent(this.contentNonRender(this.getFirstImages(context))); |
||||||
|
context.marker.setOffset(this.pixelNonRender(context.count).self); |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,910 @@ |
|||||||
|
import { AutocompleteSearch, AutocompleteSearchCallback, AutocompleteSelect, AutocompleteSelectCallback, ClickOptions, DrivingSearchCallback, EventCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, MarkerClusterCallback, PixelRender, PlaceSearchCallback } from './map' |
||||||
|
import { SearchDownList } from './component/SearchDownListPlugins/SearchDownList'; |
||||||
|
import { SearchService } from '@src/app/searchComponent.service'; |
||||||
|
import { HttpClient } from '@angular/common/http'; |
||||||
|
import * as ObjectID from 'bson-objectid'; |
||||||
|
import * as global from 'globals'; |
||||||
|
declare var KMap: any; |
||||||
|
|
||||||
|
class KedaBasic implements ISelf { |
||||||
|
self: any; |
||||||
|
discriminator: string = "ISelf"; |
||||||
|
} |
||||||
|
const cityPosition: number[] = [121.469167918, 31.232262275]; //上海市 坐标
|
||||||
|
const beforCity: string = "上海市"; //当前城市
|
||||||
|
const cityCode: string = "310000"; //当前城市 行政编码
|
||||||
|
|
||||||
|
export class KeDaMap extends KedaBasic implements IMap { |
||||||
|
public isLoadEnd:boolean = false |
||||||
|
public LoadedCallback:Function[] = []; |
||||||
|
constructor(container: string, options: IMapOptions) { //地图初始化
|
||||||
|
super(); |
||||||
|
let that = this |
||||||
|
let opt = Object.assign({}, { containerId: container }, options) as any; |
||||||
|
opt.configUrl = "/assets/kmap/Kmap.config.json"; |
||||||
|
opt.targetCoordinateType = "WGS84"; |
||||||
|
opt.center = cityPosition; |
||||||
|
opt.zoom === undefined ? opt.zoom = 9 : opt.zoom = opt.zoom - 2 |
||||||
|
if (opt.mapStyle && opt.mapStyle == 'amap://styles/grey') { |
||||||
|
opt.solution = '8888' |
||||||
|
} |
||||||
|
let mapLayer = function () { |
||||||
|
if (opt.viewMode && opt.viewMode == "3D") { |
||||||
|
let data = { |
||||||
|
type: 'FeatureCollection', |
||||||
|
features: [ |
||||||
|
{ |
||||||
|
type: 'Feature', |
||||||
|
geometry: { |
||||||
|
type: 'Point', |
||||||
|
coordinates: cityPosition |
||||||
|
}, |
||||||
|
properties: { height: 30 } |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
that.self.add3DLayer({ data: data }); |
||||||
|
} |
||||||
|
that.isLoadEnd = true |
||||||
|
that.LoadedCallback.forEach(i=>{ |
||||||
|
try{ |
||||||
|
i(); |
||||||
|
}catch(e) { |
||||||
|
console.log(e,'错误') |
||||||
|
} |
||||||
|
}); |
||||||
|
that.LoadedCallback = [] |
||||||
|
} |
||||||
|
opt.onLoadMap = mapLayer |
||||||
|
this.self = new KMap(opt); |
||||||
|
} |
||||||
|
containerToLngLat(e: IPixel): ILngLat { |
||||||
|
let d = null; |
||||||
|
this.self.getGeoPointByPixel({ |
||||||
|
ePoint: e.self, |
||||||
|
callback: (e) => { |
||||||
|
d = new KeDaLngLat(e.data.lng, e.data.lat); |
||||||
|
} |
||||||
|
}) |
||||||
|
return d; |
||||||
|
} |
||||||
|
setAdministrativeAreaStyle(component: any, getData?: Function, setData?: Function) { //自定义 行政区划 样式
|
||||||
|
let _this =this; |
||||||
|
if(!this.isLoadEnd){ |
||||||
|
this.LoadedCallback.push( |
||||||
|
()=>_this.setAdministrativeAreaStyle(component,getData,setData)
|
||||||
|
); |
||||||
|
return; |
||||||
|
} |
||||||
|
let beforeCode:string = cityCode //当前 城市行政编码
|
||||||
|
let setTime //延时器
|
||||||
|
let initMap = ()=>{ //绘制地图
|
||||||
|
this.self.getGeometryByAdminCode({ |
||||||
|
code: beforeCode, |
||||||
|
callback: (res)=> { |
||||||
|
this.self.highlightPolygon({ |
||||||
|
color: 'rgba(0,102,255,0.5)', |
||||||
|
area: res.data |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} //function
|
||||||
|
let clickMap = (e)=>{ //点击地图
|
||||||
|
_this.self.getAdminInfoByPoint({ |
||||||
|
point: [e.lnglat.lng, e.lnglat.lat], |
||||||
|
callback: (res)=>{ |
||||||
|
if (res.status === 10) { |
||||||
|
console.log(res.data,'当前点击行政区域') |
||||||
|
if (res.data.adminId != beforeCode && res.data.parentId == cityCode) { //当前点击位置已改动
|
||||||
|
_this.self.clear() |
||||||
|
window.clearTimeout(setTime) |
||||||
|
beforeCode = (res.data.adminId).toString() |
||||||
|
setTime = window.setTimeout(()=>{ initMap() },100) |
||||||
|
let name = { properties:{name: res.data.nameZh } } |
||||||
|
getData && getData.call(component,name); |
||||||
|
return |
||||||
|
} else if (res.data.parentId != cityCode) { |
||||||
|
_this.self.clear() |
||||||
|
window.clearTimeout(setTime) |
||||||
|
beforeCode = cityCode |
||||||
|
setTime = window.setTimeout(()=>{ initMap() },100) |
||||||
|
setData && setData.call(component); |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (beforeCode != cityCode) { |
||||||
|
_this.self.clear() |
||||||
|
window.clearTimeout(setTime) |
||||||
|
beforeCode = cityCode |
||||||
|
setTime = window.setTimeout(()=>{ initMap() },100) |
||||||
|
setData && setData.call(component); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
initMap() |
||||||
|
let level = Number(sessionStorage.getItem("level")) |
||||||
|
if (level < 3) { |
||||||
|
this.on("click",clickMap,this); |
||||||
|
} |
||||||
|
} |
||||||
|
clearMap() { |
||||||
|
this.self.clear() |
||||||
|
} |
||||||
|
distance(a: number[], b: number[]) { |
||||||
|
let num |
||||||
|
this.self.distancePoints({ |
||||||
|
startPoint: a, |
||||||
|
endPoint: b, |
||||||
|
units: "meters", |
||||||
|
callback: (res) => { num = res.data } |
||||||
|
}) |
||||||
|
return num |
||||||
|
} |
||||||
|
setZoomAndCenter(zoom: number, pos: number[]) { |
||||||
|
this.self.flyTo({ |
||||||
|
zoom: zoom, |
||||||
|
point: pos, |
||||||
|
}); |
||||||
|
} |
||||||
|
getBounds() { |
||||||
|
let bounds = { |
||||||
|
northEast: null, |
||||||
|
southWest: null |
||||||
|
} |
||||||
|
this.self.getBounds({ |
||||||
|
callback: (res) => { |
||||||
|
bounds.northEast = new KeDaLngLat(res.data[0][0],res.data[0][1]) |
||||||
|
bounds.southWest = new KeDaLngLat(res.data[1][0],res.data[1][1]) |
||||||
|
} |
||||||
|
}) |
||||||
|
return bounds |
||||||
|
} |
||||||
|
add(obj: any) { |
||||||
|
let _this =this; |
||||||
|
if(!this.isLoadEnd){ |
||||||
|
this.LoadedCallback.push( |
||||||
|
()=>_this.add(obj)
|
||||||
|
); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (obj && obj.typeName === "KeDaMarker") { |
||||||
|
let _marker = (obj as KeDaMarker); |
||||||
|
_marker.map = this; |
||||||
|
this.self.addCustomOverlay(_marker.self) |
||||||
|
} else if (obj == "卫星图层") { |
||||||
|
this.self.setImageLayer({ display: true }) |
||||||
|
} else if (obj == "路网图层") { |
||||||
|
this.self.setMapStyle({ solution: '8888' }); |
||||||
|
} |
||||||
|
} |
||||||
|
remove(obj: any) { |
||||||
|
if (obj && obj.typeName === "KeDaMarker") { |
||||||
|
obj.KedaMarkerID && this.self.removeCustomOverlayById({ id: obj.KedaMarkerID }) |
||||||
|
} else if (obj && obj.typeName === "KeDaInfoWindow") { |
||||||
|
this.self.removeAllPopups() |
||||||
|
} else if (obj && obj.typeName === "KeDaCircle") { |
||||||
|
obj.id && this.self.removeLayer({ layerId: obj.id }) |
||||||
|
} else if (obj == "卫星图层") { |
||||||
|
this.self.setImageLayer({ display: false }) |
||||||
|
} else if (obj == "路网图层") { |
||||||
|
this.self.setMapStyle({ solution: '9999' }); |
||||||
|
} |
||||||
|
} |
||||||
|
setCity(city: string) { |
||||||
|
let that = this |
||||||
|
if (city.includes("上海") && this.isLoadEnd) { |
||||||
|
that.self.flyTo({ |
||||||
|
zoom: 9, |
||||||
|
point: cityPosition |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
getCity(callback: Function) { |
||||||
|
let autoOptions = { city: "上海" } |
||||||
|
return callback(autoOptions) |
||||||
|
} |
||||||
|
setZoom(zoom: number) { |
||||||
|
this.self.zoomTo({ |
||||||
|
zoom: zoom |
||||||
|
}); |
||||||
|
} |
||||||
|
getZoom(): number { |
||||||
|
let num |
||||||
|
this.self.getZoom({ |
||||||
|
callback: (e) => { |
||||||
|
num = e.data; |
||||||
|
} |
||||||
|
}) |
||||||
|
return num |
||||||
|
} |
||||||
|
setCenter(pos: number[] | ILngLat) { |
||||||
|
let _this =this; |
||||||
|
if(!this.isLoadEnd){ |
||||||
|
this.LoadedCallback.push( |
||||||
|
()=>_this.setCenter(pos)
|
||||||
|
); |
||||||
|
return; |
||||||
|
} |
||||||
|
let position = [] |
||||||
|
if (pos instanceof Array) { |
||||||
|
position = pos |
||||||
|
} else { |
||||||
|
position = pos.getArray(); |
||||||
|
} |
||||||
|
this.self.flyTo({ point: position }) |
||||||
|
} |
||||||
|
getCenter() { |
||||||
|
let center |
||||||
|
this.self.getCenter({ |
||||||
|
callback: function (res) { |
||||||
|
center = res.data |
||||||
|
} |
||||||
|
}); |
||||||
|
return center |
||||||
|
} |
||||||
|
on(eventName: string, callback: EventCallback, component?: any) { |
||||||
|
let _this =this; |
||||||
|
if(!this.isLoadEnd){ |
||||||
|
this.LoadedCallback.push( |
||||||
|
()=>_this.on(eventName,callback,component)
|
||||||
|
); |
||||||
|
return; |
||||||
|
} |
||||||
|
let eventMapProfile = { |
||||||
|
complete: "load", |
||||||
|
click: "click", |
||||||
|
rightclick: "contextmenu" |
||||||
|
}; |
||||||
|
if (eventName == "click") { |
||||||
|
this.self.addEventOnMap({event: "click", |
||||||
|
handler: (res)=>{ |
||||||
|
let event = { |
||||||
|
lnglat: new KeDaLngLat(res.lngLat.lng,res.lngLat.lat), |
||||||
|
pixel: new KeDaPixel(res.point.x,res.point.y), |
||||||
|
type: res.type, |
||||||
|
target: { id:null } //TODO
|
||||||
|
} |
||||||
|
callback.call(component,event); |
||||||
|
} |
||||||
|
}); |
||||||
|
} else if (eventName == "complete") { |
||||||
|
callback.call(component,null); |
||||||
|
} else { |
||||||
|
this.self.addEventOnMap({ |
||||||
|
event: eventMapProfile[eventName], |
||||||
|
handler: callback |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KeDaPixel extends KedaBasic implements IPixel { |
||||||
|
constructor(x: number, y: number) { |
||||||
|
super(); |
||||||
|
this.x = x; |
||||||
|
this.y = y; |
||||||
|
this.self = [x, y]; |
||||||
|
} |
||||||
|
getArray(): number[] { |
||||||
|
return this.self; |
||||||
|
} |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
} |
||||||
|
|
||||||
|
export class KeDaMarker extends KedaBasic implements IMarker { |
||||||
|
public map: KeDaMap; |
||||||
|
public KedaMarkerID:String; |
||||||
|
public typeName: string = "KeDaMarker"; |
||||||
|
private html:string = '<img class="KedaPosImg" src="/assets/images/dingwei.png">' |
||||||
|
constructor(options: IMarkOptions) { |
||||||
|
super(); |
||||||
|
let pos = [] |
||||||
|
if (options.position instanceof Array) { |
||||||
|
pos = options.position |
||||||
|
} else { |
||||||
|
pos = options.position.getArray() |
||||||
|
} |
||||||
|
let elementHtml = document.createElement('div') |
||||||
|
elementHtml.innerHTML = options.content? options.content : this.html |
||||||
|
let marker = { |
||||||
|
point: pos, |
||||||
|
//anchor: 'bottom', //TODO
|
||||||
|
//offset: options.offset? options.offset.self : [0,0], //TODO
|
||||||
|
element: elementHtml.firstElementChild, |
||||||
|
ended: (res) => { |
||||||
|
this.KedaMarkerID = res.data; |
||||||
|
if (options.draggable) { //启用拖拽功能
|
||||||
|
this.map.self.setCustomOverlayDraggable({ |
||||||
|
id: this.KedaMarkerID, |
||||||
|
draggable: true, |
||||||
|
}) |
||||||
|
this.map.self.addEventOnCustomOverlays({ |
||||||
|
selector: `#${this.KedaMarkerID}`, |
||||||
|
event: 'dragend', |
||||||
|
}); |
||||||
|
} |
||||||
|
this.startBindEvent(); |
||||||
|
} |
||||||
|
}; |
||||||
|
this.self = marker; |
||||||
|
this._position = pos |
||||||
|
if (options.map) { |
||||||
|
this.map = options.map as KeDaMap |
||||||
|
this.map.self.addCustomOverlay(this.self); |
||||||
|
} |
||||||
|
} |
||||||
|
getLngLatByMarkerEvent(map:IMap,e: any): ILngLat { |
||||||
|
return e.lnglat; |
||||||
|
} |
||||||
|
_position: number[]; |
||||||
|
setContent(html: string) { //marker 添加 DOM元素
|
||||||
|
this.map.self.setCustomOverlayProperty({ |
||||||
|
type: 'id', |
||||||
|
id: this.KedaMarkerID, |
||||||
|
element: html, |
||||||
|
}) |
||||||
|
} |
||||||
|
setPosition(x: ILngLat | number[]) { |
||||||
|
x = (x as ILngLat).getArray == undefined ? x : (x as ILngLat).getArray(); |
||||||
|
this.map.self.setCustomOverlayProperty({ |
||||||
|
type: 'id', |
||||||
|
id: this.KedaMarkerID, |
||||||
|
point: x |
||||||
|
}) |
||||||
|
} |
||||||
|
setMap() { |
||||||
|
this.map.self.removeCustomOverlayById({ id: this.KedaMarkerID }) |
||||||
|
} |
||||||
|
get id(): string { |
||||||
|
return this.self.id |
||||||
|
} |
||||||
|
set id(str: string) { |
||||||
|
this.self.id = str |
||||||
|
} |
||||||
|
public bindObj = []; // event
|
||||||
|
on(eventName: string, callback: EventCallback, component?: any) { |
||||||
|
this.bindObj.push({ |
||||||
|
eventName: eventName, |
||||||
|
callback: callback, |
||||||
|
component: component, |
||||||
|
}); |
||||||
|
this.startBindEvent(); |
||||||
|
} |
||||||
|
startBindEvent() { |
||||||
|
let _this =this; |
||||||
|
if (this.map !== undefined) { |
||||||
|
this.bindObj.forEach((item, index) => { |
||||||
|
if (item.eventName.includes('drag')) { |
||||||
|
this.map.self.setCustomOverlayDraggable({ |
||||||
|
id: this.KedaMarkerID, |
||||||
|
draggable: true, |
||||||
|
}) |
||||||
|
} |
||||||
|
this.map.self.addEventOnCustomOverlays({ |
||||||
|
selector: `#${this.KedaMarkerID}`, |
||||||
|
event: item.eventName, |
||||||
|
handler: (res) =>{ |
||||||
|
this.map.self.getOverlayById({ |
||||||
|
id: this.KedaMarkerID, |
||||||
|
callback: (p)=>{ |
||||||
|
let point = p.data.point; |
||||||
|
let event |
||||||
|
if (res.lngLat!=undefined && res.point!=undefined) { |
||||||
|
event = { |
||||||
|
lnglat: new KeDaLngLat(point.lng,point.lat), |
||||||
|
pixel: [0,0],//科达覆盖物所用的div坐标为center，儿我们的div正好近似正方形，所以不用偏移
|
||||||
|
type: res.type, |
||||||
|
target: { id:this.self.id || null }, |
||||||
|
_target:res.target |
||||||
|
} |
||||||
|
} else { |
||||||
|
event = { |
||||||
|
lnglat: new KeDaLngLat(point.lng,point.lat), |
||||||
|
target: { id:this.self.id || null } |
||||||
|
} |
||||||
|
} |
||||||
|
item.callback.call(item.component,event) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
}); |
||||||
|
}) |
||||||
|
this.bindObj = []; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KeDaLngLat extends KedaBasic implements ILngLat { |
||||||
|
constructor(lng: number, lat: number) { |
||||||
|
super(); |
||||||
|
this.lng = lng |
||||||
|
this.lat = lat |
||||||
|
this.self = this; |
||||||
|
} |
||||||
|
offset(x: number, y: number): ILngLat { |
||||||
|
return x = 2 * Math.asin(Math.sin(Math.round(x) / 12756274) / Math.cos(this.kT * Math.PI / 180)), |
||||||
|
x = this.KL + 180 * x / Math.PI, |
||||||
|
y = 2 * Math.asin(Math.round(y) / 12756274), |
||||||
|
new KeDaLngLat(x, y); |
||||||
|
} |
||||||
|
typeName = "LngLat"; |
||||||
|
lng: number; |
||||||
|
lat: number; |
||||||
|
get KL(): number { |
||||||
|
return this.lng; |
||||||
|
} |
||||||
|
get kT(): number { |
||||||
|
return this.lat; |
||||||
|
} |
||||||
|
getArray(): number[] { |
||||||
|
return [this.lng, this.lat]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaDriving extends KedaBasic implements IDriving { //路线导航
|
||||||
|
public map: KeDaMap; |
||||||
|
public policy: number = 0; // 0:快捷模式, 4:躲避拥堵
|
||||||
|
public id: string; |
||||||
|
constructor(options: any) { |
||||||
|
super(); |
||||||
|
this.map = options.map as KeDaMap |
||||||
|
options.policy === undefined ? this.policy = 0 : this.policy = options.policy |
||||||
|
} |
||||||
|
search(component: any, posStart: ILngLat, posEnd: ILngLat, callback: DrivingSearchCallback) { |
||||||
|
let params = { |
||||||
|
startPoint: posStart.getArray(), |
||||||
|
endPoint: posEnd.getArray(), |
||||||
|
error: () => { alert('路线规划失败！') }, |
||||||
|
ended: (res) => { |
||||||
|
console.log(res.data,'路径规划') |
||||||
|
this.id = res.data |
||||||
|
let router = { routes:[] } |
||||||
|
callback.call(component,'complete',router) |
||||||
|
} |
||||||
|
} |
||||||
|
if (this.map.isLoadEnd) { //map加载完毕
|
||||||
|
if (this.policy === 0) { //快捷模式
|
||||||
|
this.map.self.createMinDistanceRoutePlanning(params) |
||||||
|
} else { //躲避拥堵
|
||||||
|
this.map.self.createMinTimeRoutePlanning(params) |
||||||
|
} |
||||||
|
} else { |
||||||
|
let _this =this; |
||||||
|
this.map.LoadedCallback.push( |
||||||
|
()=>_this.search(component,posStart,posEnd,callback)
|
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
clear() { |
||||||
|
this.id? this.map.self.removeRoutePlanning({ id: this.id }) : null |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索
|
||||||
|
private component: any; |
||||||
|
private searchDownList: SearchDownList; |
||||||
|
private $input: any; |
||||||
|
constructor(options: any, component: any) { |
||||||
|
super(); |
||||||
|
this.component = component |
||||||
|
if (options && options.input != undefined) { //绑定input框 搜索事件
|
||||||
|
this.searchDownList = global.injector.get<SearchService>(SearchService).appendComponentToBody(SearchDownList).instance; |
||||||
|
this.$input = document.getElementById(options.input); |
||||||
|
this.searchDownList.init(this.$input) |
||||||
|
this.$input.oninput = (e) =>{ //监听 input事件
|
||||||
|
(this.component.map as KeDaMap).self.queryInfoByType({ |
||||||
|
code: cityCode, |
||||||
|
keyword: this.$input.value, |
||||||
|
maxCount: 10, |
||||||
|
searchType: [], |
||||||
|
callback: (res) => { |
||||||
|
let list = res.data |
||||||
|
this.searchDownList.searchList = list || [] |
||||||
|
} |
||||||
|
}) // search
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
on(eventName: string, callback: AutocompleteSelectCallback) { |
||||||
|
this.searchDownList.setClickHander((e:any) => { |
||||||
|
let a = { |
||||||
|
id : e.id, |
||||||
|
name : e.name, |
||||||
|
adcode : e.adminId, |
||||||
|
district : e.address, |
||||||
|
location : new KeDaLngLat(e.locationpoint[0],e.locationpoint[1]), |
||||||
|
type : 'point', |
||||||
|
poi: { location : new KeDaLngLat(e.locationpoint[0],e.locationpoint[1]) } |
||||||
|
} |
||||||
|
callback.call(this.component,a); |
||||||
|
}); |
||||||
|
} |
||||||
|
search(address: string, callback: AutocompleteSearchCallback) { |
||||||
|
(this.component.map as KeDaMap).self.queryInfoByType({ |
||||||
|
code: cityCode, |
||||||
|
keyword: address, |
||||||
|
maxCount: 10, |
||||||
|
searchType: [], |
||||||
|
callback: (res:any) => { |
||||||
|
let list = { tips:[] }; |
||||||
|
res.data.forEach(item => { |
||||||
|
let a = { |
||||||
|
id : item.id, |
||||||
|
name : item.name, |
||||||
|
adcode : item.adminId, |
||||||
|
district : item.address, |
||||||
|
location : new KeDaLngLat(item.locationpoint[0],item.locationpoint[1]), |
||||||
|
type : 'point', |
||||||
|
poi: { location : new KeDaLngLat(item.locationpoint[0],item.locationpoint[1]) } |
||||||
|
} |
||||||
|
list.tips.push(a); |
||||||
|
}); |
||||||
|
callback.call(this.component,'complete',list); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaPlaceSearch extends KedaBasic implements IPlaceSearch { //PlaceSearch 关键字搜索
|
||||||
|
private component: any |
||||||
|
constructor(component: any) { |
||||||
|
super(); |
||||||
|
this.component = component |
||||||
|
} |
||||||
|
search(address: string, callback: PlaceSearchCallback) { |
||||||
|
(this.component.map as KeDaMap).self.queryInfoByType({ |
||||||
|
code: cityCode, |
||||||
|
keyword: address, |
||||||
|
maxCount: 10, |
||||||
|
searchType: [], |
||||||
|
callback: (res:any) => { |
||||||
|
let list = { info:'OK', poiList:{ posi:[] } }; |
||||||
|
res.data.forEach(item => { |
||||||
|
let a = { |
||||||
|
id : item.id, |
||||||
|
name : item.name, |
||||||
|
adcode : item.adminId, |
||||||
|
district : item.address, |
||||||
|
location : new KeDaLngLat(item.locationpoint[0],item.locationpoint[1]), |
||||||
|
type : 'point', |
||||||
|
poi: { location : new KeDaLngLat(item.locationpoint[0],item.locationpoint[1]) } |
||||||
|
} |
||||||
|
list.poiList.posi.push(a); |
||||||
|
}); |
||||||
|
callback.call(this.component,'complete',list); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层
|
||||||
|
public typeName: string = "KeDaCircle"; |
||||||
|
public id: string; |
||||||
|
constructor(options: any) { |
||||||
|
super(); |
||||||
|
let circle = { |
||||||
|
data: { |
||||||
|
type: 'FeatureCollection', |
||||||
|
features: [ |
||||||
|
{ |
||||||
|
type: 'Feature', |
||||||
|
geometry: { |
||||||
|
type: 'Point', |
||||||
|
coordinates: cityPosition |
||||||
|
}, |
||||||
|
properties: { id: ObjectID.default.generate() } |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
defaultStyles: { |
||||||
|
"line-dasharray": options.strokeDasharray, |
||||||
|
"line-opacity": options.strokeOpacity, |
||||||
|
"fill-color": options.fillColor, |
||||||
|
"fill-opacity": options.fillOpacity, |
||||||
|
}, |
||||||
|
radius: 0, |
||||||
|
draggable: false, |
||||||
|
updateHandler: (res) => { }, |
||||||
|
end: (res) => { this.id = res } |
||||||
|
} |
||||||
|
this.self = circle |
||||||
|
} |
||||||
|
setRadius(num: number) { //设置圆的半径
|
||||||
|
this.self.radius = num / 1000 |
||||||
|
} |
||||||
|
setCenter(pos: number[]) {//设置圆的中心
|
||||||
|
this.self.center = pos |
||||||
|
} |
||||||
|
setMap(map: KeDaMap) {//把圆添加到 map
|
||||||
|
if (map.isLoadEnd) { |
||||||
|
this.self.radius != 0 && map.self.addGeometryCircleLayer(this.self) |
||||||
|
} else { |
||||||
|
let _this =this; |
||||||
|
map.LoadedCallback.push( |
||||||
|
()=>_this.setMap(map)
|
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaMarkerCluster extends KedaBasic implements IMarkerCluster { //Marker 聚合物
|
||||||
|
public map:KeDaMap |
||||||
|
public id:string |
||||||
|
private LoadedCallback:Function[] = [] |
||||||
|
public markerList:any[] = [] |
||||||
|
constructor(map: IMap, list: Object[], options: any) { |
||||||
|
super(); |
||||||
|
this.map = map as KeDaMap; |
||||||
|
list.forEach((item:any)=>{ |
||||||
|
let elementHtml = document.createElement('div') |
||||||
|
elementHtml.innerHTML = `<img class="KedaPosIcon" src="${item.image}">` |
||||||
|
let marker = { |
||||||
|
point: item.lnglat, |
||||||
|
element: elementHtml.firstElementChild, |
||||||
|
customProps: item.data, |
||||||
|
} |
||||||
|
this.markerList.push(marker) |
||||||
|
}) |
||||||
|
if (this.markerList.length) { //有聚合物时
|
||||||
|
|
||||||
|
} |
||||||
|
// let http:HttpClient = global.injector.get<HttpClient>(HttpClient)
|
||||||
|
// http.get(`http://10.14.183.81/kiop-web/static/autoGroup/2.19.0.kd/assets/json/buildData.json`).subscribe(data=>{
|
||||||
|
// console.log(data)
|
||||||
|
// })
|
||||||
|
//覆盖物聚合
|
||||||
|
// this.map.self.addOverlayLayer({
|
||||||
|
// serviceName: 'service_tzn_test3', //业务图层类型
|
||||||
|
// clustered: true, //是否聚合
|
||||||
|
// defaultIcon: 'icon-policeman-1',//雪碧图名称
|
||||||
|
// clusteredMarkerTemplate: `'<div style="background-color: lightgrey;padding: 4px;border-radius: 3px">' +
|
||||||
|
// '{{IMGTAG}}' +</div>`,
|
||||||
|
// singleMarkerTemplate: {
|
||||||
|
// default: '<div style="background-color: red;padding: 2px;border-radius: 3px">' +
|
||||||
|
// '{{IMGTAG}}' + '</div>',
|
||||||
|
// filters: [
|
||||||
|
// {
|
||||||
|
// template: '<div style="background-color: red;padding: 2px;border-radius: 3px">' +
|
||||||
|
// '{{IMGTAG}}' +
|
||||||
|
// '</div>',
|
||||||
|
// icon: 'icon-policeman-1',
|
||||||
|
// //status === 1 的数据，将显示为markerHtml的marker样式
|
||||||
|
// match: [{
|
||||||
|
// key: 'status',
|
||||||
|
// value: 1
|
||||||
|
// }]
|
||||||
|
// },
|
||||||
|
// ]
|
||||||
|
// },
|
||||||
|
// ended: function (res) {
|
||||||
|
// console.log(res,'覆盖物聚合·')
|
||||||
|
// this.id = res.data
|
||||||
|
// this.LoadedCallback.forEach(i=>{
|
||||||
|
// try{
|
||||||
|
// i();
|
||||||
|
// }catch(e) {
|
||||||
|
// console.log(e,'错误')
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// this.LoadedCallback = []
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
} |
||||||
|
on(eventName: string, callback: MarkerClusterCallback, component?: any): void { |
||||||
|
let _this =this; |
||||||
|
if(!this.id){ |
||||||
|
this.LoadedCallback.push( |
||||||
|
()=>_this.on(eventName,callback,component)
|
||||||
|
); |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
setData(list: any[]) { |
||||||
|
if (!list.length && this.id) { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaRenderClusterMarkerr extends KedaBasic implements IRenderClusterMarker { //Marker 聚合物 配置项
|
||||||
|
discriminator: string = "ISelfCombine"; |
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
} |
||||||
|
getFirstImages(context: any): string { |
||||||
|
return context.data[0].image; |
||||||
|
} |
||||||
|
contentRender: HtmlRender; |
||||||
|
contentNonRender: HtmlRender; |
||||||
|
pixelRender: PixelRender; |
||||||
|
pixelNonRender: PixelRender; |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息窗体
|
||||||
|
public typeName: string = "KeDaInfoWindow"; |
||||||
|
constructor(options) { |
||||||
|
super(); |
||||||
|
let opt = { |
||||||
|
htmlText: options.content, |
||||||
|
// offset: options.offset.self,
|
||||||
|
anchor: 'bottom', |
||||||
|
point: options.position, |
||||||
|
closeButton: true, |
||||||
|
} |
||||||
|
this.self = opt |
||||||
|
} |
||||||
|
open(map: IMap) { |
||||||
|
map.self.addPopup(this.self); |
||||||
|
} |
||||||
|
listen(html: any, event: string, callback: Function) { |
||||||
|
html.addEventListener(event, callback) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaLayer extends KedaBasic implements ILayer { //mapInit 配置项
|
||||||
|
constructor(options: any) { |
||||||
|
super(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaTileLayer extends KedaBasic implements ITileLayer { //图层切换
|
||||||
|
constructor() { |
||||||
|
super(); |
||||||
|
} |
||||||
|
Satellite() { //卫星图层
|
||||||
|
return "卫星图层" |
||||||
|
} |
||||||
|
RoadNet() { //路网图层
|
||||||
|
return "路网图层" |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
export class KedaMouseTool extends KedaBasic implements IMouseTool { //地图工具
|
||||||
|
constructor(map: IMap) { |
||||||
|
super(); |
||||||
|
this.self = map.self |
||||||
|
} |
||||||
|
layerIds = []; |
||||||
|
layerIdAreas = []; |
||||||
|
rule(options: any) { |
||||||
|
let that = this |
||||||
|
this.self.measureDistance({ |
||||||
|
units: 'kilometers', |
||||||
|
callback: (result) => { |
||||||
|
var startText, sClass = that.self.mapType === 'AG' ? 'ag-popup-tools' : 'mm-popup-tools'; |
||||||
|
var result = result.data; |
||||||
|
if (!result.isEnd) { |
||||||
|
if (result.isStart) { |
||||||
|
that.self.addTexts({ |
||||||
|
points: [{ |
||||||
|
point: result.point, |
||||||
|
htmlText: '起点', |
||||||
|
class: sClass |
||||||
|
}], |
||||||
|
anchor: 'left', |
||||||
|
ended: function (res) { |
||||||
|
that.layerIds.push(res.data); |
||||||
|
startText = res.data; |
||||||
|
} |
||||||
|
}); |
||||||
|
} else { |
||||||
|
that.self.addTexts({ |
||||||
|
points: [{ |
||||||
|
point: result.point, |
||||||
|
htmlText: result.distance.toFixed(4) + 'km', |
||||||
|
class: sClass |
||||||
|
}], |
||||||
|
anchor: 'left', |
||||||
|
ended: function (res) { |
||||||
|
that.layerIds.push(res.data); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (result.index >= 1) { |
||||||
|
if (result.isFailure) { |
||||||
|
that.layerIds.forEach((layerId) => { |
||||||
|
that.self.removeTextsByType({ |
||||||
|
textType: layerId |
||||||
|
}); |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
that.layerIds.push(result.layerId); |
||||||
|
if (that.self.mapType === 'BM') { |
||||||
|
that.self.addTexts({ |
||||||
|
points: [{ |
||||||
|
point: result.point, |
||||||
|
htmlText: '总距离：' + result.distance.toFixed(4) + |
||||||
|
'km', |
||||||
|
class: sClass |
||||||
|
}], |
||||||
|
anchor: 'left', |
||||||
|
ended: function (res) { |
||||||
|
that.layerIds.push(res.data); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
that.layerIds.forEach((layerId) => { |
||||||
|
that.self.removeTextsByType({ |
||||||
|
textType: layerId |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
measureArea(options: any) { |
||||||
|
let that = this |
||||||
|
this.self.measureArea({ |
||||||
|
units: 'meters', |
||||||
|
callback: (result) => { |
||||||
|
var sClass = that.self.mapType === 'AG' ? 'ag-popup-tools' : 'mm-popup-tools'; |
||||||
|
var result = result.data; |
||||||
|
if (!result.isEnd) { |
||||||
|
if (result.index >= 2) { |
||||||
|
that.self.addTexts({ |
||||||
|
points: [{ |
||||||
|
point: result.point, |
||||||
|
htmlText: result.area + '平方米', |
||||||
|
class: sClass |
||||||
|
}], |
||||||
|
anchor: 'left', |
||||||
|
ended: function (res) { |
||||||
|
that.layerIdAreas.push(res.data); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (result.index >= 2) { |
||||||
|
if (result.isFailure) { |
||||||
|
that.layerIdAreas.forEach((layerId) => { |
||||||
|
that.self.removeTextsByType({ |
||||||
|
textType: layerId |
||||||
|
}); |
||||||
|
}); |
||||||
|
return; |
||||||
|
} |
||||||
|
that.layerIdAreas.push(result.layerId); |
||||||
|
if (that.self.mapType === 'BM') { |
||||||
|
that.self.addTexts({ |
||||||
|
points: [{ |
||||||
|
point: result.point, |
||||||
|
htmlText: '总面积：' + result.area + '平方米', |
||||||
|
class: sClass |
||||||
|
}], |
||||||
|
anchor: 'left', |
||||||
|
ended: function (res) { |
||||||
|
that.layerIdAreas.push(res.data); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
close(isTrue: boolean) { |
||||||
|
if (isTrue) { |
||||||
|
this.self.clear(); |
||||||
|
for (var i in this.layerIds) { |
||||||
|
this.self.removeTextsByType({ |
||||||
|
textType: this.layerIds[i] |
||||||
|
}); |
||||||
|
} |
||||||
|
for (var i in this.layerIdAreas) { |
||||||
|
this.self.removeTextsByType({ |
||||||
|
textType: this.layerIdAreas[i] |
||||||
|
}); |
||||||
|
} |
||||||
|
this.layerIdAreas = []; |
||||||
|
this.layerIds = []; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,43 @@ |
|||||||
|
|
||||||
|
export default class MapTools { |
||||||
|
//显式转换
|
||||||
|
public static ExplicitConvert(data: any): any { |
||||||
|
if (data == null) { |
||||||
|
return |
||||||
|
} |
||||||
|
let obj = Object.assign({}, data); |
||||||
|
let convert = (obj: any, data: string) => { |
||||||
|
if (!obj[data]) return; |
||||||
|
if (obj[data].discriminator === "ISelf") { |
||||||
|
obj[data] = obj[data].self; |
||||||
|
} else if (obj[data].discriminator === "ISelfCombine") { |
||||||
|
Object.assign(obj, obj[data].self); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let process = (obj: any, deep: number = 0) => { |
||||||
|
try { |
||||||
|
deep++; |
||||||
|
if (deep >= 4) return; |
||||||
|
if (obj == undefined) return; |
||||||
|
if (!(obj instanceof Object)) return; |
||||||
|
for (var name in obj) { |
||||||
|
if (obj[name] instanceof Array) { |
||||||
|
for (var j in obj[name]) { |
||||||
|
convert(obj[name], j); |
||||||
|
process(obj[name][j], deep); |
||||||
|
} |
||||||
|
continue; |
||||||
|
} |
||||||
|
convert(obj, name); |
||||||
|
process(obj[name], deep); |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.log(e); |
||||||
|
debugger |
||||||
|
} |
||||||
|
} |
||||||
|
process(obj); |
||||||
|
return obj; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,200 @@ |
|||||||
|
export interface ISelf { |
||||||
|
self: any; |
||||||
|
discriminator: string; |
||||||
|
} |
||||||
|
|
||||||
|
export class ClickOptions { |
||||||
|
lnglat: ILngLat |
||||||
|
pixel: IPixel |
||||||
|
type: string |
||||||
|
target: { id:string } |
||||||
|
} |
||||||
|
|
||||||
|
type EventCallback = (event?:ClickOptions)=>void; |
||||||
|
export interface IMap extends ISelf { |
||||||
|
on(eventName: string, callback: EventCallback, component?: any); |
||||||
|
add(obj: IMarker|ITileLayer|any); |
||||||
|
remove(obj: IMarker|ITileLayer|any); |
||||||
|
clearMap(); |
||||||
|
containerToLngLat(e:IPixel): ILngLat; //地图容器像素坐标转经纬度
|
||||||
|
setCity(city: string); |
||||||
|
getCity(callback: Function): any; |
||||||
|
setZoom(zoom: number); |
||||||
|
setZoomAndCenter(zoom: number, pos: number[]); |
||||||
|
getZoom(): number; |
||||||
|
setCenter(pos: number[]|ILngLat); |
||||||
|
getCenter(): ILngLat; |
||||||
|
getBounds(): any; |
||||||
|
distance(a:number[],b:number[]): any; |
||||||
|
setAdministrativeAreaStyle(component:any,getData?:Function,setData?:Function): any; //自定义 行政区划 样式
|
||||||
|
} |
||||||
|
|
||||||
|
export interface IMapOptions { |
||||||
|
zoom?: number; |
||||||
|
zooms?: number[]; |
||||||
|
} |
||||||
|
|
||||||
|
export interface IMarker extends ISelf { |
||||||
|
id: string; |
||||||
|
_position:number[]; |
||||||
|
on(eventName: string, callback: EventCallback, component?: any); |
||||||
|
setPosition(x:ILngLat|number[]) |
||||||
|
setContent(html:string) |
||||||
|
setMap(); |
||||||
|
getLngLatByMarkerEvent(map:IMap,e:any):ILngLat; |
||||||
|
} |
||||||
|
|
||||||
|
export class MarkerClusterOptions { //聚合物 click 数据类型
|
||||||
|
cluster:any[] |
||||||
|
clusterData:any[] |
||||||
|
lnglat:ILngLat |
||||||
|
target:any |
||||||
|
markers:IMarker[] |
||||||
|
} |
||||||
|
|
||||||
|
type MarkerClusterCallback = (event:MarkerClusterOptions)=>void; |
||||||
|
export interface IMarkerCluster extends ISelf { |
||||||
|
on(eventName: string, callback: MarkerClusterCallback, component?: any): void; |
||||||
|
setData(list: any[]); |
||||||
|
} |
||||||
|
|
||||||
|
type HtmlRender = (...args) => string | HTMLElement; |
||||||
|
type PixelRender = (...args) => IPixel; |
||||||
|
export interface IRenderClusterMarker { |
||||||
|
getFirstImages(context: any): string; |
||||||
|
contentRender: HtmlRender; |
||||||
|
contentNonRender: HtmlRender; |
||||||
|
pixelRender: PixelRender; |
||||||
|
pixelNonRender: PixelRender; |
||||||
|
} |
||||||
|
|
||||||
|
export class IMarkOptions { |
||||||
|
position?: ILngLat | number[]; |
||||||
|
content?: string; |
||||||
|
offset?: IPixel; |
||||||
|
map?: IMap; |
||||||
|
draggable?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export interface IPixel extends ISelf { |
||||||
|
x:number |
||||||
|
y:number |
||||||
|
getArray():number[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface ILngLat extends ISelf { |
||||||
|
typeName:string |
||||||
|
lng: number |
||||||
|
lat: number |
||||||
|
KL:number |
||||||
|
kT:number |
||||||
|
offset(x: number, y: number):ILngLat |
||||||
|
getArray():number[] |
||||||
|
} |
||||||
|
|
||||||
|
export interface ILayer extends ISelf { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export interface IIconOptions { |
||||||
|
size?: ISize; |
||||||
|
imageSize?: ISize; |
||||||
|
image?: string; |
||||||
|
} |
||||||
|
|
||||||
|
export interface IIcon extends ISelf { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export interface ISize extends ISelf { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
export interface ITileLayer extends ISelf { |
||||||
|
Satellite(); |
||||||
|
RoadNet(); |
||||||
|
} |
||||||
|
|
||||||
|
export interface IDrivingOptions { |
||||||
|
map?: IMap; |
||||||
|
policy?: string |
||||||
|
showTraffic?: boolean |
||||||
|
isOutline?: boolean |
||||||
|
} |
||||||
|
|
||||||
|
export class DrivingSearch { //Driving Search() 数据类型
|
||||||
|
distance: number |
||||||
|
time: number |
||||||
|
tolls_distance: number |
||||||
|
steps: DrivingSearchSteps[] |
||||||
|
routes:any[] //伪代码
|
||||||
|
} |
||||||
|
export class DrivingSearchSteps { //Driving Search() Steps 数据类型
|
||||||
|
instruction:string |
||||||
|
orientation:string |
||||||
|
road: string |
||||||
|
distance: number |
||||||
|
time: number |
||||||
|
tolls_distance: number |
||||||
|
} |
||||||
|
|
||||||
|
type DrivingSearchCallback = (status:string,searchData:DrivingSearch)=>void; |
||||||
|
export interface IDriving extends ISelf { |
||||||
|
clear(); |
||||||
|
search(component: any,posStart: ILngLat, posEnd: ILngLat, callback:DrivingSearchCallback); |
||||||
|
} |
||||||
|
|
||||||
|
export class AutocompleteSearch { //Autocomplete Search() 数据类型
|
||||||
|
info: string |
||||||
|
count: number |
||||||
|
tips: AutocompleteSelect[] |
||||||
|
} |
||||||
|
export class AutocompleteSelect { //GaoDe POI 数据类型
|
||||||
|
id: string |
||||||
|
name: string |
||||||
|
adcode: string |
||||||
|
district: string |
||||||
|
location: ILngLat |
||||||
|
type: string |
||||||
|
poi:{ location: ILngLat } |
||||||
|
} |
||||||
|
|
||||||
|
type AutocompleteSearchCallback = (status:string,searchData:AutocompleteSearch)=>void; |
||||||
|
type AutocompleteSelectCallback = (event:AutocompleteSelect)=>void; |
||||||
|
export interface IAutocomplete extends ISelf { |
||||||
|
search(address: string,callback: AutocompleteSearchCallback) |
||||||
|
on(eventName: string, callback: AutocompleteSelectCallback) |
||||||
|
} |
||||||
|
|
||||||
|
export class PlaceSearchSearch { //PlaceSearch Search() 数据类型
|
||||||
|
info: string |
||||||
|
poiList: PlaceSearchSearchTips |
||||||
|
} |
||||||
|
export class PlaceSearchSearchTips { //PlaceSearch Search() 数据类型
|
||||||
|
pois:AutocompleteSelect[] |
||||||
|
pageIndex:number |
||||||
|
pageSize:number |
||||||
|
count:number |
||||||
|
} |
||||||
|
|
||||||
|
type PlaceSearchCallback = (status:string,searchData:PlaceSearchSearch)=>void; |
||||||
|
export interface IPlaceSearch extends ISelf { |
||||||
|
search(text:string, callback: PlaceSearchCallback); |
||||||
|
} |
||||||
|
|
||||||
|
export interface IMouseTool extends ISelf { |
||||||
|
rule(options:any) |
||||||
|
measureArea(options:any) |
||||||
|
close(isTrue:boolean) |
||||||
|
} |
||||||
|
|
||||||
|
export interface IInfoWindow extends ISelf { |
||||||
|
open(map:IMap); |
||||||
|
listen(html:any, event:string, callback: Function) |
||||||
|
} |
||||||
|
|
||||||
|
export interface ICircle extends ISelf { |
||||||
|
setRadius(num: number); |
||||||
|
setCenter(pos: number[]) |
||||||
|
setMap(map: IMap) |
||||||
|
} |
||||||
Loading…
Reference in new issue