在 Leaflet.js 中集成交通事件

问题描述

背景：

我目前正在将 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 交通事故而不遇到性能问题的任何见解？

解决方法

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

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 文件。

,

好的，我已经为这个任务找到了解决方案。显然，我走在一条不错的道路上，我只需要优化我的实施。

为了获得适当的性能，我必须做的是：

• 创建可在画布上绘制自定义图标的自定义 <item android:menuCategory="secondary" android:id="@+id/settingsFragment" android:title="Settings" app:showAsAction="never" /> 扩展
• 创建 JS 工作器，从给定的 URL 获取数据，将其转换为 GeoJSON 并将 GeoJSON 返回给它的侦听器
• 创建自定义 CircleMarker 实现，该实现在 GridLayer 函数中创建工作实例，将已设置适当 fetchTile 坐标的链接传递给它，添加侦听器，侦听工作人员的 {{ 1}} 事件并返回空图块
• 在 worker 的 [Z]/[X]/[Y] 事件中，自定义 done 实现创建 done 层，将其添加到字典中，并将坐标作为键，如果缩放级别仍然相同 - 添加该层到地图
• 在 GridLayer 上添加 GeoJSON 观察者，这会从地图中移除任何与当前缩放级别不匹配的图层

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

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