Azure 带加权热量的地图控制 Map 图层

Question

我正在使用 Azure 地图创建一个 web 页面，上面有一个 Heat Map。

我有热量 map 成功拉入点并显示，但我需要更改它的渲染方式。

具体来说，我的热量 map 需要基于某个区域的时间长度 - 这可以通过查看我的数据点上的时间戳来完成。 关于如何使用类似日期时间的值在热 map 层中完成此操作的任何想法？

Answer 1

HeatMapLayer class 有一个名为weight的选项，它可以采用数据驱动的样式表达式，提供 0 到 1 之间的数字来指示权重。 在您的情况下，您正在使用时间戳，因此您首先要确定最小值和最大值的时间范围应该是什么。 如果您的时间戳是字符串，您应该在将数据添加到数据源之前循环遍历数据并计算数据的 integer 值并将其存储为功能中的属性（即time ）。 例如： new Date('2022-2-14T03:24:00').getTime()

例如，您可能希望最大值为当前分钟 (0ms) 内发生的任何事情，最小值发生在 15 分钟 (900,000ms) 或更早的任何事情上。 然后，您可以组合一个公式，利用 integer 日期来获得 0 和 1 之间的标量值。这是使用普通 JavaScript 的数学运算：

var timeRange = 900000; //15 minutes
var now = Date.now();
var time = new Date('2022-2-14T03:24:00').getTime();

//Calculate the time offset and snap to the 0 to 15 minute range.
var dt = Math.max(0, Math.min(timeRange, now - time))

//We want the inverse weight since smaller dt should be higher. Thus 1 minus ratio.
var weight = 1 - dt/timeRange;

然后可以将其转换为数据驱动表达式，并在热 map 层选项中设置为权重值。

var timeRange = 900000; //15 minutes
var now = Date.now();
 
map.layers.add(new atlas.layer.HeatMapLayer(datasource, null, {
    weight: ['-', 1, ['/', ['max', 0, ['min', ['-', now, ['get', 'time']], timeRange]], timeRange]]timeRange]]
}), 'labels');

如果您想定期更新now的值，您可以重建表达式并使用setOptions function 更新热度 map。例如；

var timeRange = 900000; //15 minutes

function getWeightExp(){
    var now = Date.now();
    return ['-', 1, ['/', ['max', 0, ['min', ['-', now, ['get', 'time']], timeRange]], timeRange]];
}

//Create heatmap layer.
var heatMap = new atlas.layer.HeatMapLayer(datasource, null, {
    //Set weight option.
    weight: getWeightExp()
});

//Add the heatmap to the map.
map.layers.add(heatMap, 'labels');

//Set an update frequency. In this case once a minute.
setTimeout(function() {
    heatMap.setOptions({
        weight: getWeightExp()
    });
}, 60000);