Browse Source

科达封装

上海一张图
陈鹏飞 4 years ago
parent
commit
3c34805c33
  1. 3
      src/modules/map/declare/KeDaSearch/keDaSearch.html
  2. 16
      src/modules/map/declare/KeDaSearch/keDaSearch.scss
  3. 37
      src/modules/map/declare/KeDaSearch/keDaSearch.ts
  4. 12
      src/modules/map/declare/factory.ts
  5. 34
      src/modules/map/declare/gaode-map.ts
  6. 32
      src/modules/map/declare/keda-map.ts
  7. 44
      src/modules/map/declare/map.d.ts

3
src/modules/map/declare/KeDaSearch/keDaSearch.html

@ -0,0 +1,3 @@
<div class="content" [ngStyle]="{'left': left+'px', 'top': top+'px', 'min-width': minWidth+'px'}" *ngIf="searchList.length">
<div *ngFor="let item of searchList" (click)="select(item)" class="item">{{item.name}}</div>
</div>

16
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;
}

37
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)
}
}

12
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;
}
}

34
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;
@ -374,34 +374,40 @@ export class GaodeDriving extends GaodeBasic implements IDriving {
}
}
export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
constructor(city: Object) {
private component:any
constructor(options: any,component: any) {
super();
this.component = component
AMap.plugin('AMap.AutoComplete',()=>{
this.self = new AMap.Autocomplete(city)
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();
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)
})
}
}

32
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) {
}
search(address: string, callback: Function) {
on(eventName: string, callback: AutocompleteSelectCallback) {
}
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.');
}
}

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

@ -109,24 +109,42 @@ export interface IDriving extends ISelf {
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:AutocompleteSearch)=>void;
type AutocompleteSelectCallback = (event:AutocompleteSelect)=>void;
export interface IAutocomplete extends ISelf {
search(address: string,callback: AutocompleteSearchCallback)
on(eventName: string, callback: AutocompleteSelectCallback)
}
type AutoCompleteSearchCallback = (status: string, searchData: { info: string, count: number, tips: AutoCompleteSearchResultDto[] }) => void;
export interface IAutocomplete extends ISelf {
on(eventName: string, callback: Function)
search(address: string, callback: AutoCompleteSearchCallback)
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 {

Loading…
Cancel
Save