HERE javascript API。设置中心& 缩放动画

Question

我正在使用HERE地图在我的React JS应用程序上渲染一些标记。在点击一个标记时，地图中心会改变为点击的中心，地图缩放会增加。在点击另一个标记时，地图位置会改变到其他标记。这种地图中心的变化应该以一个漂亮的动画过渡来进行，但相反，地图中心的变化瞬间没有动画。我找不到任何其他方法来实现这个功能。下面是我的地图实例化的样子。

在index.js中导入以下内容:

<script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-clustering.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-places " type="text/javascript" charset="utf-8"></script>

在.jsx文件中以如下方式将地图实例化。

const platform = new window.H.service.Platform({
    apikey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
});
const defaultLayers = platform.createDefaultLayers();
this.defaultLayers = defaultLayers;
const { zoom, center } = constants.mapView.default;  // values are imported from constants.js file.
const options = { zoom, center };
this.mapReference = new window.H.Map(document.getElementById('map'), defaultLayers.vector.normal.map, options);
const behavior = new window.H.mapevents.Behavior(new window.H.mapevents.MapEvents(this.mapReference));

在点击任何一个标记时，调用下面的函数，以新的地图中心坐标和缩放值作为参数。

setMapCenter = ({ center, zoom }) => {
        this.mapReference.setCenter(center,true);
        this.mapReference.setZoom(zoom, true);
    };

但是这种设置mapCenter和zoom级别的方式并没有增加平滑的过渡和动画。

---

我用 "here-js-api"（版本：1.0.11）npm模块尝试了同样的方法，效果很好。但该模块只需要 app_code 和 app_id 作为认证，但HERE地图上的新账户只提供了 apiKey 而现在我只有一个 apikey. 而当我使用apikey和here-js-api模块实例化HERE地图时，产生的API请求如下。

http://2.base.maps.api.here.com/maptile/2.1/maptile/c98407140a/normal.day/16/34939/19838/256/png8?xnlp=CL_JSMv3.0.17.0&app_id=null&app_code=null

这将返回未经认证的结果 所以现在我按照我在这里提到的第1种方法 以及HERE地图文档中的指示进行操作。但过渡动画没有应用。有什么想法，我在这2种方法中的任何一种都做错了吗？

Answer 1

我认为问题不在于React本身，而在于你试图设置中心并立即进行缩放。这样，第二个动画就会取消第一个动画。

对于正确的方式的动画多个属性，你应该使用 H.map.ViewModel#setLookAtData(查看数据) 方法。

setMapCenter = ({ center, zoom }) => {
  this.mapReference.getViewModel().setLookAtData(
    {
      position: center,
      zoom: zoom
    },
    true
  );
};

关于npm包。

没有官方的npm包用于 这里的JavaScript API 产品。