将多边形数据添加到 ThingsBoard 上的 OSM 地图
Adding Polygon data to an OSM map on ThingsBoard
我正在尝试将多边形数据集成到 ThingsBoard 地图小部件上的 OpenStreetMap 中。
我将数据保存为 GeoJSON 文件,并将其转换为由 [LAT, long] 值组成的多边形列表(另一个列表)。
不确定如何将文件添加到地图中,也没有选择使用我自己的 OpenStreetMap map/link。
我尝试将以下行插入到小部件的 "onInit" 函数中,但无法成功加载。
这是我添加到小部件 JSON.
上的 'controllerScript' 属性的代码
self.onInit = function() {
\n\tself.ctx.map = new TbMapWidgetV2('openstreet-map', false, self.ctx);
\n\tself.ctx.map.location.polygon = self.ctx.map.createPolygon(
ListOfLatLnGPolygons, self.ctx.map.location.settings, self.ctx.map.location,
function (event)
\n{
\n\tself.ctx.map.callbacks.onLocationClick(self.ctx.map.location);
\n\tself.ctx.map.locationPolygonClick(event, self.ctx.map.location);
\n}, self.ctx.map.location.dsIndex);
\n\tself.ctx.map.polygons.push(self.ctx.map.location.polygon);
\n}
\nself.onDataUpdated = function() {
\n\tself.ctx.map.update();
\n}
\n
\nself.onResize = function() {
\n\tself.ctx.map.resize();
\n}
\n
\nself.getSettingsSchema = function() {
\n\treturn TbMapWidgetV2.settingsSchema('openstreet-map');
\n}
\n
\nself.getDataKeySettingsSchema = function() {
\n\treturn TbMapWidgetV2.dataKeySettingsSchema('openstreet-map');
\n}
\n
\nself.actionSources = function() {
\n\treturn TbMapWidgetV2.actionSources();
\n}
\n
\nself.onDestroy = function() {
\n}
\n
编辑代码并使其在 onInit() 函数上按如下方式工作。
self.onInit = function() {
self.ctx.map = new TbMapWidgetV2('openstreet-map',
false, self.ctx);
var tbMap = self.ctx.map;
var coordinates = [[lat1,long1],[lat2,long2],[lat2,long3]];
// I manually entered the coordinates
var latLangs = [];
self.ctx.map.configureLocationsSettings();
self.ctx.settings.showPolygon = true;
self.ctx.settings.polygonColor = "#FE7569";
self.ctx.settings.polygonStrokeColor = "#000000";
coordinates.forEach(function(coord) {
latLangs.push(tbMap.map.createLatLng(
coord[1], coord[0]));
})
tbMap.map.createPolygon(latLangs, self.ctx.settings,
location, true, null);
tbMap.update();
}
我仍然不知道为什么,但这个答案只在地图上显示了多边形,但它不可点击以用于 "on polygon click" 操作。
我正在尝试将多边形数据集成到 ThingsBoard 地图小部件上的 OpenStreetMap 中。 我将数据保存为 GeoJSON 文件,并将其转换为由 [LAT, long] 值组成的多边形列表(另一个列表)。 不确定如何将文件添加到地图中,也没有选择使用我自己的 OpenStreetMap map/link。
我尝试将以下行插入到小部件的 "onInit" 函数中,但无法成功加载。 这是我添加到小部件 JSON.
上的 'controllerScript' 属性的代码self.onInit = function() {
\n\tself.ctx.map = new TbMapWidgetV2('openstreet-map', false, self.ctx);
\n\tself.ctx.map.location.polygon = self.ctx.map.createPolygon(
ListOfLatLnGPolygons, self.ctx.map.location.settings, self.ctx.map.location,
function (event)
\n{
\n\tself.ctx.map.callbacks.onLocationClick(self.ctx.map.location);
\n\tself.ctx.map.locationPolygonClick(event, self.ctx.map.location);
\n}, self.ctx.map.location.dsIndex);
\n\tself.ctx.map.polygons.push(self.ctx.map.location.polygon);
\n}
\nself.onDataUpdated = function() {
\n\tself.ctx.map.update();
\n}
\n
\nself.onResize = function() {
\n\tself.ctx.map.resize();
\n}
\n
\nself.getSettingsSchema = function() {
\n\treturn TbMapWidgetV2.settingsSchema('openstreet-map');
\n}
\n
\nself.getDataKeySettingsSchema = function() {
\n\treturn TbMapWidgetV2.dataKeySettingsSchema('openstreet-map');
\n}
\n
\nself.actionSources = function() {
\n\treturn TbMapWidgetV2.actionSources();
\n}
\n
\nself.onDestroy = function() {
\n}
\n
编辑代码并使其在 onInit() 函数上按如下方式工作。
self.onInit = function() {
self.ctx.map = new TbMapWidgetV2('openstreet-map',
false, self.ctx);
var tbMap = self.ctx.map;
var coordinates = [[lat1,long1],[lat2,long2],[lat2,long3]];
// I manually entered the coordinates
var latLangs = [];
self.ctx.map.configureLocationsSettings();
self.ctx.settings.showPolygon = true;
self.ctx.settings.polygonColor = "#FE7569";
self.ctx.settings.polygonStrokeColor = "#000000";
coordinates.forEach(function(coord) {
latLangs.push(tbMap.map.createLatLng(
coord[1], coord[0]));
})
tbMap.map.createPolygon(latLangs, self.ctx.settings,
location, true, null);
tbMap.update();
}
我仍然不知道为什么,但这个答案只在地图上显示了多边形,但它不可点击以用于 "on polygon click" 操作。