Question

我正在尝试使用ThingsBoard中的Openstreetsmap创建一个热图模型。该地图显示的是设备，但是当设备坐标更新时，它不会在地图上更新，请提供任何帮助。我还想知道如何像在ThingsBoard小部件中一样在小部件中添加设置高级选项卡。任何帮助表示赞赏。

function addElement(i, length){
    var data = self.ctx.$scope.data;
    if (data === undefined){
        console.log("Got undefined Data");
    }
    else{
        console.log("i & length: " + i + " $ " + length );
        for (i;i<length;(i++)){
        key = data[i].dataKey.name;
        element[key] = data[i].data[0][1];
        }
        console.log(element);
        result.push(cloneMessage(element));
    }
}

self.onDataUpdated = function() {

    initializingMap();
    var data = self.ctx.$scope.data;
    if (data === undefined){
        console.log("Got undefined Data");
    }
    else{
        var latitude =  self.ctx.$scope.data[0].data[0][1];
        var longitude =  self.ctx.$scope.data[1].data[0][1];
        var dataSourceLength = self.ctx.datasources.length;
        var dataKeys = 2;
        var dataLength = self.ctx.$scope.data.length;


        for (var j=0; j<(dataLength); j=(j+dataKeys)){
            addElement(j,(j+dataKeys));
        }


        console.log("Result : ");
        console.log(result);
        var x =[];
        var y = {};
        for(var a=0;a<dataSourceLength;a++){
                y.lat = result[a].latitude;
                y.lng = result[a].longitude;
                y.value = 0;
                x.push(cloneMessage(y)); 
        }
        console.log(x);
        var testData = {
           max: 8,
           data: x
        };


        var baseLayer = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=MAP_ACCESS_TOKEN', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>' +
        '© <a href="https://www.vesparis.com/">Vesparis</a>',
        id: 'mapbox.streets'
        });


      var cfg = {
      // radius should be small ONLY if scaleRadius is true (or small radius is intended)
      // if scaleRadius is false it will be the constant radius used in pixels
      "radius": 1,
      "maxOpacity": .6,
      "blur": .75,
      // scales the radius based on map zoom
      "scaleRadius": true,
      // if set to false the heatmap uses the global maximum for colorization
      // if activated: uses the data maximum within the current map boundaries
      //   (there will always be a red spot with useLocalExtremas true)
      "useLocalExtrema": true,
      // which field name in your data represents the latitude - default "lat"
      latField: 'lat',
      // which field name in your data represents the longitude - default "lng"
      lngField: 'lng',
      // which field name in your data represents the data value - default "value"
      valueField: 'value'
      };

      var heatmapLayer = new HeatmapOverlay(cfg);

      map = new L.Map('mapid', 
      {
         center: new L.LatLng(10.454, 76.026),
         zoom: 4,
         layers: [baseLayer, heatmapLayer]
      });
      heatmapLayer.setData(testData);
   }
}

我希望根据gps坐标的最新值输出地图更改标记

自定义地图窗口小部件Thingsboard标记未更改为最新坐标

0 个答案: