自定義地圖覆蓋heremaps js api v3

Question

我想從這裏切換項目地圖2.5.4到3.0.5。 我有一個自定義動畫圖像覆蓋地圖。在2.5.4它通過ImageProvider實現：

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++; 
} 

在V3.0.5沒有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);