简柏林 / thingskit · Commits

Commit 9eb686700a1574facdefa324f600b52525c8f328

Authored by Artem Halushko
1 parent 1227b704

add map provider select to settings

Inline Side-by-side
Showing 5 changed files with 133 additions and 52 deletions
1 -import { LatLngExpression } from 'leaflet'; 1 +import { LatLngExpression, LatLngTuple } from 'leaflet';
2 2
3 export interface MapOptions { 3 export interface MapOptions {
4 initCallback?: Function, 4 initCallback?: Function,
@@ -13,7 +13,7 @@ export interface MapOptions { @@ -13,7 +13,7 @@ export interface MapOptions {
13 mapProvider: MapProviders, 13 mapProvider: MapProviders,
14 mapUrl?: string; 14 mapUrl?: string;
15 credentials?: any, // declare credentials format 15 credentials?: any, // declare credentials format
16 - defaultCenterPosition?: LatLngExpression, 16 + defaultCenterPosition?: LatLngTuple,
17 markerClusteringSetting?, 17 markerClusteringSetting?,
18 useDefaultCenterPosition?: boolean 18 useDefaultCenterPosition?: boolean
19 } 19 }
@@ -4,7 +4,6 @@ export interface MapWidgetInterface { @@ -4,7 +4,6 @@ export interface MapWidgetInterface {
4 onInit(), 4 onInit(),
5 onDataUpdated(); 5 onDataUpdated();
6 onResize(); 6 onResize();
7 - getSettingsSchema(): Object;  
8 onDestroy(); 7 onDestroy();
9 } 8 }
10 9
@@ -9,7 +9,8 @@ import { @@ -9,7 +9,8 @@ import {
9 routeMapSettingsSchema, 9 routeMapSettingsSchema,
10 markerClusteringSettingsSchema, 10 markerClusteringSettingsSchema,
11 markerClusteringSettingsSchemaLeaflet, 11 markerClusteringSettingsSchemaLeaflet,
12 - hereMapSettingsSchema 12 + hereMapSettingsSchema,
  13 + mapProviderSchema
13 } from './schemes'; 14 } from './schemes';
14 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface'; 15 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
15 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers'; 16 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
@@ -17,24 +18,29 @@ import { parseData, parseArray, parseFunction } from './maps-utils'; @@ -17,24 +18,29 @@ import { parseData, parseArray, parseFunction } from './maps-utils';
17 18
18 export let TbMapWidgetV2: MapWidgetStaticInterface; 19 export let TbMapWidgetV2: MapWidgetStaticInterface;
19 TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { 20 TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
  21 +
20 map: LeafletMap; 22 map: LeafletMap;
21 provider: MapProviders; 23 provider: MapProviders;
22 schema; 24 schema;
23 data; 25 data;
24 26
25 - constructor(mapProvider: MapProviders, private drawRoutes, ctx, $element) { 27 + constructor(public mapProvider: MapProviders, private drawRoutes, ctx, $element) {
  28 + if (this.map) {
  29 + this.map.map.remove();
  30 + delete this.map;
  31 + }
  32 +
26 this.data = ctx.data; 33 this.data = ctx.data;
27 if (!$element) { 34 if (!$element) {
28 $element = ctx.$container[0]; 35 $element = ctx.$container[0];
29 } 36 }
30 - this.provider = mapProvider;  
31 - let MapClass = providerSets[mapProvider]?.MapClass;  
32 - let settings = this.initSettings(ctx?.settings); 37 + let settings = this.initSettings(ctx.settings);
  38 +
  39 + let MapClass = providerSets[this.provider]?.MapClass;
33 if (!MapClass) { 40 if (!MapClass) {
34 return; 41 return;
35 } 42 }
36 this.map = new MapClass($element, settings); 43 this.map = new MapClass($element, settings);
37 - this.schema = providerSets[mapProvider]?.schema;  
38 } 44 }
39 45
40 onInit() { 46 onInit() {
@@ -42,6 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -42,6 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
42 48
43 initSettings(settings: any) { 49 initSettings(settings: any) {
44 const functionParams = ['data', 'dsData', 'dsIndex']; 50 const functionParams = ['data', 'dsData', 'dsIndex'];
  51 + this.provider = settings.provider ? settings.provider : this.mapProvider;
45 const customOptions = { 52 const customOptions = {
46 mapProvider: this.provider, 53 mapProvider: this.provider,
47 mapUrl: settings?.mapImageUrl, 54 mapUrl: settings?.mapImageUrl,
@@ -53,6 +60,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -53,6 +60,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
53 tooltipPattern: settings.tooltipPattern || 60 tooltipPattern: settings.tooltipPattern ||
54 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}", 61 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
55 label: settings.label || "${entityName}", 62 label: settings.label || "${entityName}",
  63 + defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0,0],
56 currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? { 64 currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
57 url: settings.markerImage, 65 url: settings.markerImage,
58 size: settings.markerImageSize || 34 66 size: settings.markerImageSize || 34
@@ -74,9 +82,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -74,9 +82,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
74 this.map.onResize();//not work 82 this.map.onResize();//not work
75 } 83 }
76 84
77 - getSettingsSchema(): Object {  
78 - return this.schema;  
79 - }  
80 85
81 resize() { 86 resize() {
82 this.map?.invalidateSize(); 87 this.map?.invalidateSize();
@@ -88,9 +93,20 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -88,9 +93,20 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
88 } 93 }
89 94
90 public static settingsSchema(mapProvider, drawRoutes): Object { 95 public static settingsSchema(mapProvider, drawRoutes): Object {
91 - const providerInfo = providerSets[mapProvider];  
92 - let schema = providerInfo.schema;  
93 - schema.groupInfoes = []; 96 + //const providerInfo = providerSets[mapProvider];
  97 + let schema = initSchema();
  98 +
  99 + function initSchema() {
  100 + return {
  101 + schema: {
  102 + type: "object",
  103 + properties: {},
  104 + required: []
  105 + },
  106 + form: [],
  107 + groupInfoes: []
  108 + };
  109 + }
94 110
95 function addGroupInfo(title: string) { 111 function addGroupInfo(title: string) {
96 schema.groupInfoes.push({ 112 schema.groupInfoes.push({
@@ -99,42 +115,69 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface { @@ -99,42 +115,69 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
99 }); 115 });
100 } 116 }
101 117
102 - function mergeSchema(newSchema) { 118 + function addToSchema(newSchema) {
103 Object.assign(schema.schema.properties, newSchema.schema.properties); 119 Object.assign(schema.schema.properties, newSchema.schema.properties);
104 schema.schema.required = schema.schema.required.concat(newSchema.schema.required); 120 schema.schema.required = schema.schema.required.concat(newSchema.schema.required);
105 schema.form.push(newSchema.form);//schema.form.concat(commonMapSettingsSchema.form); 121 schema.form.push(newSchema.form);//schema.form.concat(commonMapSettingsSchema.form);
106 } 122 }
107 123
108 - if (providerInfo.name)  
109 - addGroupInfo(providerInfo.name + ' Map Settings');  
110 - schema.form = [schema.form]; 124 + function mergeSchemes(schemes: any[]) {
  125 + return schemes.reduce((finalSchema, schema) => {
  126 + return {
  127 + schema: {
  128 + properties: {
  129 + ...finalSchema.schema.properties,
  130 + ...schema.schema.properties
  131 + },
  132 + required: [
  133 + ...finalSchema.schema.required,
  134 + ...schema.schema.required
  135 + ]
  136 + },
  137 + form: [
  138 + ...finalSchema.form,
  139 + ...schema.form
  140 + ]
  141 + }
  142 + }, initSchema());
  143 + }
111 144
112 - mergeSchema(commonMapSettingsSchema); 145 + function addCondition(schema, condition: String) {
  146 + schema.form = schema.form.map(element => {
  147 + if (typeof element === 'string') {
  148 + return {
  149 + key: element,
  150 + condition: condition
  151 + }
  152 + }
  153 + if (typeof element == 'object') {
  154 + if (element.condition) {
  155 + element.condition += ' && ' + condition
  156 + }
  157 + else element.condition = condition;
  158 + }
  159 + return element;
  160 + });
  161 + return schema;
  162 + }
  163 +
  164 + addToSchema(mergeSchemes([mapProviderSchema,
  165 + ...Object.values(providerSets)?.map(
  166 + setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]));
  167 +
  168 + addGroupInfo("Map Provider Settings");
  169 + addToSchema(commonMapSettingsSchema);
113 addGroupInfo("Common Map Settings"); 170 addGroupInfo("Common Map Settings");
114 171
115 if (drawRoutes) { 172 if (drawRoutes) {
116 - mergeSchema(routeMapSettingsSchema); 173 + addToSchema(routeMapSettingsSchema);
117 addGroupInfo("Route Map Settings"); 174 addGroupInfo("Route Map Settings");
118 } else if (mapProvider !== 'image-map') { 175 } else if (mapProvider !== 'image-map') {
119 - let clusteringSchema: any = {  
120 - schema: {  
121 - properties: {  
122 - ...markerClusteringSettingsSchemaLeaflet.schema.properties,  
123 - ...markerClusteringSettingsSchema.schema.properties  
124 - },  
125 - required: {  
126 - ...markerClusteringSettingsSchemaLeaflet.schema.required,  
127 - ...markerClusteringSettingsSchema.schema.required  
128 - }  
129 - },  
130 - form: [  
131 - ...markerClusteringSettingsSchemaLeaflet.form,  
132 - ...markerClusteringSettingsSchema.form  
133 - ]  
134 - };  
135 - mergeSchema(clusteringSchema); 176 + let clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema])
  177 + addToSchema(clusteringSchema);
136 addGroupInfo("Markers Clustering Settings"); 178 addGroupInfo("Markers Clustering Settings");
137 } 179 }
  180 + console.log(11, schema);
138 181
139 return schema; 182 return schema;
140 } 183 }
@@ -164,26 +207,27 @@ const providerSets = { @@ -164,26 +207,27 @@ const providerSets = {
164 'openstreet-map': { 207 'openstreet-map': {
165 MapClass: OpenStreetMap, 208 MapClass: OpenStreetMap,
166 schema: openstreetMapSettingsSchema, 209 schema: openstreetMapSettingsSchema,
167 - name: "Openstreet" 210 + name: "openstreet-map",
168 }, 211 },
169 'tencent-map': { 212 'tencent-map': {
170 MapClass: TencentMap, 213 MapClass: TencentMap,
171 schema: tencentMapSettingsSchema, 214 schema: tencentMapSettingsSchema,
172 - name: "Tencent" 215 + name: "tencent-map"
173 }, 216 },
174 'google-map': { 217 'google-map': {
175 MapClass: GoogleMap, 218 MapClass: GoogleMap,
176 schema: googleMapSettingsSchema, 219 schema: googleMapSettingsSchema,
177 - name: "Openstreet" 220 + name: "google-map"
178 }, 221 },
179 'here': { 222 'here': {
180 MapClass: HEREMap, 223 MapClass: HEREMap,
181 schema: hereMapSettingsSchema, 224 schema: hereMapSettingsSchema,
182 - name: "HERE" 225 + name: "here"
183 }, 226 },
184 'image-map': { 227 'image-map': {
185 MapClass: ImageMap, 228 MapClass: ImageMap,
186 - schema: imageMapSettingsSchema 229 + schema: imageMapSettingsSchema,
  230 + name: "image-map"
187 } 231 }
188 } 232 }
189 233
@@ -218,6 +262,5 @@ const defaultSettings = { @@ -218,6 +262,5 @@ const defaultSettings = {
218 disableScrollZooming: false, 262 disableScrollZooming: false,
219 minZoomLevel: 16, 263 minZoomLevel: 16,
220 credentials: '', 264 credentials: '',
221 - defaultCenterPosition: [0, 0],  
222 markerClusteringSetting: null, 265 markerClusteringSetting: null,
223 } 266 }
@@ -15,7 +15,6 @@ export const googleMapSettingsSchema = @@ -15,7 +15,6 @@ export const googleMapSettingsSchema =
15 } 15 }
16 }, 16 },
17 "required": [ 17 "required": [
18 - "gmApiKey"  
19 ] 18 ]
20 }, 19 },
21 "form": [ 20 "form": [
@@ -63,7 +62,6 @@ export const tencentMapSettingsSchema = @@ -63,7 +62,6 @@ export const tencentMapSettingsSchema =
63 } 62 }
64 }, 63 },
65 "required": [ 64 "required": [
66 - "tmApiKey"  
67 ] 65 ]
68 }, 66 },
69 "form": [ 67 "form": [
@@ -813,4 +811,49 @@ export const imageMapSettingsSchema = @@ -813,4 +811,49 @@ export const imageMapSettingsSchema =
813 ] 811 ]
814 } 812 }
815 ] 813 ]
  814 +};
  815 +
  816 +export const mapProviderSchema =
  817 +{
  818 + "schema": {
  819 + "title": "Map Provider Configuration",
  820 + "type": "object",
  821 + "properties": {
  822 + "provider": {
  823 + "title": "Map Provider",
  824 + "type": "string",
  825 + "default": "openstreet-map"
  826 + }
  827 + },
  828 + "required": []
  829 + },
  830 + "form": [
  831 + {
  832 + "key": "provider",
  833 + "type": "rc-select",
  834 + "multiple": false,
  835 + "items": [
  836 + {
  837 + "value": "google-map",
  838 + "label": "Google maps"
  839 + },
  840 + {
  841 + "value": "openstreet-map",
  842 + "label": "Openstreet maps"
  843 + },
  844 + {
  845 + "value": "here",
  846 + "label": "HERE maps"
  847 + },
  848 + {
  849 + "value": "image-map",
  850 + "label": "Image map"
  851 + },
  852 + {
  853 + "value": "tencent-map",
  854 + "label": "Tencent maps"
  855 + }
  856 + ]
  857 + }
  858 + ]
816 }; 859 };
@@ -450,9 +450,7 @@ export default class TbMapWidgetV2 { @@ -450,9 +450,7 @@ export default class TbMapWidgetV2 {
450 if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) { 450 if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) {
451 var color; 451 var color;
452 try { 452 try {
453 - color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);  
454 - // eslint-disable-next-line no-debugger  
455 - debugger 453 + color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
456 } catch (e) {/**/ 454 } catch (e) {/**/
457 } 455 }
458 if (!color) { 456 if (!color) {
@@ -486,9 +484,7 @@ export default class TbMapWidgetV2 { @@ -486,9 +484,7 @@ export default class TbMapWidgetV2 {
486 function calculateLocationMarkerImage(location, dataMap) { 484 function calculateLocationMarkerImage(location, dataMap) {
487 if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) { 485 if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) {
488 var image = null; 486 var image = null;
489 - try {  
490 - // eslint-disable-next-line no-debugger  
491 - debugger; 487 + try {
492 image = location.settings.markerImageFunction(dataMap.dataMap, location.settings.markerImages, dataMap.dsDataMap, location.dsIndex); 488 image = location.settings.markerImageFunction(dataMap.dataMap, location.settings.markerImages, dataMap.dsDataMap, location.dsIndex);
493 } catch (e) { 489 } catch (e) {
494 image = null; 490 image = null;