javascript - 诺基亚 HERE map Canvas 绘制速度

Question

我正在尝试使用 Javascript API 在 map 图 block 顶部绘制矩形网格，并突出显示(切换 fillColor )当前位于鼠标指针下方的矩形。我希望这么小的改变几乎会立即生效。

然而，对于这样的事情，变化发生的速度是难以忍受的，因为变化似乎会延迟 100 毫秒左右触发。即使我保存对 2x2 网格上的矩形之一的引用，然后从控制台更改其颜色，这也适用。因此，这似乎不太可能(但仍然可能)是性能问题，而是感觉 map 刷新不够频繁。

是否有办法让我告诉 map 立即重新绘制区域，或者我应该使用其他性能更高的绘制方式？我目前有一个使用 float div 作为突出显示的解决方法，但感觉有点错误，并且还存在其他需要解决的问题。

rect = new nokia.maps.map.Rectangle(boundingBox, opts)
...
// slow, but not a deal breaker
map.objects.add(rect)
...
// too slow to happen on every mouseenter/mouseleave event
rect.set('fillColor', '000000')

我使用的是 2.5 版本的 Javascript API，并且主要针对 Chrome。

Answer 1

您可以尝试 map.update(-1, true); 强制重绘 map 。

另一种可能的性能改进(有几个注意事项)是对网格使用覆盖层并且仅使用一个矩形。如果您尝试突出显示 TMS 服务器提供的 map 图 block 的当前方形区域，这可能会很有用。

您可以使用问题 here 中的代码添加 256x256 网格(或 128x128 或 64x64 等) ，然后只需在 map 上移动一个矩形即可显示当前突出显示的内容:

对于给定的缩放和坐标，当前图 block CooperativeZoomToXY 为:

var longitude = coord.longitude,
        latitude = coord.latitude,
        tilesPerRow = Math.pow(2, zoom),
        column,
        row;

      longitude /= 360;
      longitude += 0.5;
      latitude = 0.5 - ((Math.log(Math.tan((Math.PI / 4) + (latitude * Math.PI / 360))) / Math.PI) / 2.0);

      column = Math.floor(longitude * tilesPerRow);
      row  = Math.floor(latitude * tilesPerRow);

因此相反的操作(XYZtoCooperative)是:

var tilesPerRow = Math.pow(2, zoom),
        longitude = column / tilesPerRow * 360.0 - 180.0,
        lat_rad = Math.atan(sinh(Math.PI * (1 - 2 * row / tilesPerRow))),
        latitude = lat_rad * 180.0 / Math.PI;

当前图 block 是:

  nokia.maps.geo.BoundingBox.coverAll([
      XYZtoCoordinate(zoom, column , row),
      XYZtoCoordinate(zoom, column + 1, row + 1)]));

如果您将其添加到监听器并仅移动一个矩形，它可能会有所帮助，因为您每次只需要更新一个 map 对象。