简柏林 / 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 3 export interface MapOptions {
4 4 initCallback?: Function,
... ... @@ -13,7 +13,7 @@ export interface MapOptions {
13 13 mapProvider: MapProviders,
14 14 mapUrl?: string;
15 15 credentials?: any, // declare credentials format
16   - defaultCenterPosition?: LatLngExpression,
  16 + defaultCenterPosition?: LatLngTuple,
17 17 markerClusteringSetting?,
18 18 useDefaultCenterPosition?: boolean
19 19 }
... ...
... ... @@ -4,7 +4,6 @@ export interface MapWidgetInterface {
4 4 onInit(),
5 5 onDataUpdated();
6 6 onResize();
7   - getSettingsSchema(): Object;
8 7 onDestroy();
9 8 }
10 9
... ...
... ... @@ -9,7 +9,8 @@ import {
9 9 routeMapSettingsSchema,
10 10 markerClusteringSettingsSchema,
11 11 markerClusteringSettingsSchemaLeaflet,
12   - hereMapSettingsSchema
  12 + hereMapSettingsSchema,
  13 + mapProviderSchema
13 14 } from './schemes';
14 15 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
15 16 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
... ... @@ -17,24 +18,29 @@ import { parseData, parseArray, parseFunction } from './maps-utils';
17 18
18 19 export let TbMapWidgetV2: MapWidgetStaticInterface;
19 20 TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
  21 +
20 22 map: LeafletMap;
21 23 provider: MapProviders;
22 24 schema;
23 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 33 this.data = ctx.data;
27 34 if (!$element) {
28 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 40 if (!MapClass) {
34 41 return;
35 42 }
36 43 this.map = new MapClass($element, settings);
37   - this.schema = providerSets[mapProvider]?.schema;
38 44 }
39 45
40 46 onInit() {
... ... @@ -42,6 +48,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
42 48
43 49 initSettings(settings: any) {
44 50 const functionParams = ['data', 'dsData', 'dsIndex'];
  51 + this.provider = settings.provider ? settings.provider : this.mapProvider;
45 52 const customOptions = {
46 53 mapProvider: this.provider,
47 54 mapUrl: settings?.mapImageUrl,
... ... @@ -53,6 +60,7 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
53 60 tooltipPattern: settings.tooltipPattern ||
54 61 "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
55 62 label: settings.label || "${entityName}",
  63 + defaultCenterPosition: settings?.defaultCenterPosition?.split(',') || [0,0],
56 64 currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
57 65 url: settings.markerImage,
58 66 size: settings.markerImageSize || 34
... ... @@ -74,9 +82,6 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
74 82 this.map.onResize();//not work
75 83 }
76 84
77   - getSettingsSchema(): Object {
78   - return this.schema;
79   - }
80 85
81 86 resize() {
82 87 this.map?.invalidateSize();
... ... @@ -88,9 +93,20 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
88 93 }
89 94
90 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 111 function addGroupInfo(title: string) {
96 112 schema.groupInfoes.push({
... ... @@ -99,42 +115,69 @@ TbMapWidgetV2 = class TbMapWidgetV2 implements MapWidgetInterface {
99 115 });
100 116 }
101 117
102   - function mergeSchema(newSchema) {
  118 + function addToSchema(newSchema) {
103 119 Object.assign(schema.schema.properties, newSchema.schema.properties);
104 120 schema.schema.required = schema.schema.required.concat(newSchema.schema.required);
105 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 170 addGroupInfo("Common Map Settings");
114 171
115 172 if (drawRoutes) {
116   - mergeSchema(routeMapSettingsSchema);
  173 + addToSchema(routeMapSettingsSchema);
117 174 addGroupInfo("Route Map Settings");
118 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 178 addGroupInfo("Markers Clustering Settings");
137 179 }
  180 + console.log(11, schema);
138 181
139 182 return schema;
140 183 }
... ... @@ -164,26 +207,27 @@ const providerSets = {
164 207 'openstreet-map': {
165 208 MapClass: OpenStreetMap,
166 209 schema: openstreetMapSettingsSchema,
167   - name: "Openstreet"
  210 + name: "openstreet-map",
168 211 },
169 212 'tencent-map': {
170 213 MapClass: TencentMap,
171 214 schema: tencentMapSettingsSchema,
172   - name: "Tencent"
  215 + name: "tencent-map"
173 216 },
174 217 'google-map': {
175 218 MapClass: GoogleMap,
176 219 schema: googleMapSettingsSchema,
177   - name: "Openstreet"
  220 + name: "google-map"
178 221 },
179 222 'here': {
180 223 MapClass: HEREMap,
181 224 schema: hereMapSettingsSchema,
182   - name: "HERE"
  225 + name: "here"
183 226 },
184 227 'image-map': {
185 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 262 disableScrollZooming: false,
219 263 minZoomLevel: 16,
220 264 credentials: '',
221   - defaultCenterPosition: [0, 0],
222 265 markerClusteringSetting: null,
223 266 }
\ No newline at end of file
... ...
... ... @@ -15,7 +15,6 @@ export const googleMapSettingsSchema =
15 15 }
16 16 },
17 17 "required": [
18   - "gmApiKey"
19 18 ]
20 19 },
21 20 "form": [
... ... @@ -63,7 +62,6 @@ export const tencentMapSettingsSchema =
63 62 }
64 63 },
65 64 "required": [
66   - "tmApiKey"
67 65 ]
68 66 },
69 67 "form": [
... ... @@ -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 };
\ No newline at end of file
... ...
... ... @@ -450,9 +450,7 @@ export default class TbMapWidgetV2 {
450 450 if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) {
451 451 var color;
452 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 454 } catch (e) {/**/
457 455 }
458 456 if (!color) {
... ... @@ -486,9 +484,7 @@ export default class TbMapWidgetV2 {
486 484 function calculateLocationMarkerImage(location, dataMap) {
487 485 if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) {
488 486 var image = null;
489   - try {
490   - // eslint-disable-next-line no-debugger
491   - debugger;
  487 + try {
492 488 image = location.settings.markerImageFunction(dataMap.dataMap, location.settings.markerImages, dataMap.dsDataMap, location.dsIndex);
493 489 } catch (e) {
494 490 image = null;
... ...