42 changed files with 7494 additions and 5356 deletions
@ -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(); |
||||
} |
||||
|
||||
} |
||||
@ -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