总结 Mapbox 套索工具中的属性值

Question

我是 javascript 的新手，我还不是很擅长。我在 Mapbox 中使用 javascript。

目标： 我有许多地点，每个地点都附有金额 ($)。我想使用多边形绘制工具在这些位置周围绘制一个多边形，该多边形将自动汇总绘制的多边形内的值（$）并将其显示在地图左上角的框中。

问题：

(1) 我已经在地图中插入了多边形工具，地图左侧的方框显示每个位置所附金额的总和（$），但显示的数字总是错误的。

我现在需要的是：

(1) 让地图左边的方框准确显示这些位置的总和。 (2) 当我在地图上拖动多边形时，总和必须相应地改变，因为位置以及附加到这些位置的数量将不同。

我真的需要有人帮我编辑我的代码。是的，我已经访问过许多 mapbox 示例，包括您可以在其中绘制多边形并显示其中区域的示例，但我无法修改它以满足我的需要。

我的代码：

const overlay = document.getElementById('map-overlay');

map.addControl（绘制）；

map.on('draw.create',TotalSumALL);
map.on('draw.delete',TotalSumALL);
map.on('draw.update',TotalSumALL);

function TotalSumALL(e) {
    const data = draw.getAll();
    const answer = document.getElementById('map-overlay');
    const features = map.queryRenderedFeatures({
        layers: ['Locations']
    });
    if (features.length >= 10000) {
        return window.alert('Select a smaller number of features');}
    const names = features.map((feature) => feature.properties.InsuredName);
    map.setFilter('Locations', ['in', 'InsuredName', ...names]);

// Total the Totals of all features.
    const TotalSum = features.reduce((memo, feature) => {
        if (typeof(feature.properties.Total) == 'string'){
           let afterData = parseFloat(feature.properties.Total)
        return afterData + memo 
        } 
        return memo + feature.properties.Total;
    }, 0);

    const Total = document.createElement('div');
    Total.textContent =
        'TIV: ' + TotalSum.toLocaleString();

    overlay.innerHTML = '';
    overlay.style.display = 'block';
    overlay.appendChild(Total);
}
map.dragPan.enable();
});