From 60c72961f2f1b9285dbd6537ef02be03895fba9b Mon Sep 17 00:00:00 2001 From: anxinCPF <1105965053@qq.com> Date: Thu, 24 Jun 2021 09:22:05 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A7=91=E8=BE=BE=E5=9C=B0=E5=9B=BE=E5=BC=80?= =?UTF-8?q?=E5=8F=91=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/modules/map/declare/factory.ts | 4 +- src/modules/map/declare/gaode-map.ts | 36 ++- src/modules/map/declare/keda-map.ts | 331 ++++++++++++++++++++++++--- src/modules/map/declare/map.d.ts | 18 +- 4 files changed, 338 insertions(+), 51 deletions(-) diff --git a/src/modules/map/declare/factory.ts b/src/modules/map/declare/factory.ts index a5e1311..476410a 100644 --- a/src/modules/map/declare/factory.ts +++ b/src/modules/map/declare/factory.ts @@ -2,7 +2,7 @@ const mapSupplier: number = 2; // 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 { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel, KedaTileLayer } from './keda-map'; +import { KedaInfoWindow, KeDaLngLat, KeDaMap, KeDaMarker, KedaMouseTool, KeDaPixel, KedaTileLayer } from './keda-map'; import MapTools from './map-tools'; export class MapFactory { @@ -98,6 +98,7 @@ export class MapFactory { public static MouseToolInstance(map: IMap): IMouseTool { switch (mapSupplier) { case 1: return new GaodeMouseTool(map); + case 2: return new KedaMouseTool(map); default: return null; } } @@ -105,6 +106,7 @@ export class MapFactory { public static InfoWindowInstance(options: any): IInfoWindow { switch (mapSupplier) { case 1: return new GaodeInfoWindow(options); + case 2: return new KedaInfoWindow(options); default: return null; } } diff --git a/src/modules/map/declare/gaode-map.ts b/src/modules/map/declare/gaode-map.ts index 0dfea5f..b94a241 100644 --- a/src/modules/map/declare/gaode-map.ts +++ b/src/modules/map/declare/gaode-map.ts @@ -65,10 +65,9 @@ export class GaoDeMap extends GaodeBasic implements IMap { setCenter(pos: any) { return this.self.setCenter(pos) } - getCenter() { + getCenter():ILngLat { let d = this.self.getCenter(); - let res = new GaoDeLngLat(d.lng,d.lat); - return res; + return new GaoDeLngLat(0,0,d); } getZoom() { return this.self.getZoom(); @@ -240,8 +239,16 @@ export class GaoDeMap extends GaodeBasic implements IMap { 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 { @@ -254,7 +261,8 @@ export class GaoDeMarker extends GaodeBasic implements IMarker { setContent(html: string) { return this.self.setContent(html) } - setPosition(x: number[]) { + setPosition(x: ILngLat|number[]) { + x = (x as ILngLat).getArray == undefined ? x:(x as ILngLat).getArray(); return this.self.setPosition(x) } _position: number[] @@ -290,9 +298,23 @@ export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster { } export class GaoDeLngLat extends GaodeBasic implements ILngLat { - constructor(x: number, y: number) { + constructor(x: number, y: number,me?:any) { super(); - this.self = new AMap.LngLat(x, y); + 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; @@ -300,7 +322,7 @@ export class GaoDeLngLat extends GaodeBasic implements ILngLat { get lat(): number { return this.self.lat; } - offset(x: number, y: number) { + offset(x: number, y: number):ILngLat { return this.self.offset(x, y) } } diff --git a/src/modules/map/declare/keda-map.ts b/src/modules/map/declare/keda-map.ts index a1d57ae..89cc443 100644 --- a/src/modules/map/declare/keda-map.ts +++ b/src/modules/map/declare/keda-map.ts @@ -1,4 +1,5 @@ -import { ILngLat, IMap, IMapOptions, IMarker, IPixel, ISelf, ITileLayer } from './map' +import { IInfoWindow, ILngLat, IMap, IMapOptions, IMarker, IMarkOptions, IMouseTool, IPixel, ISelf, ITileLayer } from './map' +import * as ObjectID from 'bson-objectid'; declare var KMap: any; class KedaBasic implements ISelf { @@ -14,7 +15,7 @@ export class KeDaMap extends KedaBasic implements IMap { opt.configUrl = "/assets/kmap/Kmap.config.json"; opt.targetCoordinateType = "WGS84"; let mapLayer = function () { - if (opt.viewMode && opt.viewMode=="3D") { + if (opt.viewMode && opt.viewMode == "3D") { let data = { type: 'FeatureCollection', features: [ @@ -24,16 +25,26 @@ export class KeDaMap extends KedaBasic implements IMap { type: 'Point', coordinates: [121.495126354, 31.241993148] }, - properties: {height: 30} + properties: { height: 30 } } ] }; - that.self.add3DLayer({data: data}); + that.self.add3DLayer({ data: data }); } } 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(conponent: any, getData?: Function, setData?: Function) { //自定义 行政区划 样式 throw new Error('Method not implemented.'); } @@ -43,9 +54,7 @@ export class KeDaMap extends KedaBasic implements IMap { setFitView(options: any) { throw new Error('Method not implemented.'); } - containerToLngLat(e: any) { - throw new Error('Method not implemented.'); - } + clearMap() { throw new Error('Method not implemented.'); } @@ -56,7 +65,10 @@ export class KeDaMap extends KedaBasic implements IMap { throw new Error('Method not implemented.'); } setZoomAndCenter(zoom: number, pos: number[]) { - throw new Error('Method not implemented.'); + this.self.flyTo({ + zoom: zoom, + point: pos, + }); } plugin(eventName: string[], callback: Function) { throw new Error('Method not implemented.'); @@ -65,38 +77,57 @@ export class KeDaMap extends KedaBasic implements IMap { throw new Error('Method not implemented.'); } add(obj: any) { - throw new Error('Method not implemented.'); + if(obj && obj.typeName === "KeDaMarker"){ + let _marker = (obj as KeDaMarker); + _marker.map = this; + _marker.startBindEvent(); + } + if (obj == "卫星图层") { + this.self.setImageLayer({ display: true }) + } else if (obj == "路网图层") { + this.self.setMapStyle({ solution: '8888' }); + } } remove(obj: any) { - throw new Error('Method not implemented.'); + if (obj == "卫星图层") { + this.self.setImageLayer({ display: false }) + } else if (obj == "路网图层") { + this.self.setMapStyle({ solution: '9999' }); + } } setCity(city: string) { let that = this if (city.includes("上海")) { - window.setTimeout(function(){ + window.setTimeout(function () { that.self.flyTo({ - zoom:9, - point:[121.495126354, 31.241993148] + zoom: 9, + point: [121.495126354, 31.241993148] }); - },10000) + }, 10000) } } - setZoom(zoom:number) { + setZoom(zoom: number) { this.self.zoomTo({ - zoom:zoom - }); + zoom: zoom + }); } - getZoom():number { + getZoom(): number { let num this.self.getZoom({ - callback:(e)=>{ + callback: (e) => { num = e.data; } }) return num } - setCenter(pos: number[]) { - this.self.flyTo({point:pos}) + setCenter(pos: number[] | ILngLat) { + let position = [] + if (pos instanceof Array) { + position = pos + } else { + position = [pos.lng, pos.lat]; + } + this.self.flyTo({ point: position }) } getCenter() { let center @@ -118,64 +149,290 @@ export class KeDaMap extends KedaBasic implements IMap { 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 { - constructor(options: any) { + public map:KeDaMap; + public typeName:string = "KeDaMarker"; + constructor(options: IMarkOptions) { super(); + let pos = [] + if (options.position instanceof Array) { + pos = options.position + } else { + pos = options.position.getArray() + } let d = { - offset: options.offset, - element: options.content + url: '/assets/images/dingwei.png', + point: pos, + offset: options.offset? options.offset.self : null, + ended: (res) => {this.id = res.data;} }; this.self = d; + this._position = pos + if (options.map) { + this.map = options.map as KeDaMap + this.map.self.addMarker(this.self); + } } + _position: number[]; setContent(html: string) { throw new Error('Method not implemented.'); } setPosition(x: number[]) { throw new Error('Method not implemented.'); } - _position: number[]; setMap() { throw new Error('Method not implemented.'); } get id(): string { - throw new Error('Method not implemented.'); + return this.self.id } set id(str: string) { - throw new Error('Method not implemented.'); + this.self.id = str } + + public bindObj=[]; // event on(eventName: string, callback: Function): void { - throw new Error('Method not implemented.'); + this.bindObj.push({ + eventName:eventName, + callback:callback, + }); + this.startBindEvent(); + } + startBindEvent(){ + if(this.map!==undefined){ + this.bindObj.forEach((item,index)=>{ + this.map.self.addEventOnMarkers({ + selector: `#${this.id}`, + event: item.eventName, + handler: item.callback, + }); + }) + this.bindObj = []; + } } } export class KeDaLngLat extends KedaBasic implements ILngLat { - constructor(x: number, y: number) { + constructor(lng: number, lat: number) { super(); - this.self = new KMap.LngLat(x, y); + 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; - offset(x: number, y: number) { - throw new Error('Method not implemented.'); + get KL():number{ + return this.lng; + } + get kT():number{ + return this.lat; + } + getArray(): number[] { + return [this.lng,this.lat]; + } +} + +export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息窗体 + constructor(options) { + super(); + let opt = { + htmlText: options.content, + 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 KedaTileLayer extends KedaBasic implements ITileLayer { +export class KedaTileLayer extends KedaBasic implements ITileLayer { //图层切换 constructor() { super(); } - Satellite() { - return this + Satellite() { //卫星图层 + return "卫星图层" + } + RoadNet() { //路网图层 + return "路网图层" + } +} + +export class KedaMouseTool extends KedaBasic implements IMouseTool { //地图工具 + constructor(map: IMap) { + super(); + this.self = map.self } - RoadNet() { - return this + 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) { + console.log(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) { + console.log(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) { + console.log(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) { + console.log(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) { + console.log(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 = []; + } } } \ No newline at end of file diff --git a/src/modules/map/declare/map.d.ts b/src/modules/map/declare/map.d.ts index 971e225..346fb9c 100644 --- a/src/modules/map/declare/map.d.ts +++ b/src/modules/map/declare/map.d.ts @@ -8,10 +8,10 @@ export interface IMap extends ISelf { //异步加载插件，插件完成的callback //pluginName:要加载的插件名 plugin(pluginName: string[], callback: Function); - add(obj: IMarker|any); - remove(obj: any); + add(obj: IMarker|ITileLayer|any); + remove(obj: IMarker|ITileLayer|any); clearMap(); - containerToLngLat(e:any); + containerToLngLat(e:IPixel): ILngLat; //地图容器像素坐标转经纬度 setFitView(options:any); setBounds(zoom?:any, x?:any, y?:any, is?:boolean); setCity(city: string); @@ -35,7 +35,7 @@ export interface IMarker extends ISelf { id: string; _position:number[]; on(eventName: string, callback: Function); - setPosition(x:number[]) + setPosition(x:ILngLat|number[]) setContent(html:string) setMap(); } @@ -63,13 +63,19 @@ export class IMarkOptions { } export interface IPixel extends ISelf { - + x:number + y:number + getArray():number[] } export interface ILngLat extends ISelf { + typeName:string lng: number lat: number - offset(x: number, y: number) + KL:number + kT:number + offset(x: number, y: number):ILngLat + getArray():number[] } export interface ILayer extends ISelf {