自定义地图覆盖heremaps js api v3 [英] Custom map overlay heremaps js api v3

问题描述

我正在尝试将项目从这里的2.5.4切换到3.0.5. 我有一张带有自定义动画图像叠加层的地图.在2.5.4中，它是通过ImageProvider实现的:

I am trying to switch a project from here maps 2.5.4 to 3.0.5. I have a map with a custom animated image overlay. In 2.5.4 it is realized via 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中实现它?

In v3.0.5 there is no ImageProvider and I didn't find another solution in the api documentation. Does anyone know how to realize it in v3 ?

推荐答案

是的，似乎还没有ImageProvider. 您可以通过以下方式入侵它:

Yup, there seems to be no ImageProvider (yet?). You can hack it in, though:

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

这篇关于自定义地图覆盖heremaps js api v3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！