맞춤 맵 오버레이 heremaps js api v3

Question

여기에서지도 2.5.4에서 3.0.5로 전환하려고합니다. 맞춤 애니메이션 이미지 오버레이가있는지도가 있습니다. 2.5.4에서 그것은 ImageProvider을 통해 실현 : v3.0.5에서

var imageProvider = new nokia.maps.map.provider.ImageProvider({ 
    opacity: 0.8, 
    getBoundingBox: function() { 
     return new nokia.maps.geo.BoundingBox(
      new nokia.maps.geo.Coordinate(55.599073, 3.550307), 
      new nokia.maps.geo.Coordinate(47.27036232672, 15.434621365086) 
     )}, 
    getUrl: function() { 
     return images[index]; // return the current image 
    }, 
    updateCycle: 86400, 
    cache: new nokia.maps.util.Cache(100) 
}); 

//add listener to show next image 
imageProvider.addListener("update", function(evt) { 
    index++; 
} 

는 더 ImageProvider이없는 내가 API 문서에 다른 해결책을 찾지 못했습니다. 누구든지 v3에서 그것을 깨닫는 방법을 알고 있습니까?

Answer 1

그래, ImageProvider (아직?)가없는 것 같습니다. 당신은하지만, 그것을 해킹 할 수

// assuming you have a H.Map instance call "map" 
 

 
// that's where we want the image 
 
var rect = new H.geo.Rect(51, 12, 54, 15), 
 
    // that's the images we want 
 
    images = [ 
 
    'http://newnation.sg/wp-content/uploads/random-pic-internet-06.jpg', 
 
    'http://newnation.sg/wp-content/uploads/random-pic-internet-04.jpg', 
 
    'http://newnation.sg/wp-content/uploads/random-pic-internet-06.jpg' 
 
    ], 
 
    current = 0, 
 
    // that the image node we'll use 
 
    image = document.createElement('img'); 
 

 
// you could probably use CSS3 matrix transforms to improve performance 
 
// but for demo purposes, I'lluse position:absolute and top/left for the image 
 
image.style.position = "absolute"; 
 
image.style.opacity = "0.8"; 
 

 
// this function updates the image whenever something changes 
 
var update = function() { 
 
    // project the rectangle's geo-coords to screen space 
 
    var topLeft = map.geoToScreen(rect.getTopLeft()); 
 
    var bottomRight = map.geoToScreen(rect.getBottomRight()); 
 
    // calculate top/left and width/height 
 
    var offsetX = topLeft.x; 
 
    var offsetY = topLeft.y; 
 
    var width = bottomRight.x - topLeft.x; 
 
    var height = bottomRight.y - topLeft.y; 
 

 
    // set image source (update is also called, when we choose another image) 
 
    image.src = images[current]; 
 
    // set image position and size 
 
    image.style.top = offsetY + "px"; 
 
    image.style.left = offsetX + "px"; 
 
    image.style.width = width + "px"; 
 
    image.style.height = height + "px"; 
 
}; 
 

 
// append the image 
 
map.getViewPort().element.appendChild(image); 
 
// set initial values 
 
update(); 
 

 
// update whenever viewport or viewmodel changes 
 
map.getViewPort().addEventListener('sync', function() { 
 
    update(); 
 
}); 
 
map.getViewModel().addEventListener('sync', function() { 
 
    update(); 
 
}); 
 

 
// zoom to rectangle (just to get the images nicely in view) 
 
map.setViewBounds(rect); 
 

 
// start the image change interval 
 
setInterval(function() { 
 
    current = (current + 1) % 3; 
 
    update(); 
 
}, 3000);