Добавление данных Polygon на карту OSM на ThingsBoard - PullRequest
0 голосов
/ 10 марта 2019

Я пытаюсь интегрировать данные Polygons в OpenStreetMap в виджете карты ThingsBoard. У меня есть данные, сохраненные в виде файла GeoJSON, и я также преобразовал их в список полигонов (другой список), состоящий из значений [LAT, long]. Не уверен, как добавить файл в карту, и у меня нет выбора использовать мою собственную карту / ссылку OpenStreetMap.

Я попытался вставить следующие строки в функцию "onInit" виджета, но не могу загрузить его успешно. Вот код, который я добавил к атрибуту 'controllerScript' в JSON виджета.

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

1 Ответ

0 голосов
/ 13 марта 2019

Отредактировал код и заставил его работать следующим образом в функции 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();
}

Я до сих пор не знаю, почему, но этот ответ показывает только многоугольник на карте, но на него нельзя нажать, чтобы использовать его с действием "при нажатии на многоугольник".

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...