HERE javascript API: 设置中心和动画缩放

Question

我正在使用 HERE 地图在我的 React JS 应用程序上渲染一些标记。单击标记时，地图中心更改为单击的中心并且地图缩放比例增加。单击另一个标记时，地图位置会更改为另一个标记。这种地图中心的变化应该发生在一个很好的 animation/transition 上，但是地图中心会在没有动画的情况下瞬间改变。我找不到任何其他方法来做到这一点。这是我的地图实例化的样子：

在 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);
    };

但是这种设置地图中心和缩放级别的方式并没有添加平滑的过渡或动画。

我使用 "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

此 returns 未经身份验证，所以现在我按照我在此处提到的第一种方法以及 HERE 地图文档中的指示进行操作。但是 transitions/animations 没有应用。知道我在这两种方法中做错了什么吗？

Answer 1

我认为问题不在于 React 本身，而在于您尝试设置中心并立即缩放这一事实。这样第二个动画就取消了第一个。

要正确设置多个属性的动画，您应该使用 H.map.ViewModel#setLookAtData 方法：

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

关于 npm 包：

HERE JavaScript API 产品没有官方 npm 包。

HERE javascript API: 设置中心和动画缩放

HERE javascript API: Set center & zoom with animation

here-api