From b5c6b97395f992accfc5fb0a9331637c9117979e Mon Sep 17 00:00:00 2001 From: Artem Halushko Date: Fri, 28 Feb 2020 13:48:23 +0200 Subject: [PATCH] add tencent map --- .../components/widget/lib/maps/leaflet-map.ts | 39 ++++++++++--------- .../components/widget/lib/maps/map-widget2.ts | 22 +++++++---- .../widget/lib/maps/providers/index.ts | 2 + .../lib/maps/providers/openstreet-map.ts | 15 +++++++ .../widget/lib/maps/providers/tencent-map.ts | 16 ++++++++ 5 files changed, 68 insertions(+), 26 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 3ba6057a20..26b1cecd81 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -12,39 +12,40 @@ export default class LeafletMap { markers = []; tooltips = []; map: L.Map; + options; isMarketCluster; constructor($container, options: MapOptions) { - this.isMarketCluster = options.markerClusteringSetting?.isMarketCluster; - // defaultCenterPosition = options.defaultCenterPosition || [0, 0]; - this.map = L.map($container).setView(options.defaultCenterPosition, options.defaultZoomLevel || 8); + this.options = options; + } - if (options.disableScrollZooming) { + public initSettings(options: MapOptions) { + const { initCallback, + defaultZoomLevel, + dontFitMapBounds, + disableScrollZooming, + minZoomLevel, + mapProvider, + credentials, + defaultCenterPosition, + markerClusteringSetting }: MapOptions = options; + if (disableScrollZooming) { this.map.scrollWheelZoom.disable(); } - let credetials = { - app_id: "AhM6TzD9ThyK78CT3ptx", - app_code: "p6NPiITB3Vv0GMUFnkLOOg" - } - var tileLayer = (L.tileLayer as any).provider("OpenStreetMap.Mapnik", credetials); - tileLayer.addTo(this.map); - - /* if (this.isMarketCluster) { - this.markersCluster = L.markerClusterGroup(options.markerClusteringSetting); - this.map.addLayer(this.markersCluster); - }*/ - - if (options.initCallback) { - setTimeout(options.initCallback, 0); //eslint-disable-line + if (initCallback) { + setTimeout(options.initCallback, 0); } - } inited() { return !!this.map; } + public setMap(map: L.Map) { + this.map = map; + } + getContainer() { return /* this.isMarketCluster ? this.markersCluster :*/ this.map; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index 3cffeab740..87824991c3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -3,11 +3,16 @@ import LeafletMap from './leaflet-map'; import { deepClone } from '@core/utils'; import { openstreetMapSettingsSchema, googleMapSettingsSchema, imageMapSettingsSchema, tencentMapSettingsSchema, hereMapSettingsSchema, commonMapSettingsSchema, routeMapSettingsSchema, markerClusteringSettingsSchema, markerClusteringSettingsSchemaGoogle, markerClusteringSettingsSchemaLeaflet } from './schemes'; import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; +import { OpenStreetMap, TencentMap } from './providers'; const providerSets = { - openstreet: { - constructor: LeafletMap, + 'openstreet-map': { + MapClass: OpenStreetMap, schema: openstreetMapSettingsSchema + }, + 'tencent-map': { + MapClass: TencentMap, + schema: tencentMapSettingsSchema } } @@ -34,11 +39,16 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { defaultCenterPosition: [0, 0], markerClusteringSetting: null } - this.map = new LeafletMap($element, options) + console.log("TCL: TbMapWidgetV2 -> constructor -> providerSets[mapProvider]", providerSets[mapProvider], mapProvider) + let MapClass = providerSets[mapProvider]?.MapClass; + if(!MapClass){ + //delete this; + return; + } + console.log("TCL: TbMapWidgetV2 -> constructor -> MapClass", MapClass) + this.map = new MapClass($element, options) this.schema = providerSets[mapProvider]?.schema; - - } onInit() { @@ -48,7 +58,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { } onResize() { - console.log("TCL: TbMapWidgetV2 -> onResize -> onResize") } getSettingsSchema(): Object { @@ -56,7 +65,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { } resize() { - console.log("TCL: TbMapWidgetV2 -> resize -> resize") this.map?.invalidateSize(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts new file mode 100644 index 0000000000..46d700b2f1 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/index.ts @@ -0,0 +1,2 @@ +export * from './tencent-map'; +export * from './openstreet-map'; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts new file mode 100644 index 0000000000..12c4cf30db --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts @@ -0,0 +1,15 @@ + +import L from 'leaflet'; +import LeafletMap from '../leaflet-map'; +import { MapOptions } from '../map-models'; + +export class OpenStreetMap extends LeafletMap { + constructor($container, options: MapOptions) { + super($container, options); + const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); + var tileLayer = (L.tileLayer as any).provider("OpenStreetMap.Mapnik"); + tileLayer.addTo(map); + super.setMap(map); + super.initSettings(options); + } +} \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts new file mode 100644 index 0000000000..16d7f92f2a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts @@ -0,0 +1,16 @@ + +import L from 'leaflet'; +import LeafletMap from '../leaflet-map'; +import { MapOptions } from '../map-models'; + +export class TencentMap extends LeafletMap { + constructor($container, options: MapOptions) { + super($container, options); + const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'; + const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); + const txLayer = L.tileLayer(txUrl, { subdomains: '0123', tms: true }).addTo(map); + txLayer.addTo(map); + super.setMap(map); + super.initSettings(options); + } +} \ No newline at end of file