0

我想我发现了一个错误：

我正在尝试使用网络套接字创建实时视图，我需要一些建议。这是文档https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation（仅使用一个标记），问题是：

如果我将地图的中心设置为等于每一步（onStep）上的标记坐标，我将无法正确放大。

这是一段代码（见第 4 行）：

const animateMarkerPosition = (marker, nextCoord) => {
        const onStep = (coord) => {
            marker.setGeometry(coord);
            // I cannot zoom in properly when below line is uncommented
            // setCenter(marker.getGeometry());
        }
 
        const onComplete = (coord) => {
            setCenter(marker.getGeometry());
            firstZoomIn();
        }
 
        ease(
            marker.getGeometry(),
            nextCoord,
            1000,
            onStep,
            onComplete
        );
    }
 
    const ease = (
        startCoord = { lat: null, lng: null },
        endCoord = { lat: null, lng: null },
        durationMs = 1000,
        onStep = () => { },
        onComplete = () => { },
    ) => {
        let raf = function (f) { window.setTimeout(f, 16) },
            stepCount = (durationMs / 16) || 1,
            valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount,
            valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount,
            sinValueIncrement = Math.PI / stepCount,
            currentValueLat = startCoord.lat,
            currentValueLng = startCoord.lng,
            currentSinValue = 0;
 
        function step() {
            currentSinValue += sinValueIncrement;
            currentValueLat += valueIncrementLat * (Math.sin(currentSinValue) ** 2) * 2;
            currentValueLng += valueIncrementLng * (Math.sin(currentSinValue) ** 2) * 2;
 
            if (currentSinValue < Math.PI) {
                onStep({ lat: currentValueLat, lng: currentValueLng });
                raf(step);
            } else {
                onStep(endCoord);
                onComplete(endCoord);
            }
        }
 
        raf(step);
    }

4

1 回答 1

0 
// I cannot zoom in properly when below line is uncommented
// setCenter(marker.getGeometry());

您也不能放大/缩小和平移地图（我希望您谈论交互式放大？）因为 setCenter 方法在程序的循环中运行，这会在每个调用 setCenter 时阻止地图的任何其他平移/缩放事件还没有结束。我还希望您只为一个标记而不是所有标记调用 setCenter。

请参阅 https://jsfiddle.net/vjw9o2dh/ 上的重新设计示例https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation我在第 86 行只为第一个标记调用 setCenter：

function updateMarkerPositions() {
  markers.forEach(function(marker, idx) {
    // get random position 0 - 450km from map's center in random direction
    let randomPoint = map.getCenter().walk(Math.random() * 360, Math.random() * 450000);

    // update marker's position within ease function callback
    ease(
      marker.getGeometry(),
      randomPoint,
      4000,
      function(coord) {
        marker.setGeometry(coord);
        if(idx == 0) map.setCenter(coord, false);
      }
    )
  })
}

在上面的示例中，平移地图也无法正常工作，因为在动画期间多次更改地图的中心。

于 2020-08-18T14:43:54.163 回答