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. 82
      src/modules/map/declare/gaode-map.ts
  6. 34
      src/modules/map/declare/keda-map.ts
  7. 88
      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;
}
}

82
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);
})
}

34
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.');
}
}

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

@ -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 {

Loading…
Cancel
Save