From bcf0ec6e1d43091ca1ba42b8463ffab8698a4dcd Mon Sep 17 00:00:00 2001 From: zhaoxu <493734247@qq.com> Date: Fri, 25 Jun 2021 19:44:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A1=86=E4=B8=8B=E6=8B=89?= =?UTF-8?q?=E6=95=B4=E7=90=86..part?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-collection/data-collection.module.ts | 183 +++++++++--------- .../map/declare/KeDaSearch/keDaSearch.ts | 37 ---- .../SearchDownList.html} | 0 .../SearchDownList.scss} | 0 .../SearchDownListPlugins/SearchDownList.ts | 39 ++++ src/modules/map/declare/keda-map.ts | 103 +++++----- 6 files changed, 181 insertions(+), 181 deletions(-) delete mode 100644 src/modules/map/declare/KeDaSearch/keDaSearch.ts rename src/modules/map/declare/{KeDaSearch/keDaSearch.html => component/SearchDownListPlugins/SearchDownList.html} (100%) rename src/modules/map/declare/{KeDaSearch/keDaSearch.scss => component/SearchDownListPlugins/SearchDownList.scss} (100%) create mode 100644 src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts diff --git a/src/app/data-collection/data-collection.module.ts b/src/app/data-collection/data-collection.module.ts index c51c102..a689ae4 100644 --- a/src/app/data-collection/data-collection.module.ts +++ b/src/app/data-collection/data-collection.module.ts @@ -1,104 +1,103 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import {A11yModule} from '@angular/cdk/a11y'; -import {DragDropModule} from '@angular/cdk/drag-drop'; -import {PortalModule} from '@angular/cdk/portal'; -import {ScrollingModule} from '@angular/cdk/scrolling'; -import {CdkStepperModule} from '@angular/cdk/stepper'; -import {CdkTableModule} from '@angular/cdk/table'; -import {CdkTreeModule} from '@angular/cdk/tree'; -import {MatAutocompleteModule} from '@angular/material/autocomplete'; -import {MatBadgeModule} from '@angular/material/badge'; -import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; -import {MatButtonModule} from '@angular/material/button'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material/card'; -import {MatCheckboxModule} from '@angular/material/checkbox'; -import {MatChipsModule} from '@angular/material/chips'; -import {MatStepperModule} from '@angular/material/stepper'; -import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatDialogModule} from '@angular/material/dialog'; -import {MatDividerModule} from '@angular/material/divider'; -import {MatExpansionModule} from '@angular/material/expansion'; -import {MatGridListModule} from '@angular/material/grid-list'; -import {MatIconModule} from '@angular/material/icon'; -import {MatInputModule} from '@angular/material/input'; -import {MatListModule} from '@angular/material/list'; -import {MatMenuModule} from '@angular/material/menu'; -import {MatNativeDateModule, MatRippleModule, MatOption} from '@angular/material/core'; -import {MatPaginatorModule} from '@angular/material/paginator'; -import {MatProgressBarModule} from '@angular/material/progress-bar'; -import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; -import {MatRadioModule} from '@angular/material/radio'; -import {MatSelectModule} from '@angular/material/select'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {MatSliderModule} from '@angular/material/slider'; -import {MatSlideToggleModule} from '@angular/material/slide-toggle'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {MatSortModule} from '@angular/material/sort'; -import {MatTableModule} from '@angular/material/table'; -import {MatTabsModule} from '@angular/material/tabs'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {MatTooltipModule} from '@angular/material/tooltip'; -import {MatTreeModule} from '@angular/material/tree'; +import { A11yModule } from '@angular/cdk/a11y'; +import { DragDropModule } from '@angular/cdk/drag-drop'; +import { PortalModule } from '@angular/cdk/portal'; +import { ScrollingModule } from '@angular/cdk/scrolling'; +import { CdkStepperModule } from '@angular/cdk/stepper'; +import { CdkTableModule } from '@angular/cdk/table'; +import { CdkTreeModule } from '@angular/cdk/tree'; +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatCardModule } from '@angular/material/card'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatChipsModule } from '@angular/material/chips'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatIconModule } from '@angular/material/icon'; +import { MatInputModule } from '@angular/material/input'; +import { MatListModule } from '@angular/material/list'; +import { MatMenuModule } from '@angular/material/menu'; +import { MatNativeDateModule, MatRippleModule, MatOption } from '@angular/material/core'; +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatToolbarModule } from '@angular/material/toolbar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { MatTreeModule } from '@angular/material/tree'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DataCollectionRoutingModule } from './data-collection.routing'; import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component'; import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component'; import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component'; import { NzTreeModule } from 'ng-zorro-antd/tree'; -import { KedaSearchComponent } from '@src/modules/map/declare/KeDaSearch/keDaSearch'; @NgModule({ - declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent,AddWater,AddFireForce,ViewDetails,AddLinkageForce,ViewDetails2,KedaSearchComponent], - imports: [ - CommonModule, - A11yModule, - CdkStepperModule, - CdkTableModule, - CdkTreeModule, - DragDropModule, - MatAutocompleteModule, - MatBadgeModule, - MatBottomSheetModule, - MatButtonModule, - MatButtonToggleModule, - MatCardModule, - MatCheckboxModule, - MatChipsModule, - MatStepperModule, - MatDatepickerModule, - MatDialogModule, - MatDividerModule, - MatExpansionModule, - MatGridListModule, - MatIconModule, - MatInputModule, - MatListModule, - MatMenuModule, - MatNativeDateModule, - MatPaginatorModule, - MatProgressBarModule, - MatProgressSpinnerModule, - MatRadioModule, - MatRippleModule, - MatSelectModule, - MatSidenavModule, - MatSliderModule, - MatSlideToggleModule, - MatSnackBarModule, - MatSortModule, - MatTableModule, - MatTabsModule, - MatToolbarModule, - MatTooltipModule, - MatTreeModule, - PortalModule, - ScrollingModule, - FormsModule, - ReactiveFormsModule, - DataCollectionRoutingModule, - NzTreeModule - ] + declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2], + imports: [ + CommonModule, + A11yModule, + CdkStepperModule, + CdkTableModule, + CdkTreeModule, + DragDropModule, + MatAutocompleteModule, + MatBadgeModule, + MatBottomSheetModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatStepperModule, + MatDatepickerModule, + MatDialogModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatTreeModule, + PortalModule, + ScrollingModule, + FormsModule, + ReactiveFormsModule, + DataCollectionRoutingModule, + NzTreeModule + ] }) export class DataCollectionModule { } diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.ts b/src/modules/map/declare/KeDaSearch/keDaSearch.ts deleted file mode 100644 index e7676e6..0000000 --- a/src/modules/map/declare/KeDaSearch/keDaSearch.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { Component, OnInit, Inject } from '@angular/core'; -import { AutocompleteSelect } from '../map'; - - - -@Component({ - selector: 'keDa-Search', - templateUrl: './keDaSearch.html', - styleUrls: ['./keDaSearch.scss'] -}) -export class KedaSearchComponent { - - constructor() { } - static instance: KedaSearchComponent - public searchList:AutocompleteSelect[] = []; //list - public leftCss:string = '0px'; - public topCss:string = '0px'; - public minWidthCss:string = '0px'; - - ngOnInit(): void { - KedaSearchComponent.instance = this - } - - // input 添加监听事件 - addDOMEvent (id:string) { - let input = document.getElementById(id) - let DOM = input.getBoundingClientRect() - // this.left = DOM.left - // this.top = DOM.top + DOM.height + 2 - // this.minWidth = DOM.width - } - - select(e) { - console.log(e) - } - -} \ No newline at end of file diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.html b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html similarity index 100% rename from src/modules/map/declare/KeDaSearch/keDaSearch.html rename to src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.scss b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss similarity index 100% rename from src/modules/map/declare/KeDaSearch/keDaSearch.scss rename to src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss diff --git a/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts new file mode 100644 index 0000000..af60ff0 --- /dev/null +++ b/src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts @@ -0,0 +1,39 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { AutocompleteSelect } from '../../map'; + + +@Component({ + selector: 'SearchDownList', + templateUrl: './SearchDownList.html', + styleUrls: ['./SearchDownList.scss'] +}) +export class SearchDownList implements OnInit { + private $input; + constructor(inputListenId: string) { + this.$input = document.getElementById(inputListenId); + } + public searchList: AutocompleteSelect[] = []; //list + public leftCss: string = '0px'; + public topCss: string = '0px'; + public minWidthCss: string = '0px'; + + ngOnInit(): void { + } + + // input 添加监听事件 + addDOMEvent() { + let input = document.getElementById(id) + let DOM = input.getBoundingClientRect() + // this.left = DOM.left + // this.top = DOM.top + DOM.height + 2 + // this.minWidth = DOM.width + } + + select(e) { + console.log(e) + } + + watch() { + //TODO:修改leftCss ,topCss + } +} \ No newline at end of file diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index e5dcaa9..1c4b918 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -1,15 +1,14 @@ import { AutocompleteSearchCallback, AutocompleteSelectCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, PlaceSearchCallback } from './map' import * as ObjectID from 'bson-objectid'; -import { KedaSearchComponent } from './KeDaSearch/keDaSearch'; 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"; //当前城市 行政编码 +const cityPosition: number[] = [121.469167918, 31.232262275]; //上海市 坐标 +const beforCity: string = "上海市"; //当前城市 +const cityCode: string = "310000"; //当前城市 行政编码 export class KeDaMap extends KedaBasic implements IMap { constructor(container: string, options: IMapOptions) { //地图初始化 @@ -19,7 +18,7 @@ export class KeDaMap extends KedaBasic implements IMap { opt.configUrl = "/assets/kmap/Kmap.config.json"; opt.targetCoordinateType = "WGS84"; opt.center = cityPosition; - opt.zoom === undefined? opt.zoom = 9 : opt.zoom = opt.zoom - 2 + opt.zoom === undefined ? opt.zoom = 9 : opt.zoom = opt.zoom - 2 let mapLayer = function () { if (opt.viewMode && opt.viewMode == "3D") { let data = { @@ -44,9 +43,9 @@ export class KeDaMap extends KedaBasic implements IMap { containerToLngLat(e: IPixel): ILngLat { let d = null; this.self.getGeoPointByPixel({ - ePoint:e.self, - callback:(e)=>{ - d = new KeDaLngLat(e.data.lng,e.data.lat); + ePoint: e.self, + callback: (e) => { + d = new KeDaLngLat(e.data.lng, e.data.lat); } }) return d; @@ -63,7 +62,7 @@ export class KeDaMap extends KedaBasic implements IMap { startPoint: a, endPoint: b, units: "meters", - callback: (res)=>{ num = res.data } + callback: (res) => { num = res.data } }) return num } @@ -76,7 +75,7 @@ export class KeDaMap extends KedaBasic implements IMap { getBounds() { let bounds this.self.getBounds({ - callback: (res)=>{ + callback: (res) => { bounds = res.data console.log(res.data) } @@ -84,7 +83,7 @@ export class KeDaMap extends KedaBasic implements IMap { return bounds } add(obj: any) { - if(obj && obj.typeName === "KeDaMarker"){ + if (obj && obj.typeName === "KeDaMarker") { let _marker = (obj as KeDaMarker); _marker.map = this; this.self.addMarkers(_marker.self) @@ -95,7 +94,7 @@ export class KeDaMap extends KedaBasic implements IMap { } } remove(obj: any) { - if(obj && obj.typeName === "KeDaMarker"){ + if (obj && obj.typeName === "KeDaMarker") { this.self.removeMarkersByType({ markerType: obj.id }) } else if (obj && obj.typeName === "KeDaInfoWindow") { this.self.removeAllPopups() @@ -173,15 +172,15 @@ export class KeDaPixel extends KedaBasic implements IPixel { this.self = [x, y]; } getArray(): number[] { - return this. self; + return this.self; } x: number; y: number; } export class KeDaMarker extends KedaBasic implements IMarker { - public map:KeDaMap; - public typeName:string = "KeDaMarker"; + public map: KeDaMap; + public typeName: string = "KeDaMarker"; constructor(options: IMarkOptions) { super(); let pos = [] @@ -197,9 +196,9 @@ export class KeDaMarker extends KedaBasic implements IMarker { let marker = { data: points, url: '/assets/images/dingwei.png', - offset: options.offset? options.offset.self : null, + offset: options.offset ? options.offset.self : null, markerType: "KedaMarker", - ended: (res) => {this.id = res.data;} + ended: (res) => { this.id = res.data; } }; this.self = marker; this._position = pos @@ -213,8 +212,8 @@ export class KeDaMarker extends KedaBasic implements IMarker { this.map.self.setMarkerProperty({ type: "markerType", markerType: "KedaMarker", - points:[ - {htmlText:html} + points: [ + { htmlText: html } ] }) } @@ -222,7 +221,7 @@ export class KeDaMarker extends KedaBasic implements IMarker { this.map.self.setMarkerProperty({ type: "markerType", markerType: "KedaMarker", - points:[position] + points: [position] }) } setMap() { @@ -234,17 +233,17 @@ export class KeDaMarker extends KedaBasic implements IMarker { set id(str: string) { this.self.id = str } - public bindObj=[]; // event + public bindObj = []; // event on(eventName: string, callback: Function): void { this.bindObj.push({ - eventName:eventName, - callback:callback, + eventName: eventName, + callback: callback, }); this.startBindEvent(); } - startBindEvent(){ - if(this.map!==undefined){ - this.bindObj.forEach((item,index)=>{ + startBindEvent() { + if (this.map !== undefined) { + this.bindObj.forEach((item, index) => { this.map.self.addEventOnMarkers({ selector: `.${this.id}`, event: item.eventName, @@ -252,7 +251,7 @@ export class KeDaMarker extends KedaBasic implements IMarker { }); }) this.bindObj = []; - } + } } } @@ -263,44 +262,44 @@ export class KeDaLngLat extends KedaBasic implements ILngLat { 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); + 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"; + typeName = "LngLat"; lng: number; lat: number; - get KL():number{ + get KL(): number { return this.lng; } - get kT():number{ + get kT(): number { return this.lat; } getArray(): number[] { - return [this.lng,this.lat]; + return [this.lng, this.lat]; } } export class KedaDriving extends KedaBasic implements IDriving { //路线导航 - public map:KeDaMap; - public policy:number; // 0:快捷模式, 4:躲避拥堵 - public id:string; + public map: KeDaMap; + public policy: number; // 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 + options.policy === undefined ? this.policy = 0 : this.policy = options.policy } clear() { - this.map.self.removeRoutePlanning({ id:this.id }) + this.map.self.removeRoutePlanning({ id: this.id }) } search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) { let params = { startPoint: posStart.getArray(), endPoint: posEnd.getArray(), - error: ()=>{ alert('路线规划失败！') }, - ended: (res)=>{ this.id = res.data } + error: () => { alert('路线规划失败！') }, + ended: (res) => { this.id = res.data } } if (this.policy === 0) { //快捷模式 this.map.self.createMinDistanceRoutePlanning(params) @@ -312,11 +311,11 @@ export class KedaDriving extends KedaBasic implements IDriving { //路线导航 export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索 private component: any - constructor(options: any,component: any) { + constructor(options: any, component: any) { super(); this.component = component if (options && options.input != undefined) { //绑定input框搜索事件 - KedaSearchComponent.instance.addDOMEvent(options.input) + //KedaSearchComponent.instance.addDOMEvent(options.input) } } on(eventName: string, callback: AutocompleteSelectCallback) { @@ -327,7 +326,7 @@ export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Aut code: cityCode, keyword: address, searchType: [], - callback: (res)=>{ + callback: (res) => { console.log(res) } }) @@ -346,8 +345,8 @@ export class KedaPlaceSearch extends KedaBasic implements IPlaceSearch { //Place } export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层 - public typeName:string = "KeDaCircle"; - public id:string; + public typeName: string = "KeDaCircle"; + public id: string; constructor(options: any) { super(); let circle = { @@ -372,8 +371,8 @@ export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层 }, radius: 0, draggable: false, - updateHandler: (res)=>{ console.log(res) }, - end: (res)=>{ this.id = res } + updateHandler: (res) => { console.log(res) }, + end: (res) => { this.id = res } } this.self = circle } @@ -414,7 +413,7 @@ export class KedaRenderClusterMarkerr extends KedaBasic implements IRenderCluste } export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息窗体 - public typeName:string = "KeDaInfoWindow"; + public typeName: string = "KeDaInfoWindow"; constructor(options) { super(); let opt = { @@ -429,7 +428,7 @@ export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息 map.self.addPopup(this.self); } listen(html: any, event: string, callback: Function) { - html.addEventListener(event,callback) + html.addEventListener(event, callback) } }