From 3c34805c3348731460b4745811fc243207ad4a88 Mon Sep 17 00:00:00 2001 From: anxinCPF <1105965053@qq.com> Date: Fri, 25 Jun 2021 16:34:10 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=91=E8=BE=BE=E5=B0=81=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../map/declare/KeDaSearch/keDaSearch.html | 3 + .../map/declare/KeDaSearch/keDaSearch.scss | 16 ++++ .../map/declare/KeDaSearch/keDaSearch.ts | 37 ++++++++ src/modules/map/declare/factory.ts | 12 +-- src/modules/map/declare/gaode-map.ts | 82 +++++++++-------- src/modules/map/declare/keda-map.ts | 34 ++++--- src/modules/map/declare/map.d.ts | 88 +++++++++++-------- 7 files changed, 183 insertions(+), 89 deletions(-) create mode 100644 src/modules/map/declare/KeDaSearch/keDaSearch.html create mode 100644 src/modules/map/declare/KeDaSearch/keDaSearch.scss create mode 100644 src/modules/map/declare/KeDaSearch/keDaSearch.ts diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.html b/src/modules/map/declare/KeDaSearch/keDaSearch.html new file mode 100644 index 0000000..30bf74b --- /dev/null +++ b/src/modules/map/declare/KeDaSearch/keDaSearch.html @@ -0,0 +1,3 @@ +
+
{{item.name}}
+
\ No newline at end of file diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.scss b/src/modules/map/declare/KeDaSearch/keDaSearch.scss new file mode 100644 index 0000000..1fae778 --- /dev/null +++ b/src/modules/map/declare/KeDaSearch/keDaSearch.scss @@ -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: #007aff; +} \ No newline at end of file diff --git a/src/modules/map/declare/KeDaSearch/keDaSearch.ts b/src/modules/map/declare/KeDaSearch/keDaSearch.ts new file mode 100644 index 0000000..c1ea893 --- /dev/null +++ b/src/modules/map/declare/KeDaSearch/keDaSearch.ts @@ -0,0 +1,37 @@ +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 left:number = 0 + public top:number = 0 + public minWidth:number = 0 + + 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/factory.ts b/src/modules/map/declare/factory.ts index 4177652..d0b103c 100644 --- a/src/modules/map/declare/factory.ts +++ b/src/modules/map/declare/factory.ts @@ -84,18 +84,18 @@ export class MapFactory { } } - public static AutocompleteInstance(city: Object): IAutocomplete { + public static AutocompleteInstance(options: any,component: any): IAutocomplete { switch (mapSupplier) { - case 1: return new GaodeAutocomplete(city); - case 2: return new KedaAutocomplete(city); + case 1: return new GaodeAutocomplete(options,component); + case 2: return new KedaAutocomplete(options,component); default: return null; } } - public static PlaceSearchInstance(): IPlaceSearch { + public static PlaceSearchInstance(component: any): IPlaceSearch { switch (mapSupplier) { - case 1: return new GaodePlaceSearch(); - case 2: return new KedaPlaceSearch(); + case 1: return new GaodePlaceSearch(component); + case 2: return new KedaPlaceSearch(component); default: return null; } } diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index 655b60b..6b5da0c 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -1,4 +1,4 @@ -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, AutoCompleteSearchResultDto } from './map' +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 } from './map' import MapTools from './map-tools'; declare var AMap: any; declare var AMapUI: any; @@ -10,13 +10,13 @@ class GaodeBasic implements ISelf { export class GaoDeMap extends GaodeBasic implements IMap { /// plugins:同步加载插件 - constructor(container: string, options: IMapOptions, plugins?: string[]) { + constructor(container: string, options: IMapOptions,plugins?:string[]) { super(); this.self = new AMap.Map(container, options); - if (!!plugins && plugins.length) { - for (var i in plugins) { + if(!!plugins && plugins.length){ + for(var i in plugins){ let name = plugins[i]; - if (name.indexOf('AMap.') == -1) continue; + if(name.indexOf('AMap.')==-1)continue; let pObj = eval(`new ${plugins[i]}()`); this.self.plugin(pObj); } @@ -38,7 +38,7 @@ export class GaoDeMap extends GaodeBasic implements IMap { return this.self.setZoomAndCenter(zoom, pos) } plugin(pluginNames: string[], callback: Function) { - let names = pluginNames.filter(s => s.indexOf("AMap.") == 0); + let names = pluginNames.filter(s=>s.indexOf("AMap.")==0); return this.self.plugin(names, callback) } getBounds() { @@ -59,9 +59,9 @@ export class GaoDeMap extends GaodeBasic implements IMap { setCenter(pos: any) { return this.self.setCenter(pos) } - getCenter(): ILngLat { + getCenter():ILngLat { let d = this.self.getCenter(); - return new GaoDeLngLat(0, 0, d); + return new GaoDeLngLat(0,0,d); } getZoom() { return this.self.getZoom(); @@ -238,9 +238,9 @@ export class GaoDePixel extends GaodeBasic implements IPixel { this.self = new AMap.Pixel(x, y); } getArray(): number[] { - return [this.x, this.y]; + return [this.x,this.y]; } - + x: number; y: number; } @@ -255,8 +255,8 @@ export class GaoDeMarker extends GaodeBasic implements IMarker { setContent(html: string) { return this.self.setContent(html) } - setPosition(x: ILngLat | number[]) { - x = (x as ILngLat).getArray == undefined ? x : (x as ILngLat).getArray(); + setPosition(x: ILngLat|number[]) { + x = (x as ILngLat).getArray == undefined ? x:(x as ILngLat).getArray(); return this.self.setPosition(x) } _position: number[] @@ -279,7 +279,7 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { super(); let conf = MapTools.ExplicitConvert(options); - AMap.plugin('AMap.MarkerClusterer', () => { + AMap.plugin('AMap.MarkerClusterer',()=>{ this.self = new AMap.MarkerCluster(map.self, list, conf) }); } @@ -292,23 +292,23 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { } export class GaoDeLngLat extends GaodeBasic implements ILngLat { - constructor(x: number, y: number, me?: any) { + constructor(x: number, y: number,me?:any) { super(); - if (me == undefined) + if(me==undefined) this.self = new AMap.LngLat(x, y); else this.self = me; } - typeName = "LngLat"; - get KL(): number { + typeName="LngLat"; + 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]; } get lng(): number { return this.self.lng; @@ -316,7 +316,7 @@ export class GaoDeLngLat extends GaodeBasic implements ILngLat { get lat(): number { return this.self.lat; } - offset(x: number, y: number): ILngLat { + offset(x: number, y: number):ILngLat { return this.self.offset(x, y) } } @@ -362,53 +362,59 @@ export class GaodeDriving extends GaodeBasic implements IDriving { constructor(options: IDrivingOptions) { super(); options.map = options.map.self - AMap.plugin('AMap.Driving', () => { + AMap.plugin('AMap.Driving',()=>{ this.self = new AMap.Driving(options) }) } search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) { - return this.self.search(posStart.getArray(), posEnd.getArray(), callback) + return this.self.search(posStart.getArray(),posEnd.getArray(),callback) } clear() { return this.self.clear() } } - - export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete { - constructor(city: Object) { + private component:any + constructor(options: any,component: any) { super(); - AMap.plugin('AMap.AutoComplete', () => { - this.self = new AMap.Autocomplete(city) + this.component = component + AMap.plugin('AMap.AutoComplete',()=>{ + this.self = new AMap.Autocomplete(options) }) } - search(address: string, callback: AutoCompleteSearchCallback) { - return this.self.search(address, (status, result) => { - callback(result.tips as AutoCompleteSearchResultDto[]); - }); + on(eventName: string, callback: AutocompleteSelectCallback) { + return this.self.on(eventName, (event)=>{ + callback.call(this.component,event) + }) } - on(eventName: string, callback: Function) { - return this.self.on(eventName, callback) + search(address: string, callback: AutocompleteSearchCallback) { + return this.self.search(address,(status,result)=>{ + callback.call(this.component,status,result) + }) } } export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch { - constructor() { + private component:any + constructor(component: any) { super(); - AMap.plugin('AMap.PlaceSearch', () => { + this.component = component + AMap.plugin('AMap.PlaceSearch',()=>{ this.self = new AMap.PlaceSearch() }) } - search(text: string, callback: Function) { - return this.self.search(text, callback) + 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"], () => { + AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],()=>{ this.self = new AMap.MouseTool(map.self); }) } diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index b50696c..92783a5 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -1,5 +1,6 @@ -import { HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, SearchRender } from './map' +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 { @@ -310,24 +311,37 @@ export class KedaDriving extends KedaBasic implements IDriving { //路线导航 } export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索 - constructor(options: any) { + private component: any + constructor(options: any,component: any) { super(); + this.component = component + if (options && options.input != undefined) { //绑定input框搜索事件 + KedaSearchComponent.instance.addDOMEvent(options.input) + } } - searchRender:SearchRender - on(eventName: string, callback: Function) { - + on(eventName: string, callback: AutocompleteSelectCallback) { + } - search(address: string, callback: Function) { - + search(address: string, callback: AutocompleteSearchCallback) { + (this.component.map as KeDaMap).self.queryInfoByType({ + code: cityCode, + keyword: address, + searchType: [], + callback: (res)=>{ + console.log(res) + } + }) } } export class KedaPlaceSearch extends KedaBasic implements IPlaceSearch { //PlaceSearch 关键字搜索 - constructor() { + private component: any + constructor(component: any) { super(); + this.component = component } - search(text: string, callback: Function) { - + search(text: string, callback: PlaceSearchCallback) { + throw new Error('Method not implemented.'); } } diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 600db6a..1aaa010 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -5,20 +5,20 @@ export interface ISelf { export interface IMap extends ISelf { on(eventName: string, callback: Function); - add(obj: IMarker | ITileLayer | any); - remove(obj: IMarker | ITileLayer | any); + add(obj: IMarker|ITileLayer|any); + remove(obj: IMarker|ITileLayer|any); clearMap(); - containerToLngLat(e: IPixel): ILngLat; //地图容器像素坐标转经纬度 + 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); + setCenter(pos: number[]|ILngLat); getCenter(): ILngLat; getBounds(): any; - distance(a: number[], b: number[]): any; - setAdministrativeAreaStyle(conponent: any, getData?: Function, setData?: Function): any; //自定义 行政区划 样式 + distance(a:number[],b:number[]): any; + setAdministrativeAreaStyle(conponent:any,getData?:Function,setData?:Function): any; //自定义 行政区划 样式 } export interface IMapOptions { @@ -28,10 +28,10 @@ export interface IMapOptions { export interface IMarker extends ISelf { id: string; - _position: number[]; + _position:number[]; on(eventName: string, callback: Function); - setPosition(x: ILngLat | number[]) - setContent(html: string) + setPosition(x:ILngLat|number[]) + setContent(html:string) setMap(); } @@ -59,19 +59,19 @@ export class IMarkOptions { } export interface IPixel extends ISelf { - x: number - y: number - getArray(): number[] + x:number + y:number + getArray():number[] } export interface ILngLat extends ISelf { - typeName: string + typeName:string lng: number lat: number - KL: number - kT: number - offset(x: number, y: number): ILngLat - getArray(): number[] + KL:number + kT:number + offset(x: number, y: number):ILngLat + getArray():number[] } export interface ILayer extends ISelf { @@ -106,38 +106,56 @@ export interface IDrivingOptions { export interface IDriving extends ISelf { clear(); - search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function); + search(posStart?: ILngLat, posEnd?: ILngLat, callback?:Function); } - -export class AutoCompleteSearchResultDto { - name: string;//名称 - district: string;//所属区域 - adcode: string;//区域编码 - location: ILngLat; +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: { info: string, count: number, tips: AutoCompleteSearchResultDto[] }) => void; - +type AutocompleteSearchCallback = (status:string,searchData:AutocompleteSearch)=>void; +type AutocompleteSelectCallback = (event:AutocompleteSelect)=>void; export interface IAutocomplete extends ISelf { - on(eventName: string, callback: Function) - search(address: string, callback: AutoCompleteSearchCallback) + 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 SearchRender = (...args) => any[]; +type PlaceSearchCallback = (status:string,searchData:PlaceSearchSearch)=>void; export interface IPlaceSearch extends ISelf { - search(text: string, callback: Function); + search(text:string, callback: PlaceSearchCallback); } export interface IMouseTool extends ISelf { - rule(options: any) - measureArea(options: any) - close(isTrue: boolean) + rule(options:any) + measureArea(options:any) + close(isTrue:boolean) } export interface IInfoWindow extends ISelf { - open(map: IMap); - listen(html: any, event: string, callback: Function) + open(map:IMap); + listen(html:any, event:string, callback: Function) } export interface ICircle extends ISelf {