HERE传单中的交通事件集成

Question

背景：

我目前正在将HERE地图集成到我们的网络应用程序中。我正在同时尝试这两种方法-HERE提供的Javascript API和传单，以找到我们使用的最佳方法。

虽然HERE地图提供的JavaScript API还可以，但在使用光栅瓦片时，渲染方式Leaflet的性能要好得多。

问题：

我可以使用光栅瓷砖+传单，但我们的应用程序也需要显示交通事故数据。

交通事故数据由HERE以JSON和XML格式提供(文档链接，示例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扩展，该扩展将在画布上绘制自定义图标
• 创建JS worker，它将从给定的URL获取数据，将其转换为GeoJSON，并将GeoJSON返回给它的侦听器
• 创建自定义GridLayer实现，该实现在fetchTile函数中创建工作者实例，向其传递已设置适当[Z]/[X]/[Y]坐标的链接，添加侦听器，侦听工作者的done事件并返回空tile
• 在工作人员的done事件中，自定义GridLayer实现创建GeoJSON层，将其添加到字典中，并将坐标作为关键字，如果缩放级别仍然相同，则将该层添加到地图中
• 在map上添加zoomend观察器，从地图中删除任何与当前缩放级别不匹配的图层

现在地图肯定是可用的，并且工作速度比原始的HERE JS API快得多。

附言很抱歉，由于我们公司的政策，我无法分享实施过程。