add tencent map

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;
+        this.options = options;
-        // defaultCenterPosition = options.defaultCenterPosition || [0, 0];
+    }
-        this.map = L.map($container).setView(options.defaultCenterPosition, options.defaultZoomLevel || 8);
 
-        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 = {
+        if (initCallback) {
-            app_id: "AhM6TzD9ThyK78CT3ptx",
+            setTimeout(options.initCallback, 0);
-            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
         }
-
     }
 
     inited() {
         return !!this.map;
     }
 
+    public setMap(map: L.Map) {
+        this.map = map;
+    }
+
     getContainer() {
         return /* this.isMarketCluster ? this.markersCluster :*/ this.map;
     }

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: {
+    'openstreet-map': {
-        constructor: LeafletMap,
+        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();
     }
 

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';

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

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