javascript - 带有 Leaflet 和 Python 后端的 TimeDimension

Question

我正在研究通过高速公路系统显示拥堵情况。

有困难所以增加了赏金。

我在这里创建了一个我正在使用 JS bin 的示例 (https://jsbin.com/lebeqam/edit?html,js,output)

我已经用探测器的经纬度和 ID 号创建了传单 map 。

我还有一个 csv，其中包含每个检测器随时间变化的占用数据，这是一个重要的流量值。

我想知道我应该如何使用 map 上显示的这些数据创建热图。我希望能够更改时间，甚至向前或向后播放时间，以了解拥塞情况以及如何从根本上阻止它。

这是当前页面的 html 和 jscript，删除了一些部分

    <div id="mapid" style="height:1858px; border-right: 1px solid #d7d7d7; position: fixed; top: 0px;width: 67%;z-index: 0;cursor: -webkit-grab;cursor: -moz-grab;background: #fff;
    color: #404040;color: rgba(0,0,0,.75);outline: 0;overflow: hidden;-ms-touch-action: none;
    box-sizing: border-box;"></div>

  </div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>

</body>


<script>

var myIcon = L.divIcon({
    html: '<i class="fas fa-map-pin"></i>',
    iconSize: [20, 20],
    className: 'dummy' // We don't want to use the default class
});

    var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.geoJSON(myGeojsonData, {
    pointToLayer: function (getJsonPoint, latlng) {
        return L.marker(latlng, { icon: myIcon });
    }
}).bindPopup(function(layer) {
    return 'ID #: ' + layer.feature.properties.IDnumber + '<br />Area: ' + layer.feature.properties.Area;
}).addTo(mymap);

    var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);

</script>

这是 geoJson 的一部分(整个文件很大，但你会得到图片)

var myGeojsonData =
{
  "features": [
    {
      "geometry": {
        "coordinates": [
          144.829434,
          -37.825233
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P0"
      },
      "type": "Feature"
    },...etc

这是包含流量数据的 CSV(由于篇幅原因，也只是其中的一部分。)

我试图通过使用这两个 json 文件来稍微简化一下(时间序列文件在 jsbin 中，因为它对于 stackoverflow 来说太大了。

var myGeojsonData =
{
  "features": [
    {
      "geometry": {
        "coordinates": [
          144.827465,
          -37.82572
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Freeway MVT on West Gate Fwy WB between Grieve Pde Off Ramp (ob) & Split To PFW and WRR",
        "IDnumber": "7859OB_L_P0"
      },
      "type": "Feature"
    },
    ],
  "type": "FeatureCollection"
}
;

如果有人能告诉我他们将如何处理这个问题，那就太好了。

谢谢，

Answer 1

我认为您需要做一些工作才能制作功能性应用程序，但我已经快速改进了您的 jsbin 以完成您需要的大部分“位”。

我编造了一些额外的假数据并将其包含在 jsbin 的“7859OB_L_P1”中。

基本上我有:

• 重组了示例数据，使其对构建热图更有用(尽管......实际上使用这些以热图库预期的格式准备数据可能更好)

  即[[lat, lng, value], ...] 而不是 {'Time':[...], 'Data':{...}}

• 使用istopopoki推荐的nouislider库

• 使用现有的传单插件绘制热图:leaflet.heat

大部分新“工作”是在 slider 更新调用中完成的。你可以在这里看到它:https://jsbin.com/jeguwif/edit?html,js,output

// Register an update handler on the slider which:
//  - Updates the "timeSelected" element
//  - Calculates the new data for the time
//  - sets the values into the heatmap and updates the "max" value
//
//  NB: if there is LOTS of data, it might be too slow to recalculate these
//      on every change, in which case perhaps building the [lat, lng, val] arrays
//      for each time up front might be a better idea
slider.noUiSlider.on('update', function (values, handle) {
  var index = Number(values[0])

  timeSelected.value = tabular['Time'][index]
  var dataRow = tabular['Data'][index]
   // play with this val for scaling, i.e. depends how zoomed you are etc
  var max = Math.max.apply(null, dataRow) * 1.0
  var heatValues = tabular['Locations'].map((loc, idx) => {
    return [].concat(locationCoords[loc]).concat(dataRow[idx])
  })

  heat.setOptions({max: max})
  heat.setLatLngs(heatValues.concat(heatValues).concat(heatValues))

});

此外，我在 HTML head 部分添加了脚本包含。