Merge branch 'master' into develop/2.3

application/pom.xml

@@ -41,6 +41,10 @@
     </properties>
 
     <dependencies>
+        <dependency>
+            <groupId>de.ruedigermoeller</groupId>
+            <artifactId>fst</artifactId>
+        </dependency>
         <dependency>
             <groupId>io.netty</groupId>
             <artifactId>netty-transport-native-epoll</artifactId>

application/src/main/java/org/thingsboard/server/service/encoding/ProtoWithFSTService.java

@@ -17,8 +17,8 @@ package org.thingsboard.server.service.encoding;
 
 import com.google.protobuf.ByteString;
 import lombok.extern.slf4j.Slf4j;
+import org.nustaq.serialization.FSTConfiguration;
 import org.springframework.stereotype.Service;
-import org.springframework.util.SerializationUtils;
 import org.thingsboard.server.common.msg.TbActorMsg;
 import org.thingsboard.server.common.msg.cluster.ServerAddress;
 import org.thingsboard.server.gen.cluster.ClusterAPIProtos;
@@ -30,13 +30,14 @@ import static org.thingsboard.server.gen.cluster.ClusterAPIProtos.MessageType.CL
 
 @Slf4j
 @Service
-public class ProtoWithJavaSerializationDecodingEncodingService implements DataDecodingEncodingService {
+public class ProtoWithFSTService implements DataDecodingEncodingService {
 
 
+    private final FSTConfiguration config = FSTConfiguration.createDefaultConfiguration();
     @Override
     public Optional<TbActorMsg> decode(byte[] byteArray) {
         try {
-            TbActorMsg msg = (TbActorMsg) SerializationUtils.deserialize(byteArray);
+            TbActorMsg msg = (TbActorMsg) config.asObject(byteArray);
             return Optional.of(msg);
 
         } catch (IllegalArgumentException e) {
@@ -47,7 +48,7 @@ public class ProtoWithJavaSerializationDecodingEncodingService implements DataDe
 
     @Override
     public byte[] encode(TbActorMsg msq) {
-        return SerializationUtils.serialize(msq);
+        return config.asByteArray(msq);
     }
 
     @Override

pom.xml

@@ -84,6 +84,7 @@
         <delight-nashorn-sandbox.version>0.1.14</delight-nashorn-sandbox.version>
         <kafka.version>2.0.0</kafka.version>
         <bucket4j.version>4.1.1</bucket4j.version>
+        <fst.version>2.57</fst.version>
     </properties>
 
     <modules>
@@ -789,6 +790,11 @@
                 <artifactId>bucket4j-core</artifactId>
                 <version>${bucket4j.version}</version>
             </dependency>
+            <dependency>
+                <groupId>de.ruedigermoeller</groupId>
+                <artifactId>fst</artifactId>
+                <version>${fst.version}</version>
+            </dependency>
             <dependency>
                 <groupId>io.springfox.ui</groupId>
                 <artifactId>springfox-swagger-ui-rfc6570</artifactId>

ui/src/app/locale/locale.constant-en_US.json

@@ -1034,7 +1034,6 @@
         "modbus-register-count": "Register count",
         "modbus-register-count-range": "Register count should be a positive value.",
         "modbus-byte-order": "Byte order",
-
         "sync": {
             "status": "Status",
             "sync": "Sync",
@@ -1042,7 +1041,6 @@
             "last-sync-time": "Last sync time",
             "not-available": "Not available"
         },
-
         "export-extensions-configuration": "Export extensions configuration",
         "import-extensions-configuration": "Import extensions configuration",
         "import-extensions": "Import extensions",
@@ -1568,6 +1566,7 @@
     "language": {
         "language": "Language",
         "locales": {
+            "de_DE": "German",
             "fr_FR": "French",
             "zh_CN": "Chinese",
             "en_US": "English",

ui/src/app/locale/locale.constant-es_ES.json

@@ -1034,7 +1034,6 @@
         "modbus-register-count": "Contador del registro",
         "modbus-register-count-range": "Contador del registro debe ser un valor positivo.",
         "modbus-byte-order": "Orden del byte",
-
         "sync": {
             "status": "Estado",
             "sync": "Sincronización",
@@ -1042,7 +1041,6 @@
             "last-sync-time": "Último tiempo de sincroniación",
             "not-available": "No disponible"
         },
-
         "export-extensions-configuration": "Exportar configuración de extensiones",
         "import-extensions-configuration": "Importar configuración de extensiones",
         "import-extensions": "Importar extensiones",
@@ -1568,6 +1566,7 @@
     "language": {
         "language": "Lenguaje",
         "locales": {
+            "de_DE": "Alemán",
             "fr_FR": "Francés",
             "zh_CN": "Chino",
             "en_US": "Inglés",

ui/src/app/locale/locale.constant-fr_FR.json

@@ -1003,6 +1003,7 @@
     "language": {
         "language": "Language",
         "locales": {
+            "de_DE": "Allemand",
             "en_US": "Anglais",
             "fr_FR": "Français",
             "es_ES": "Espagnol",

ui/src/app/locale/locale.constant-it_IT.json

@@ -910,7 +910,6 @@
         "modbus-register-count": "Register count",
         "modbus-register-count-range": "Register count should be a positive value.",
         "modbus-byte-order": "Byte order",
-
         "sync": {
             "status": "Stato",
             "sync": "Sincronizzato",
@@ -918,7 +917,6 @@
             "last-sync-time": "Ultima sincronizzazione",
             "not-available": "Non disponibile"
         },
-
         "export-extensions-configuration": "Esporta configurazione estensioni",
         "import-extensions-configuration": "Importa configurazione estensioni",
         "import-extensions": "Importa estensione",
@@ -1434,6 +1432,7 @@
     "language": {
         "language": "Lingua",
         "locales": {
+            "de_DE": "Tedesco",
             "fr_FR": "Francese",
             "zh_CN": "Cinese",
             "ko_KR": "Coreano",

ui/src/app/locale/locale.constant-ja_JA.json

@@ -919,7 +919,6 @@
 		"modbus-register-count": "レジスタ数",
 		"modbus-register-count-range": "レジスタ数は正の値でなければなりません。",
 		"modbus-byte-order": "バイト順",
-
 		"sync": {
 			"status": "状態",
 			"sync": "同期",
@@ -927,7 +926,6 @@
 			"last-sync-time": "前回の同期時間",
 			"not-available": "利用不可"
 		},
-
 		"export-extensions-configuration": "エクステンション設定のエクスポート",
 		"import-extensions-configuration": "エクステンション設定のインポート",
 		"import-extensions": "拡張機能のインポート",
@@ -1451,6 +1449,7 @@
 	"language": {
 		"language": "言語",
 		"locales": {
+			"de_DE": "ドイツ語",
 			"en_US": "英語",
 			"ko_KR": "韓国語",
 			"it_IT": "イタリアの",

ui/src/app/locale/locale.constant-ko_KR.json

@@ -85,7 +85,6 @@
         "enable-tls": "TLS 사용",
         "send-test-mail": "테스트 메일 보내기"
     },
-
     "alarm": {
         "alarm": "Alarm",
         "alarms": "Alarms",
@@ -831,7 +830,6 @@
         "modbus-register-count": "Register count",
         "modbus-register-count-range": "Register count should be a positive value.",
         "modbus-byte-order": "Byte order",
-
         "sync": {
             "status": "Status",
             "sync": "Sync",
@@ -839,7 +837,6 @@
             "last-sync-time": "Last sync time",
             "not-available": "Not available"
         },
-
         "export-extensions-configuration": "Export extensions configuration",
         "import-extensions-configuration": "Import extensions configuration",
         "import-extensions": "Import extensions",
@@ -1328,6 +1325,7 @@
     "language": {
         "language": "언어",
         "locales": {
+            "de_DE": "독일어",
             "en_US": "영어",
             "fr_FR": "프랑스의",
             "ko_KR": "한글",

ui/src/app/locale/locale.constant-ru_RU.json

@@ -1032,7 +1032,6 @@
         "modbus-register-count": "Количество регистров",
         "modbus-register-count-range": "Количество регистров должно быть больше ноля.",
         "modbus-byte-order": "Порядок байтов",
-
         "sync": {
             "status": "Статус",
             "sync": "Синхронизирован",
@@ -1040,7 +1039,6 @@
             "last-sync-time": "Время последней синхронизации",
             "not-available": "Не доступен"
         },
-
         "export-extensions-configuration": "Экспортировать конфигурацию расширений",
         "import-extensions-configuration": "Импортировать конфигурацию расширений",
         "import-extensions": "Импортировать расширения",
@@ -1566,6 +1564,7 @@
     "language": {
         "language": "Язык",
         "locales": {
+            "de_DE": "Немецкий",
             "en_US": "Английский",
             "zh_CN": "Китайский",
             "ko_KR": "Корейский",

ui/src/app/locale/locale.constant-tr_TR.json

@@ -1531,6 +1531,7 @@
     "language": {
         "language": "Dil",
         "locales": {
+            "de_DE": "Almanca",
             "fr_FR": "Fransızca",
             "zh_CN": "Çince",
             "en_US": "İngilizce",

ui/src/app/locale/locale.constant-zh_CN.json

@@ -916,7 +916,6 @@
             "last-sync-time": "最后同步时间",
             "not-available": "无法使用"
         },
-
         "export-extensions-configuration": "导出扩展配置",
         "import-extensions-configuration": "导入扩展配置",
         "import-extensions": "导入扩展",
@@ -1299,7 +1298,6 @@
         "saveAs": "部件另存为",
         "save-widget-type-as": "部件类型另存为",
         "save-widget-type-as-text": "请输入新的部件标题或选择目标部件包",
-
         "toggle-fullscreen": "切换全屏",
         "run": "运行部件",
         "title": "部件标题",
@@ -1437,6 +1435,7 @@
     "language": {
         "language": "语言",
         "locales": {
+            "de_DE": "德语",
             "en_US": "英语",
             "fr_FR": "法国",
             "ko_KR": "韩语",

ui/src/app/widget/lib/google-map.js

@@ -314,6 +314,48 @@ export default class TbGoogleMap {
         polyline.setMap(null);
     }
 
+
+	createPolygon(latLangs, settings) {
+		let polygon = new google.maps.Polygon({
+			map: this.map,
+			paths: latLangs,
+			strokeColor: settings.polygonStrokeColor,
+			strokeOpacity: settings.polygonStrokeColor,
+			fillColor: settings.polygonColor,
+			fillOpacity: settings.polygonOpacity,
+			strokeWeight: settings.polygonStrokeWeight
+		});
+		return polygon;
+	}
+	/* eslint-disable no-undef */
+
+	removePolygon (polygon) {
+		polygon.setMap(null);
+	}
+
+	/* eslint-disable no-undef,no-unused-vars */
+	updatePolygonColor (polygon, settings, color) {
+		let options = {
+			paths: polygon.getPaths(),
+			map: this.map,
+			strokeColor: color,
+			fillColor: color,
+			strokeWeight: settings.polygonStrokeWeight
+		}
+
+	}
+	/* eslint-disable no-undef ,no-unused-vars*/
+
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getPaths().getArray();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setPaths(latLngs);
+	}
+
+
     /* eslint-disable no-undef */
     fitBounds(bounds) {
         if (this.dontFitMapBounds && this.defaultZoomLevel) {

ui/src/app/widget/lib/image-map.js

@@ -369,6 +369,21 @@ export default class TbImageMap {
     removePolyline(/*polyline*/) {
     }
 
+	createPolygon(/*latLangs, settings*/) {
+	}
+
+	removePolygon(/*latLangs, settings*/) {
+	}
+
+	updatePolygonColor(/*latLangs, settings*/) {
+	}
+
+	getPolygonLatLngs(/*latLangs, settings*/) {
+	}
+
+	setPolygonLatLngs(/*latLangs, settings*/) {
+	}
+
     fitBounds() {
     }
 

ui/src/app/widget/lib/map-widget2.js

@@ -23,6 +23,7 @@ import TbTencentMap from './tencent-map';
 import {processPattern, arraysEqual, toLabelValueMap, fillPattern, fillPatternWithActions} from './widget-utils';
 
 export default class TbMapWidgetV2 {
+
 	constructor(mapProvider, drawRoutes, ctx, useDynamicLocations, $element) {
 		var tbMap = this;
 		this.ctx = ctx;
@@ -33,6 +34,7 @@ export default class TbMapWidgetV2 {
 		this.utils = ctx.$scope.$injector.get('utils');
 		this.drawRoutes = drawRoutes;
 		this.markers = [];
+		this.polygons = [];
 		if (this.drawRoutes) {
 			this.polylines = [];
 		}
@@ -42,7 +44,8 @@ export default class TbMapWidgetV2 {
 		var settings = ctx.settings;
 
 		this.callbacks = {};
-        this.callbacks.onLocationClick = function(){};
+		this.callbacks.onLocationClick = function () {
+		};
 
 		if (settings.defaultZoomLevel) {
 			if (settings.defaultZoomLevel > 0 && settings.defaultZoomLevel < 21) {
@@ -61,8 +64,6 @@ export default class TbMapWidgetV2 {
 		var minZoomLevel = this.drawRoutes ? 18 : 15;
 
 
-
-
 		var initCallback = function () {
 			tbMap.update();
 			tbMap.resize();
@@ -109,9 +110,13 @@ export default class TbMapWidgetV2 {
 				if (location.polyline) {
 					tbMap.map.removePolyline(location.polyline);
 				}
+				if (location.polygon) {
+					tbMap.map.removePolygon(location.polygon);
+				}
 			});
 			this.locations = null;
 			this.markers = [];
+			this.polygons = [];
 			if (this.drawRoutes) {
 				this.polylines = [];
 			}
@@ -133,6 +138,7 @@ export default class TbMapWidgetV2 {
 		} else {
 			this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
 			this.locationSettings.lngKeyName = this.ctx.settings.lngKeyName || 'longitude';
+			this.locationSettings.polygonKeyName = this.ctx.settings.polygonKeyName || 'coordinates';
 		}
 
 		this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + this.locationSettings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + this.locationSettings.lngKeyName + ":7}";
@@ -140,9 +146,15 @@ export default class TbMapWidgetV2 {
 		this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
 		this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
 		this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
-        this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000',
+		this.locationSettings.showPolygon = this.ctx.settings.showPolygon !== false;
+		this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
 		this.locationSettings.label = this.ctx.settings.label || "${entityName}";
 		this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569";
+		this.locationSettings.polygonColor = this.ctx.settings.polygonColor ? tinycolor(this.ctx.settings.polygonColor).toHexString() : "#0000ff";
+		this.locationSettings.polygonStrokeColor = this.ctx.settings.polygonStrokeColor ? tinycolor(this.ctx.settings.polygonStrokeColor).toHexString() : "#fe0001";
+		this.locationSettings.polygonOpacity = angular.isDefined(this.ctx.settings.polygonOpacity) ? this.ctx.settings.polygonOpacity : 0.5;
+		this.locationSettings.polygonStrokeOpacity = angular.isDefined(this.ctx.settings.polygonStrokeOpacity) ? this.ctx.settings.polygonStrokeOpacity : 1;
+		this.locationSettings.polygonStrokeWeight = angular.isDefined(this.ctx.settings.polygonStrokeWeight) ? this.ctx.settings.polygonStrokeWeight : 1;
 
 		this.locationSettings.useLabelFunction = this.ctx.settings.useLabelFunction === true;
 		if (angular.isDefined(this.ctx.settings.labelFunction) && this.ctx.settings.labelFunction.length > 0) {
@@ -170,6 +182,14 @@ export default class TbMapWidgetV2 {
 				this.locationSettings.colorFunction = null;
 			}
 		}
+		this.locationSettings.usePolygonColorFunction = this.ctx.settings.usePolygonColorFunction === true;
+		if (angular.isDefined(this.ctx.settings.polygonColorFunction) && this.ctx.settings.polygonColorFunction.length > 0) {
+			try {
+				this.locationSettings.polygonColorFunction = new Function('data, dsData, dsIndex', this.ctx.settings.polygonColorFunction);
+			} catch (e) {
+				this.locationSettings.polygonColorFunction = null;
+			}
+		}
 
 		this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true;
 		if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
@@ -216,6 +236,7 @@ export default class TbMapWidgetV2 {
 
 		var tbMap = this;
 
+
 		function updateLocationLabel(location, dataMap) {
 			if (location.settings.showLabel) {
 				if (location.settings.useLabelFunction && location.settings.labelFunction) {
@@ -245,7 +266,8 @@ export default class TbMapWidgetV2 {
 				var color;
 				try {
 					color = location.settings.colorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
-                } catch (e) {/**/}
+				} catch (e) {/**/
+				}
 				if (!color) {
 					color = '#FE7569';
 				}
@@ -255,6 +277,22 @@ export default class TbMapWidgetV2 {
 			}
 		}
 
+		function calculateLocationPolygonColor(location, dataMap) {
+			if (location.settings.usePolygonColorFunction && location.settings.polygonColorFunction) {
+				var color;
+				try {
+					color = location.settings.polygonColorFunction(dataMap.dataMap, dataMap.dsDataMap, location.dsIndex);
+				} catch (e) {/**/
+				}
+				if (!color) {
+					color = '#007800';
+				}
+				return tinycolor(color).toHexString();
+			} else {
+				return location.settings.polygonColor;
+			}
+		}
+
 		function updateLocationColor(location, color, image) {
 			if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
 				if (!location.settings.useMarkerImage && !image) {
@@ -267,6 +305,16 @@ export default class TbMapWidgetV2 {
 			}
 		}
 
+		function updateLocationPolygonColor(location, color) {
+			if (!location.settings.calculatedPolygonColor || location.settings.calculatedPolygonColor !== color) {
+				location.settings.calculatedPolygonColor = color;
+				if (location.polygon) {
+					tbMap.map.updatePolygonColor(location.polygon, location.settings, color);
+				}
+
+			}
+		}
+
 		function calculateLocationMarkerImage(location, dataMap) {
 			if (location.settings.useMarkerImageFunction && location.settings.markerImageFunction) {
 				var image = null;
@@ -291,8 +339,10 @@ export default class TbMapWidgetV2 {
 		function updateLocationStyle(location, dataMap) {
 			updateLocationLabel(location, dataMap);
 			var color = calculateLocationColor(location, dataMap);
+			var polygonColor = calculateLocationPolygonColor(location, dataMap);
 			var image = calculateLocationMarkerImage(location, dataMap);
 			updateLocationColor(location, color, image);
+			if (location.settings.usePolygonColorFunction) updateLocationPolygonColor(location, polygonColor);
 			updateLocationMarkerIcon(location, image);
 		}
 
@@ -377,6 +427,21 @@ export default class TbMapWidgetV2 {
 								locationChanged = true;
 							}
 						}
+
+
+						if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
+							let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
+							let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
+							if (!location.polygon && polygonLatLngs.length > 0) {
+								location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings);
+								tbMap.polygons.push(location.polygon);
+							} else if (polygonLatLngs.length > 0) {
+								let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
+								if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
+									tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
+								}
+							}
+						}
 					}
 					if (location.marker) {
 						updateLocationStyle(location, dataMap);
@@ -415,6 +480,7 @@ export default class TbMapWidgetV2 {
 				} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
 					lngIndex = i;
 				}
+
 				if (latIndex > -1 && lngIndex > -1) {
 					var location = {
 						latIndex: latIndex,
@@ -431,7 +497,6 @@ export default class TbMapWidgetV2 {
 						location.settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.tooltipPattern);
 						location.settings.tooltipReplaceInfo = processPattern(location.settings.tooltipPattern, datasources, currentDatasourceIndex);
 					}
-
 					tbMap.locations.push(location);
 					updateLocation(location, data, dataMap);
 					if (location.polyline) {
@@ -447,8 +512,20 @@ export default class TbMapWidgetV2 {
 			tbMap.map.fitBounds(bounds);
 		}
 
-        function updateLocations(data, datasources) {
+		function mapPolygonArray (rawArray) {
+			let latLngArray = rawArray.map(function (el) {
+				if (el.length === 2) {
+					return tbMap.map.createLatLng(el[0], el[1]);
+				} else if (el.length > 2) {
+					return mapPolygonArray(el);
+				} else {
+					return tbMap.map.createLatLng(false);
+				}
+			});
+			return latLngArray;
+		}
 
+		function updateLocations(data, datasources) {
 			var locationsChanged = false;
 			var bounds = tbMap.map.createBounds();
 			var dataMap = toLabelValueMap(data, datasources);
@@ -488,6 +565,7 @@ export default class TbMapWidgetV2 {
 			content = fillPattern(settings.tooltipPattern, settings.tooltipReplaceInfo, data);
 			return fillPatternWithActions(content, 'onTooltipAction', tooltip.markerArgs);
 		}
+
 		if (this.map && this.map.inited() && this.subscription) {
 			if (this.subscription.data) {
 				if (!this.locations) {
@@ -503,6 +581,7 @@ export default class TbMapWidgetV2 {
 				}
 			}
 		}
+
 	}
 
 	resize() {
@@ -668,8 +747,7 @@ const openstreetMapSettingsSchema =
 					"default": "OpenStreetMap.Mapnik"
 				}
 			},
-            "required":[
+			"required": []
-            ]
 		},
 		"form": [
 			{
@@ -791,6 +869,48 @@ const commonMapSettingsSchema =
 					"title": "Color function: f(data, dsData, dsIndex)",
 					"type": "string"
 				},
+				"showPolygon": {
+					"title": "Show polygon",
+					"type": "boolean",
+					"default": false
+				},
+				"polygonKeyName": {
+					"title": "Polygon key name",
+					"type": "string",
+					"default": "coordinates"
+				},
+				"polygonColor": {
+					"title": "Polygon color",
+					"type": "string"
+				},
+				"polygonOpacity": {
+					"title": "Polygon opacity",
+					"type": "number",
+					"default": 0.5
+				},
+				"polygonStrokeColor": {
+					"title": "Stroke color",
+					"type": "string"
+				},
+				"polygonStrokeOpacity": {
+					"title": "Stroke opacity",
+					"type": "number",
+					"default": 1
+				},
+				"polygonStrokeWeight": {
+					"title": "Stroke weight",
+					"type": "number",
+					"default": 1
+				},
+				"usePolygonColorFunction": {
+					"title": "Use polygon color function",
+					"type": "boolean",
+					"default": false
+				},
+				"polygonColorFunction": {
+					"title": "Polygon Color function: f(data, dsData, dsIndex)",
+					"type": "string"
+				},
 				"markerImage": {
 					"title": "Custom marker image",
 					"type": "string"
@@ -851,6 +971,20 @@ const commonMapSettingsSchema =
 			{
 				"key": "colorFunction",
 				"type": "javascript"
+			}, "showPolygon", "polygonKeyName",
+			{
+				"key": "polygonColor",
+				"type": "color"
+			},
+			"polygonOpacity",
+			{
+				"key": "polygonStrokeColor",
+				"type": "color"
+			},
+			"polygonStrokeOpacity","polygonStrokeWeight","usePolygonColorFunction",
+			{
+				"key": "polygonColorFunction",
+				"type": "javascript"
 			},
 			{
 				"key": "markerImage",
@@ -891,8 +1025,7 @@ const routeMapSettingsSchema =
 					"default": 1.0
 				}
 			},
-            "required":[
+			"required": []
-            ]
 		},
 		"form": [
 			"strokeWeight",

ui/src/app/widget/lib/openstreet-map.js

@@ -190,6 +190,42 @@ export default class TbOpenStreetMap {
 		this.map.removeLayer(polyline);
 	}
 
+	createPolygon(latLangs, settings) {
+		let polygon = L.polygon(latLangs, {
+			fill: true,
+			fillColor: settings.polygonColor,
+			color: settings.polygonStrokeColor,
+			weight: settings.polygonStrokeWeight,
+			fillOpacity: settings.polygonOpacity,
+			opacity: settings.polygonStrokeOpacity
+		}).addTo(this.map);
+		return polygon;
+	}
+
+	removePolygon(polygon) {
+		this.map.removeLayer(polygon);
+	}
+
+	updatePolygonColor(polygon, settings, color) {
+		let style = {
+			fill: true,
+			fillColor: color,
+			color: color,
+			weight: settings.polygonStrokeWeight,
+			fillOpacity: settings.polygonOpacity,
+			opacity: settings.polygonStrokeOpacity
+		};
+		polygon.setStyle(style);
+	}
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getLatLngs();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setLatLngs(latLngs);
+	}
+
 	fitBounds(bounds) {
 		if (bounds.isValid()) {
 			if (this.dontFitMapBounds && this.defaultZoomLevel) {

ui/src/app/widget/lib/tencent-map.js

@@ -149,6 +149,7 @@ export default class TbTencentMap {
 			marker.label.setStyle(this.createMarkerLabelStyle(settings));
 		}
 	}
+
 	/* eslint-enable no-undef,no-unused-vars */
 
 	/* eslint-disable no-undef,no-unused-vars */
@@ -157,6 +158,7 @@ export default class TbTencentMap {
 			marker.setIcon(iconInfo.icon);
 		});
 	}
+
 	/* eslint-enable no-undef,,no-unused-vars */
 
 	/* eslint-disable no-undef */
@@ -168,6 +170,7 @@ export default class TbTencentMap {
 			}
 		});
 	}
+
 	/* eslint-disable no-undef */
 
 	/* eslint-disable no-undef */
@@ -206,6 +209,7 @@ export default class TbTencentMap {
 			this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
 		}
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -221,6 +225,7 @@ export default class TbTencentMap {
 		};
 		onMarkerIconReady(iconInfo);
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -289,6 +294,7 @@ export default class TbTencentMap {
 			dsIndex: dsIndex
 		});
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -302,6 +308,7 @@ export default class TbTencentMap {
 		};
 		polyline.setOptions(options);
 	}
+
 	/* eslint-enable no-undef */
 
 	/* eslint-disable no-undef */
@@ -316,12 +323,52 @@ export default class TbTencentMap {
 
 		return polyline;
 	}
+
 	/* eslint-enable no-undef */
 
 	removePolyline(polyline) {
 		polyline.setMap(null);
 	}
 
+	/* eslint-disable no-undef */
+	createPolygon(latLangs, settings) {
+		let polygon = new qq.maps.Polygon({
+			map: this.map,
+			path: latLangs,
+			strokeColor: settings.polygonStrokeColor,
+			fillColor: settings.polygonColor,
+			strokeWeight: settings.polygonStrokeWeight
+		});
+		return polygon;
+	}
+	/* eslint-disable no-undef */
+
+	removePolygon (polygon) {
+		polygon.setMap(null);
+	}
+
+	/* eslint-disable no-undef,no-unused-vars */
+	updatePolygonColor (polygon, settings, color) {
+		let options = {
+			path: polygon.getPath(),
+			map: this.map,
+			strokeColor: color,
+			fillColor: color,
+			strokeWeight: settings.polygonStrokeWeight
+		}
+
+	}
+	/* eslint-disable no-undef ,no-unused-vars*/
+
+
+	getPolygonLatLngs(polygon) {
+		return polygon.getPath().getArray();
+	}
+
+	setPolygonLatLngs(polygon, latLngs) {
+		polygon.setPath(latLngs);
+	}
+
 	/* eslint-disable no-undef ,no-unused-vars*/
 	fitBounds(bounds) {
 		if (this.dontFitMapBounds && this.defaultZoomLevel) {
@@ -337,6 +384,7 @@ export default class TbTencentMap {
 			this.map.fitBounds(bounds);
 		}
 	}
+
 	/* eslint-enable no-undef,no-unused-vars */
 
 	createLatLng(lat, lng) {