Question

我正在尝试使用Javascript API在地图图块顶部绘制一个矩形网格，并突出显示（切换fillColor）当前鼠标指针下面的任何矩形。我希望这么小的改变几乎立即生效。

然而，发生变化的速度对于这样的事情是无法忍受的，因为变化似乎会触发延迟大约100ms左右。即使我在2x2网格上保存对其中一个矩形的引用，然后从控制台更改其颜色，这也适用。所以这似乎不太可能（但仍然可能）成为一个性能问题，但感觉就像地图根本不会经常刷新。

我可能有办法告诉地图立即重绘一个区域，还是应该使用其他一些更高效的绘图方式？我目前有一个使用浮动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);强制重绘地图。

或者，一个可能的性能改进（有几个注意事项）是使用网格覆盖和仅一个矩形。如果您尝试突出显示从TMS服务器提供的地图图块的当前正方形区域，则此功能非常有用。

您可以使用问题here中的代码添加256x256网格（或128x128或64x64等），然后仅在地图上移动一个矩形以显示当前突出显示：

对于给定的缩放和坐标，当前图块CoordinateZoomToXY为：

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);

因此反向操作（XYZtoCoordinate）是：

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;

并且当前的磁贴是：

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

如果您将此添加到侦听器并且只移动了一个矩形，则可能帮助，因为您每次只需要更新一个地图对象。

诺基亚HERE Maps帆布绘图速度

1 个答案: