Leaflet.js 中的 HERE 交通事故整合

Question

背景：

我目前正在将 HERE 地图集成到我们基于网络的应用程序中。我正在尝试两者 - HERE 同时提供 Javascript API 和 Leaflet 以找到适合我们用例的最佳方法。

虽然 HERE 地图提供的 JavaScript API 还可以，但在使用栅格图块时 Leaflet 渲染效果要好得多。

问题：

我用栅格图块+传单就可以了，但是我们的应用程序还需要显示交通事件数据。

HERE 以 JSON 和 XML 格式 (Documentation link, Example JSON) 提供交通事故数据。他们提供 [Z]/[X]/[Y]、quadkey、prox、bbox 或 corridor 过滤器，可用于检索过滤后的数据集。

我试过使用 [Z]/[X]/[Y] 寻址和自定义 L.TileLayer 实现加载适当的 JSON，将其转换为 GeoJSON 并显示 GeoJSON在地图上。然而，这种方法效率很低，性能明显下降。

问题：

也许有人已经解决了这个问题，并且可以分享关于如何在 Leaflet 地图上显示 HERE 交通事件而不会遇到性能问题的任何见解？

Answer 1

我创建了以下脚本，没有任何性能问题：

var fg = L.featureGroup().addTo(map);
function loadTraffic(data) {
  fg.clearLayers();
  var d = data.TRAFFICITEMS.TRAFFICITEM.map((r) => {
    var latlngs = [];
    
    if (r.LOCATION.GEOLOC) {
      if (r.LOCATION.GEOLOC.ORIGIN) {
        latlngs.push(L.latLng(r.LOCATION.GEOLOC.ORIGIN.LATITUDE, r.LOCATION.GEOLOC.ORIGIN.LONGITUDE));
      }

      if (r.LOCATION.GEOLOC.TO) {
        if (L.Util.isArray(r.LOCATION.GEOLOC.TO)) {
          r.LOCATION.GEOLOC.TO.forEach((latlng) => {
            latlngs.push(L.latLng(latlng.LATITUDE, latlng.LONGITUDE));
          })
        } else {
          latlngs.push(L.latLng(r.LOCATION.GEOLOC.TO.LATITUDE, r.LOCATION.GEOLOC.TO.LONGITUDE));
        }
      }
    }
    var desc = r.TRAFFICITEMDESCRIPTION.find(x => x.TYPE === "short_desc").content;

    return {
      latlngs,
      desc
    }
  })
  console.log(d);

  d.forEach((road)=>{
    L.polyline(road.latlngs,{color: 'red'}).addTo(fg).bindPopup(road.desc);
  });
  map.fitBounds(fg.getBounds())
}

如果此脚本不适合您，请分享您的 json 文件。

Answer 2

好的，所以我找到了解决此任务的方法。显然我走的路很好，我只需要优化我的实现。

为了达到适当的性能，我必须做的是：

创建自定义 CircleMarker 扩展，它将在 canvas
创建 JS worker，它将从给定的 URL 获取数据，将其转换为 GeoJSON 并将 return GeoJSON 转换为它的侦听器
创建自定义 GridLayer 实现，它在 fetchTile 函数中创建 worker 实例，将其传递给已设置适当 [Z]/[X]/[Y] 坐标的 link，添加侦听器，它监听工人的 done 事件和 return 的空 tile
在工作人员的 done 事件中，自定义 GridLayer 实现创建 GeoJSON 层，将其添加到以坐标为键的字典中，如果缩放级别仍然相同 - 添加该图层到地图
在 map 上添加 zoomend 观察器，这会从地图中删除任何与当前缩放级别不匹配的层

现在地图绝对可用，并且比原来的 HERE JS 运行速度更快 API。

P.S. 抱歉，由于我们公司的政策，我无法分享实施本身。

Leaflet.js 中的 HERE 交通事故整合

HERE Traffic incidents integration in Leaflet.js

javascript

leaflet

here-api

traffic